Best way to create a layout like the following?
What is the best way to get a layout like the followi开发者_开发百科ng using HTML & CSS (can't use CSS3)?
My main question is regarding the navigation bar floating at the middle of the top part of the inside container.
Also how would you suggest I create the nav bar? It needs rounded corners and roll over but no sub-menus for now.
Clarification
I need help with the positioning of the navigation bar so that if the window is resized it stays in it's position.
I can't use CSS3 because it's a corporate site, and many browsers the customers use are not compatible with CSS3
Working demo: http://vidasp.net/tinydemos/layout-demo.html
(I didn't do the shadows or rounded corners - those are CSS3 features. If you want to have those features in older browsers, you will need work-arounds, but that's another story...)
First, you should start off with this basic structure.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css"> <!-- include your external css here -->
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html"><img src="logo.jpg" alt="My Company"></a> <!-- standard practice to make logos a link back to homepage -->
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>XYZ</li>
<li>Features</li>
</ul>
<ul id="contentNav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="content">
</div>
</div>
<script type="text/javascript" src="scripts.js"></script> <!-- include your javascript here, if any -->
</body>
</html>
Once you have the template, you can start building your CSS. While I wont style the entire page for you, a will give you a few pointers on what to do...
In order to achieve the > effect in between the ULs, you can either use <li> > </li> or you can place an image of > as a background-image of the li items. If you choose the former you will need to play around with padding to get the position just right, if you choose the later you will need to add extra classes to the li items to determine which get the background and which shouldn't.
In order to get the inner border effect, just give a border to the div id="content".
To get the content Nav to intersect the content border, you need to take it out of the flow of the document with absolute positioning.
In order to get the content nav to have the style you want, just apply a border to to the li and apply the rollover effects using the :link :visited: :hover :focus :active pseudo-classes.
- Use one div for the the outer line in your rectangle. Give this padding equal to the spacing you want to the inner area. Also give this div position="relative" to help with positioning the other elements. (The logo and menu's should sit in this div, but outside the inner div)
- Use an div for the inner area. Give this width="100%" and let it take it's natural height.
- Absolutely position the logo relative to the top and left.
- Absolutely position the menu's relative to the top and right (this will keep the in place when resizing)
For rounded corners on your menu, the easiest way if you need full browsers support and no vertical scaling would be to just use appropriate background images. Search for "sliding doors technique" and your should find what you need.
for the Nav bar, i would use an unordered list, style like you normally would to make the menu you like (jquery would be great for drop-downs,etc.), then create a div outside of the menu something like this:
<div id="navregion">
<ul id="nav">
<li><a href="#" class="active">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
I would then give the #navregion a higher z-index, relative/absolute positioning within the column and/or parent #div and and a top: x right: y value.
Something like this http://jsfiddle.net/U2PUw/4/
Your header is one block, the content area another block. The floating nav menu is an unordered list <ul> where the list-items <li> are floated.
Give your header block position: relative;, and place your nav menu inside the header. Then give your nav menu position: absolute; bottom: -30px; right: 15px;. Adjust to taste.
For rounded corners, try to use -moz-border-radius, -webkit-border-radius and -khtml-border-radius, leaving IE as the odd one out. If this is no good and if the nav menu words are fixed in length and don't need to be translated dynamically, use images. If this is no good, you'll need to play with multiple images to create proper rounded corners or check out Jquery-based corner rounding.
I tend to use floats, then a negative top margin to achive the navigation layout that you want. It should stay stuck to the right (or wherever you float it) as the browser resizes.
CSS3 will only help you make rounded corners more easily, it won't really be much help with the layout - so I wouldn't worry about not using it.
HTML:
<html>
<body>
<div id="box">
<div id="nav">Nav</div>
<p>Lorizzle ipsizzle dolizzle crunk amet</p>
</div>
</body>
</html
#box {
background:black;
float:left;
margin:50px;
}
CSS:
#nav {
margin-top:-10px;
background:silver;
float:right;
}
p {
color:white;
}
Preview on jsFiddle.
jQuery for the navigation, the rest is pretty simple to figure out, as long as you're familiar with xhtml / css / js
Get a horizontal list from Listamatic and position it absolutely at your desired position.
use position: fixed.
<div id="nav"> ... </div>
#nav { position:fixed, top: 30px; z-index: 1000}
that's a start
加载中,请稍侯......
精彩评论