after i made the banner background take full space of the banner area the navigation links i made are underneath the image … and i don’t know how to show it above the image again …
here’s the HTML code of the image and the nav links
thanks alot … idk how that happened but when i opened the page it was fixed by itself … can you please tell me how to style all the links like the ( Home ) one and how to fix the flowing right cuz i wrote ( float: right; ) but it doesn’t work they’re just stuck there …
here’s the screenshot of the banner part of the page …
I have not been following your earlier thread/s but I do understand that you are a newbie. I also understand that you have difficulty following instructions and explaining your wishes, so if my requests below are too difficult to follow or too much trouble, then I will drop out and not trouble you any more. Fair enough?
Would you please use your favorite graphics program and draw a simulated screenshot showing where you want the links to appear, how you want them to look, and how you want them to behave as the viewport widths change. If you have a link to your site, please include that, too, if possible.
If position is absolute or fixed then float is ignored as per the specs. The float is redundant and should be removed but will do no harm or have no effect either way.
oh no sorry … it was just a mistake … didn’t mean to do that twice … but i wrote float and fixed when i was trying to make them show up when they were underneath the image … i didn’t know what to do at all so i tried everything i know … then i forgot to fix that when it got fixed … and yeah … iam very newbie
i don’t know anything about graphics or designing yet ( but i will soon )
but i think this photo will do …
i want to move them to be in those 4 white spaces … and to look like the contact link … and iam pretty sure there’s some mistakes in the css code ( which up there in the form )
While waiting for a fuller explanation how you can fix the hidden nav, you can experiment with the code: (Remove the width and fixed position and add the other properties.)
yeah that amost worked … they moved to the right but not like i wanted …
i think the mistakes iam doing are because of the tutorial iam following …
its a tutorial in this site ( sitepoint ) … the guy who made it just keeps writting stuff without explaining why he’s writting that …
i really don’t understand why he wrote any of those stuff in the css file …
i don’t know what’s the “a” or the “ul” or the “li” after the “.header__nav” means … sorry iam a newbie
@koku300: when you post code on the forums, you need to format it so it will display correctly.
You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.
No. I’d already fixed that code block for you (and I’ve fixed it again).
You need to put the backticks above the first line of your code, and below the last line of your code, to mark it as one code block. It’s particularly important to do this with HTML, because otherwise the forum will try to display the content of the HTML, not the code. It also means that if you have a very long section of code, it is shown at a manageable length with scroll bars.
It’s not a real page … it’s just for practice … ( no data base )
and it doesn’t matter who the author iam just leaving it empty so when i finish the whole page i do think of those …
and here’s the link of the turorial …
i followed the tutorial almost exactly in everything … but there’s somethings i didnt’t do right like he did …
so there’s 4 css style sheets … ( 2 of them he’ve used according to where iam … the layout and the modules pages )
Then highlight all lines of code you have pasted and use the code button, and all of it will be surrounded with the backticks and shown as posted code. Mind that not use the code button in lines that is already shown as code.
The “newbe” way would be to first press enter for a new line, then use the </> button and paste the code where the “type or paste code here” show. You can then write more code if you like as long as you don’t go outside the three-backtick lines before and after.
The “experienced” way is to learn how to mark the code with backticks. (Sorry @TechnoBear, but I’m still using the code button).
EDIT) I have some trouble typing so I see my post is already overrun by more posts. I post it anyway if it can help anyone else reading this.
koku300, the “highlight thing” and the code button go together. The code button does not work without highlighting the code. Can you type the backticks? Does your keyboard have a backtick key in the upper left corner? If it does, then you do not need to highlight any code or click the code button, just use the backticks before and after the code you wish to post.
Then you will have a hard time until you learn the basics.
The css “a” and “ul” and “li” are selecting the html elements with the tags <a><ul> and <li>. The .header_nav is a class (dot=class, #=id) given to a tag (class=class, id=id). That’s the way css can target the html for styling.
The author of the tutorial is Russ Weakley. In my opinion, this is not a good tutorial for a total newbie. Russ is teaching a unique coding methodology rather than focussing on basic HTML and CSS. I think you should have picked something easier/simpler to teach you the language of HTML and CSS first.
You cannot succeed until you understand what “a” and the “ul” and the “li” after the “.header__nav” means. You are right. He expects you to know more than you do.
If you do not wish to consider a new course, then please tell which lesson you are at now with the menu.
