The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Question regarding Headers
AllenR
post Apr 17 2018, 09:58 PM
Post #1





Group: Members
Posts: 1
Joined: 17-April 18
Member No.: 26,636



So, I'm relatively new to HTML/CSS. I've been trying to put a horizontal navigation bar at the top of a page with say the links on the right side and the name of the Website on the left side. But no matter what i do all it happens to be is either above or below the navigation bar depending upon where i put it at in HTML. Could anyone take a look and tell me what i'm doing wrong/how to fix it. Thanks =) HTML Attached File  index.html ( 408bytes ) Number of downloads: 443
CSS Attached File  randomstyles.css ( 369bytes ) Number of downloads: 437


This post has been edited by AllenR: Apr 17 2018, 10:01 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2018, 07:29 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



First, you can't have the H1 directly inside UL. Lists and tables are kind of multi layered wrappers. Nothing can be between the tags they are made up with. Everything must go inside LI in your case and inside TD and TH in the case of tables.

Start with moving the H1 outside the list. Then wrap the whole thing in a DIV. I'll explain the other changes below.

HTML
<div id="head">
<h1>The Random Website</h1>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="clearit"></div>
</div>


The LINK should look like this.
CODE
<link rel="stylesheet" type="text/css"    href="...">
                       ^^^^

You had written text="text/css".

Now move the background color to the new DIV, which I gave the ID 'head'. Float the H1 left and set its margins to 0. I also removed the padding you had there because I don't think you want it, but I could wrong about that.

Removed the overflow: hidden on UL. See no reason for it and it can make things disappear.

Lastly, to prevent an element containing floats from collapsing we need to "clear" the floats. Floats take up no space and if there is nothing but floats in a containing element it will have no height and thus for example a background color won't show and borders will collapse to a single line. There are maybe more elegant ways of doing this that you can read about here http://css-discuss.incutio.com/wiki/Clearing_Space , but I stick with the old style clearing DIV. That is, add a DIV last thing before the closing tag for #head and add a style rule that clears both left and right. You can try one of the other options if you like.

Think that was all. Here is the changed style sheet.

CODE

ul         { list-style-type: none;
             margin: 0;
             padding: 0 }

li         { float: right }

li a       { display: block;
             color: white;
             text-align: center;
             padding: 14px 16px;
             text-decoration: none }

li a:hover  { background-color: #111 }


#head      { background-color: #333 }
#head h1   { margin: 0;
             float: left }

.clearit   { clear: both}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2018, 08:23 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Forgot to mention, maybe you could use the CSS3 element NAV instead of the DIV. I've seen it used this way, but as I interpret the spec it shouldn't contain anything other than navigation links, i.e. it wouldn't be right to have the H1 there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2018, 11:07 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 18 2018, 03:23 PM) *

Forgot to mention, maybe you could use the CSS3 element NAV instead of the DIV. I've seen it used this way, but as I interpret the spec it shouldn't contain anything other than navigation links, i.e. it wouldn't be right to have the H1 there.

HTML5 suggests the HEADER element (not to be confused with HEAD) for headings and navigational aids: https://www.w3.org/TR/html/sections.html#elementdef-header
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2018, 02:13 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Right. But why don't they use NAV inside HEADER in the example?

To the OP, stick with the DIV for now. At last we know how that works. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2018, 04:17 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 18 2018, 09:13 PM) *

Right. But why don't they use NAV inside HEADER in the example?

They do, in example 19.

QUOTE
To the OP, stick with the DIV for now. At last we know how that works. happy.gif

Yeah, the HTML5 sectioning models seem a bit overcomplicated to me. Not even sure if they enhance accessibility for anyone.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2018, 07:48 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I didn't read that far. blush.gif

But why don't they all the time? If NAV is the thing to use, then shouldn't it always be used?

I hated XHTML. I don't hate HTML 5, but I'm not sure I like it very much either. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 19 2018, 08:32 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 19 2018, 02:48 AM) *

I didn't read that far. blush.gif

It's easy to give up halfway. sleep.gif

QUOTE
But why don't they all the time? If NAV is the thing to use, then shouldn't it always be used?

Yes, it's like they publish all these models and then don't care if anyone will use them.

QUOTE
I hated XHTML. I don't hate HTML 5, but I'm not sure I like it very much either. wacko.gif

A bit OT, but I can't resist:
https://www.reddit.com/r/javascript/comment...nd_the/ddkwft4/
https://www.reddit.com/r/javascript/comment...nd_the/ddl6xi8/
(both DomenicDenicola and Hixie seem to work for WHATWG).




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 19 2018, 11:12 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Interesting. And actually quite scary. Who are these guys we trust? Changing names, eh? ohmy.gif


QUOTE(Christian J @ Apr 19 2018, 03:32 PM) *

QUOTE(pandy @ Apr 19 2018, 02:48 AM) *

I didn't read that far. blush.gif

It's easy to give up halfway. sleep.gif


Well, since I'm so bright it's usually enough for me to read the first sentence. cool.gif cool.gif cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 19 2018, 11:45 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 19 2018, 06:12 PM) *

Interesting. And actually quite scary. Who are these guys we trust? Changing names, eh? ohmy.gif

And in the background there's a struggle between the entertainment industry pushing for DRM and the ad industry pushing for spyware.

QUOTE
Well, since I'm so bright it's usually enough for me to read the first sentence. cool.gif cool.gif cool.gif

No I meant the spec becomes impossible to follow after a short read. Of course it doesn't help to be lazy on top of that. tongue.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 19 2018, 12:23 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Can't say I've read that much of it. I have a hard time generating interest. But I've read enough to miss the clarity of the old specs. Yes, they are terse. Yes, there is a learning curve. But they are, I don't find the right word, concise? wub.gif

And as I've said several times before, I hate that there are no DTDs anymore. I never understood why they left SGML. There's probably a good reason for that, but I haven't read any clear explanation of why that step was necessary. Maybe SGML isn't suited to define the new elements of HTML 5. I would like to know though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 30 2018, 05:20 AM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It's somewhat discouraging when the OP doesn't even check back... sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 05:59 PM