/    Sign up×
Community /Pin to ProfileBookmark

trouble with header and navigation

Copy linkTweet thisAlerts:
Jul 20.2016

Hi everyone.
I’m new to this, not done web development since 2002 and recently got back into it.
I’m having trouble with my header and navigation.

I’ve designed the website in photoshop and i’m not trying to build it in css but i’m struggling to get the background for my header, how i designed it.

I have a logo in the header and want a black background to span across the page behind the logo. The navigation is then underneath the logo and i want a grey background to span across the page behind that but no amount of code i’m trying is getting me the result i want. I’ve even tried adding the background as an image at the size of 1 pixel and then having that repeat across the page but it doesnt show. I’m at a loss and dont know what to do.

Here is my code for the site: (be gentle i’ve only been learning css for a week)

[code]
body {
background-color: #810e0e;
width: 100%;
float: left;
}
.logo {
padding: 0px 300px 20px 100px;
}

body > nav ul li {
display: inline-block;
list-style-type: none;
font-family: Orbitron;
font-size: 18px;
float: left;
padding: 5px 10px 5px 30px;

}

a {
color: white;
text-decoration: none;
padding: 5px;
border-radius: 5px;

}
a:visited {
color: white;
}

a:hover {
background-color: black;
color: white;
padding: 5px;
border-radius: 5px

}

h1, div {
font-family: sans-serif;
color: white;
float: left;
}

.product {
margin: 10px 20px 20px 10px;
}
.about {
background-color: #999;
padding: 0px 5px;
border-radius: 5px;
margin: 10px 20px 10px 20px;
}

.blurb {
background-color: #999;
font-family: sans-serif;
padding: 5px 5px;
border-radius: 5px;
margin: 10px 20px 20px 20px;
clear: both;
float: left;
}

.design {
background-color: #999;
font-family: sans-serif;
padding: 5px 5px;
border-radius: 5px;
margin: 10px 20px 20px 20px;
float: left;
}

.icons {
align-content: center;
margin-top: 20px;
clear: both;
}

nav ul li {
font-family: sans-serif;
font-size: 13px;
display: inline-block;
list-style-type: none;
margin: 0.5px 50px 0.5px 50px;

}
.footnav {
background-color: black;
background-repeat: repeat;

}

.copyright {
margin-right: 80px
}
.fb {
background-color: black;
padding: 6px 100px 6px 50px;
}
[/code]

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@phoenixDnDauthorJul 20.2016 — Hi everyone.

I've recently got back into web design and development since 2002! i'm having trouble with my header and navigation. My header has a logo and i want to have a background colour span the whole width of the page but i also want the have the navigation bar do the same but be a different colour. I've tried a number of different things to try and get this effect but it's just not happening.

Here is a copy of my code: (i've only been doing css for a week...be gentle)
<i>
</i>body {
background-color: #810e0e;
width: 100%;
float: left;
}
.logo {
padding: 0px 300px 20px 100px;
}

<i> </i>body &gt; nav ul li {
<i> </i> display: inline-block;
<i> </i> list-style-type: none;
<i> </i> font-family: Orbitron;
<i> </i> font-size: 18px;
<i> </i> float: left;
<i> </i> padding: 5px 10px 5px 30px;

}

a {
color: white;
text-decoration: none;
padding: 5px;
border-radius: 5px;

}
a:visited {
color: white;
}


a:hover {
background-color: black;
color: white;
padding: 5px;
border-radius: 5px

}


h1, div {
font-family: sans-serif;
color: white;
float: left;
}

.product {
margin: 10px 20px 20px 10px;
}
.about {
background-color: #999;
padding: 0px 5px;
border-radius: 5px;
margin: 10px 20px 10px 20px;
}

.blurb {
background-color: #999;
font-family: sans-serif;
padding: 5px 5px;
border-radius: 5px;
margin: 10px 20px 20px 20px;
clear: both;
float: left;
}

.design {
background-color: #999;
font-family: sans-serif;
padding: 5px 5px;
border-radius: 5px;
margin: 10px 20px 20px 20px;
float: left;
}

.icons {
align-content: center;
margin-top: 20px;
clear: both;
}

nav ul li {
font-family: sans-serif;
font-size: 13px;
display: inline-block;
list-style-type: none;
margin: 0.5px 50px 0.5px 50px;

}
.footnav {
background-color: black;
background-repeat: repeat;

}

.copyright {
margin-right: 80px
}
.fb {
background-color: black;
padding: 6px 100px 6px 50px;
}
Copy linkTweet thisAlerts:
@phoenixDnDauthorJul 20.2016 — i know there is currently no code for the header...i deleted it as i was getting nowhere!
Copy linkTweet thisAlerts:
@RDWMJul 22.2016 — You will need to post the html so I can get a complete picture of what you got going on...but there are a few things I noticed right off the bat...like the body having the "float: left; " attribute...this is strange...and your husband can be it'seems own selector, no need for the "div" ....post your html and I'll help you out. =)
Copy linkTweet thisAlerts:
@phoenixDnDauthorJul 22.2016 — I've solved the problem now but thanks for the input.
Copy linkTweet thisAlerts:
@jedaisoulJul 22.2016 — Hi and welcome to the site. Posting the html as well is essential, even though it may be quite simple.

On a general point, I would suggest that setting body to 100% without an upper limit is a bad idea anyway! Why? Because screens tend to get bigger over time, and you have no idea what the site will look like. Even 1920px is way too wide for many designs. So to limit the body to, say, 960px wide and center it on the screen, use:

<i>
</i>body {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
Copy linkTweet thisAlerts:
@jedaisoulJul 22.2016 — Oh and an easy way to make your design responsive (which is pretty well essential now-a-days) is to start with a classic fixed-width design setting body width at 960px or so:
<i>
</i>body {
width: 960px;
margin: 0 auto;
}
/* other settings for large screens here */

Then you add media queries to reset the width of body on medium and small screens, and another for very small screens. So you end up with something like:
<i>
</i>body {
width: 960px;
margin: 0 auto;
}
/* other settings for large screens here */

@media screen and (max-width: 959px){
body {
width: 640px;
}
/* other settings for medium screens here */
}

@media screen and (max-width: 639px){
body {
width: 480px;
}
/* other settings for small screens here */
}

@media screen and (max-device-width: 479px){
body {
width: 100%;
min-width: 320px;
}
/* other settings for very small screens here */
}
Copy linkTweet thisAlerts:
@phoenixDnDauthorJul 22.2016 — That's great advice! Thank you very much
Copy linkTweet thisAlerts:
@3wCornerJul 22.2016 — Add css for your header. here is an example:

<i>
</i>.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
}

then use the header class in your html
[code=html]
<body>

<div class="header">
<div></div> //insert your logo here
</div>
[/code]
Copy linkTweet thisAlerts:
@phoenixDnDauthorJul 22.2016 — Great thanks
×

Success!

Help @phoenixDnD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...