Having trouble making text move/creating button

paigeheff / sections

Make a responsive website section with an image, blurb and a button.

0 stars 0 forks source link

Having trouble making text move/creating button #1

Open paigeheff opened 7 years ago

paigeheff commented 7 years ago

@thomasjbradley

I am having some difficulties with creating the button to move the page, and making the type move with the page. I also can't make the black border around the button. How would I do this?

Do you have time to meet quickly tomorrow after 11?

Paige

thomasjbradley commented 7 years ago

Re: border

Border always requires three pieces of information:

Thickness (3px, etc.)
Style (solid, dashed, dotted)
Colour

In the code, there are only two pieces of info—you'll need a line like this:

border: 1px solid #000;

Re: moving text

To get all the text move together as one thing it all has to be inside one element—it currently isn't.
The SVG code shouldn't be pasted into the page—use an <img> tag with the src="" attribute pointing to the SVG file.

paigeheff commented 7 years ago

I did the border, but it isn't going black, even if I put the black in it.

and I don't really understand what you mean when you mean put it into one element. How would I do this?

I also tried putting the image name into the file and its not working either. How do I write it out?

paigeheff commented 7 years ago

How do I fix those errors too on markbot?

thomasjbradley commented 7 years ago

I see you've figured out the <img> tag.

Many of those Markbot errors are because there's a <div> inside the <head> tag—here: https://github.com/paigeheff/sections/blob/gh-pages/index.html#L4 and here: https://github.com/paigeheff/sections/blob/gh-pages/index.html#L10

Delete that and it should help.

There shouldn't ever be any HTML outside the <body> tag—anything you want to see on the screen must be put into the <body> tag. The <head> tag is for things you don't see: like the CSS file connection.

paigeheff commented 7 years ago

Yes, I figured that out.

I moved the div inside the tag, and I got the picture to be the right size, but I cannot figure out how to move the text with the screen or create a button that moves the screen. I also cannot figure out how to make the "visit khufu" border BLACK. I've been spending a lot of time on this, and it just doesn't seem to be working. I also have a lot of markbot issues. Can you please help me with the errors as well on it? Thanks

paigeheff commented 7 years ago

@thomasjbradley

thomasjbradley commented 7 years ago

The border on the button looks okay to me—I guess you figured that one out.

To get things to move the way you want you'll have to group them together. All the text & button needs to be grouped together into one <div> and the <img> inside another <div>—that way the two <div> tags can be moved around and set to display: inline-block.