Jump to content

Div Layout and aligning


setmoa
 Share

Recommended Posts

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 post-94605-0-90979000-1348604163_thumb.jpg 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? :boredom: 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

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

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 by niche
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...