setmoa Posted September 25, 2012 Share Posted September 25, 2012 Hi all I'm really new to css etc and am currently working from a template on my first project. I am having trouble setting out the header of my webpage. I would like it to look like the attached but am unsure how I do this or what out of the below I need. I was going to put the logo in the #icons and the tel and email address in #details, when I try to align the text nothing happens?? What other info do you need to help this damsel in distress? CSS section below: #name-topnav-bg { background-color: #FFF; width: 100%; height: 120px;}#name-topnav-wrap { width:900px; margin:0 auto; }#name { width: 300px; float: left; margin-top: 10px; margin-bottom: 20px;}#name h2 { font-size:28px; }#name span.name-left { color: #900;}#name span.name-right { color:#09F; } #icons { width: 100px; margin-top: 95px; float:left } #details { width: 500px; margin-top: 95px; text-align: right; float:right } Link to comment Share on other sites More sharing options...
Don E Posted September 25, 2012 Share Posted September 25, 2012 What other info do you need to help this damsel in distress? Posting the HTML part where you think the issue is. Link to comment Share on other sites More sharing options...
setmoa Posted September 25, 2012 Author Share Posted September 25, 2012 Sorry here it is: <div id="wrapper"><div id="top"></div><div id="name-topnav-bg"><div id="name-topnav-wrap"><div id="name"> <img src="images/logo-FI.png" width="227" height="119" alt="F I Joinery - Bespoke Joinery and Shopfitting, Devon" /></div><div id="icons"><p>hello</p></div><div id="details"><p> Tel: here how is this supposed to look now</p></div></div></div> Link to comment Share on other sites More sharing options...
niche Posted September 25, 2012 Share Posted September 25, 2012 (edited) Since it's your first project take a moment to look at your page with your developer's tools (aka firebug or Tools in Chrome) and report back EDIT: and l look at your html when it's written like this (can't get the idents to work, but you'll see it) : <body><div id="wrapper"> <div id="top"></div> <div id="name-topnav-bg"> <div id="name-topnav-wrap"> <div id="name"> <img src="images/logo-FI.png" width="227" height="119" alt="F I Joinery - Bespoke Joinery and Shopfitting, Devon" /> </div> <div id="icons"> <p>hello</p> </div> <div id="details"> <p> Tel: here how is this supposed to look now</p> </div> </div> </div></body> For starters, do you see what's missing? You have to fix that before the css matters. Don E was right-on to ask for your html. Edited September 25, 2012 by niche Link to comment Share on other sites More sharing options...
setmoa Posted September 26, 2012 Author Share Posted September 26, 2012 hi, thanks for your response but I can't see it. I have downloaded firebug but i'm not sure where i'm looking. sorry for being dumb, could you explain?? Link to comment Share on other sites More sharing options...
Don E Posted September 26, 2012 Share Posted September 26, 2012 From the HTML you posted, there is no closing </div> tag for: <div id="name-topnav-wrap"> Link to comment Share on other sites More sharing options...
niche Posted September 26, 2012 Share Posted September 26, 2012 (edited) Indenting will allow you to catch problems like that. Any way, after you close that div per Don E, you can use your firebug to see the top-margin problem in the divs with id="icons" and id="details". Do you see it? Edited September 26, 2012 by niche Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now