Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css header layout

Status
Not open for further replies.
derwent

derwent

Programmer
Joined
May 5, 2004
Messages
428
Location
GB
I have a header for our mini site that I would like to develop using css (no tables). With tables this is pretty easy but my css efforts are all way off [sad]

Here is the header I would like to create:-
open image

Is this possible to create using css?

Thanks folks
 
Sort by date Sort by votes
Here is what I have so far, can`t get the flippin logo to go in the right place though

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {text-align: center; font-family: arial; font-size: 12px}
#header {position: relative; margin: 0 auto; height: 76px; width: 750px; text-align: right; background: #A5A0D6 url(images/headerbackground.gif) top left; color}
#nav1 {display: block; margin: 32px 5px 0px 0px; height: 20px; }
 #nav1 a {color: #ffffff; text-decoration: none; width: 90px; text-align: center}
#nav2 {display: block; margin: 4px 5px 0px 0px; height: 20px; }
 #nav2 a {color: #ffffff; text-decoration: none; text-align: center; margin-right: 5px}
#logo {position: relative; margin-left: 27px;}
-->
</style>
</head>

<body>
<div id='header'>
  <div id='nav1'>
  <a href=''>Home</a>  <a href=''>Link2</a>  <a href=''>Link3</a>  <a href=''>Link4</a>  <a href=''>Link5</a>
  </div>
		<div id='nav2'>
  <a href=''>Link6</a>   <a href=''>Link7</a>   <a href=''>Link8</a>   <a href=''>Link9</a>   <a href=''>Link10</a>
  </div>
		<div id='logo'><a href='/'><img src="images/logo.gif" alt="" width="270" height="76" border="0"></a></div>
</div>

</body>
</html>
 
Upvote 0 Downvote
#logo {float: right; position: relative; margin-left: 27px;}
 
Upvote 0 Downvote
You could take the logo out of the document flow and position it absolutely. It will still be relative to the #header but it will not interfere with the positions of other elements in header and you can position it exactly where you want it. The other option is to redo the whole code with floats:
Code: 
<header>
 <logo floated left></logo>
 <menu floated right>
  <top menu>
  <bottom menu>
 </menu>
</header>
This is a pseudo code structure.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
920
PeDa
PeDa
tyutghf
  • Locked
  • Question Question
Achieving this grid layout in css
Replies
1
Views
419
tyutghf
tyutghf
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top