|
CSS - Zoom Function Breaks Page Layout
Hi all,
I'm fairly new to CSS and this is one of my first attempts at a somewhat complicated layout. The page looks OK in FF, IE 7, Safari, and Opera, but if I zoom in or out while in FF or IE, it breaks the layout by increasing the width between some of the cube divs. Is there any way to fix this? Link: http://universalcorner.com/testsite/ Stylesheet: Code:
body {
font-family: Arial, "MS Trebuchet", sans-serif;
}
#maincontainer {
width: 966px;
height: 748px;
border: 12px solid #000027;
margin: 0 auto;
padding: 0;
}
#header {
border-bottom: 12px solid #000027;
height: 140px;
z-index: 100;
}
#logo {
background: #fff;
width: 480px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
}
#logo p { /* functions as image container */
position: relative;
top: 20px;
}
#slogan {
position: relative;
background: #78C0FF;
width: 292px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
padding: 0 10px 10px 10px;
z-index: -100;
zoom: 1;
}
#consultants {
position: relative;
background: red;
left: 6px;
width: 150px;
/* width: 150px; */
height: 100%;
display: inline;
float: left;
text-align: center;
margin: 0;
padding: 0;
z-index: -100;
}
ul.nav { /* navigation bar */
position: relative;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
width: 126px;
height: 586px;
background: #4486C4;
padding: 0 10px 10px 20px;
margin: 0 0 10px 0;
border: solid #000027;
border-width: 0 12px 0 0;
list-style: none;
}
ul.nav a {
text-decoration:none;
color:#000;
}
ul.nav a:hover {
color:#fff;
}
ul.nav li { /* all list items */
padding: 16px 0 0 0;
list-style: none;
}
ul.squares {
list-style: none;
padding: 0;
margin: 0;
}
ul.squares li {
position: none;
background: #000;
width: 150px;
height:140px;
padding: 0;
margin: 0;
border: solid #000027;
border-width: 0 12px 12px 0;
display: inline;
float: left;
}
ul.squares li.end {
border-right-width: 0;
}
ul.squares li.bottom {
border-bottom-width: 0;
}
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
#consultation {
color: #fff;
font-size: 1em;
font-weight: bold;
position: relative;
display: inline;
float: left;
width: 302px;
height: 130px;
border: solid #000027;
border-width: 0 12px 0 0;
background: #001E8A;
padding: 10px 0 0 10px;
margin: 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Company Name, Inc.</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="maincontainer"> <div id="header"> <div id="logo"> <p align="center"><img src="images/logo.gif" alt="Company Name, Inc."></p> </div> <div id="slogan"> <p><span style="font-size:.85em">Company Name, Inc.<br> Anytown, US<br> <a href="mailto:info@companyname.com">info@companyname.com</a><br> 555-555-5555</span><br> <span style="font-size: 1.1em; font-weight:bold">Tagline Goes Here</span></p> </div> <div class="cube" style="float: left; border-width: 0 0 0 0"> <p align="center"><img src="images/image.gif" alt="Placeholder Image"></p> </div> </div> <ul class="nav"> <li><a href="index.php">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Plans & Pricing</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Press Room</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> <div style="background: #001E8A; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #002455; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #4486C4; display:inline; float: left; border-width: 0 0 12px 0" class="cube"></div> <div id="textbox"> <div style="background: #002455; position: relative; float: right; top: 130px; border-width: 12px 0 0 12px; margin-top: 10px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: block; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div id="consultation">Click here to get your FREE ONSITE CONSULTATION from Company Name</div> <div style="background: #78C0FF; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 0 0 0" class="cube"></div> </div> </body> </html> Any suggestions would be much appreciated. Similar TutorialsHi all, I'm brand new to this forum, with some intermediate CSS skills. I've trimmed down my website in order to solve a persistent issue plaguing my layout. This issue involves what happens when using browser zoom: columns widths are recalculated incorrectly, and the right background is marred with a vertical line. Additionally, the main nav buttons fluctuate in size too. Extra space is visible to the right of the nav bar. I'm assuming this is happening because I've used exact pixel dimensions. I'm willing to change that, as long as the basic appearance of the layout can be achieved some other way. My code is fairly long, and several key images are critical to layout. I think the best way to share this would be through a link...Any help is appreciated, and I'd be very grateful! Thanks in advance. EDIT: Thanks to E-Oreo for the link tip. stuartletizia.com SLASH skinned SLASH index.html EDIT: I'm working in 1680 x 1050 on Windows 7, testing with Firefox 6.0.2, Chrome 13.0.782.220, IE 8, and Safari 5.1. The following is how I have always done my navigation. But in IE7 when I zoom above 100% the links seem to squash up and the hit area move away from the link! You can see this at www.stephaniedubois.co.uk What can I do to stop this? Thanks div id="topnavbar" class="navTextTop"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="gallery.html">GALLERIES</a></li> <li><a href="exhibit.html">EXHIBIT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div> CSS #topnavbar { text-align: center; position: relative; top: -25px; margin: 0px; padding: 0px; } #topnavbar li { display: inline; } #topnavbar ul { list-style:none; } .navTextTop a:link, .navTextTop a:visited { font:11px/20px Verdana, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; letter-spacing: 0.13em; padding-left: 10px; padding-right: 10px; } .navTextTop a:hover { color: #000000; text-decoration:underline; } I have been pulling my hair out on this one because for the life of me I cannot make it work. Here is my page: www.nova-dataonline.com Notice that in IE, the "Featured Products" section displays nicely and when you mouseover "Cisco Systems" the filler text displays well within the grey box. The entire "Featured Products" section apart from the manufacturer logos, is one image and the mouseover text is padded to appear correctly within the grey box which is part of the image. Now notice in firefox that the entire layout breaks. The div displays much larger than I intended and the padded text does not display correctly. I have found that if I remove the padding from the div containing the background image, the div displays fine, but this leaves me without a way to style the content of the div in the correct place. So it appears that firefox is expanding the div based on the padding here is the relevant markup: PHP Code: <div class="featured" id="feat_1" onmouseover="toggleDiv('feat_1',1)" onmouseout="toggleDiv('feat_1',0)"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. </div> and css: Code:
.featured{
visibility:visible;
width:410px;
height:350px;
position:absolute;
top:250px;
left:340px;
border:1px solid #999999;
border-left:none;
background-repeat:no-repeat;
background-position:center;
background-image:url(images/message/feat.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
padding:102px 27px 29px 29px;
}
#feat_1{visibility:hidden;}
and javascript (if it is even relevant to the problem): PHP Code: <script language="javascript" type="text/javascript"> <!-- function toggleDiv(id,flag) { if (flag == "1") { if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } if (flag == "0") { if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } --> </script> any idea? I have a 2 column layout using a left float which breaks in IE, sending the right column way down the page. It works perfectly in Firefox. I've been staring at it for days, and can't grok what I'm doing wrong. Please help! Code: body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
#container {
background-image: url(images/background.gif);
background-repeat: repeat-y;
width:700px;
margin: 0 auto;
margin-top: 10px;
}
#header {
background-color:#FCF6EA;
}
#content {
background-color: #FCF6EA;
width:497px;
float: left;
padding-left: 0px;
border-style: solid;
border-color: #F8CA52;
border-left-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-top-width: 0px;
padding-top: 5px;
}
#sidenav {
background-image: url(images/navback.gif);
margin-left: 500px;
width: 200px;
}
#container > #sidenav {
width:203px;
}
#footer {
background-color: #ffffff;
background-image: url(images/footer.gif);
clear: both;
}
h1 {font-size: small;
margin-top: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
color: #663333;
}
a:visited {
color: #000000;
}
B. I've got a real head-scratcher that I cannot find a solution for. The webpage I am talking about is he http://test.ecofreshusa.com/Company.aspx If you see the "breadcrumb-like" submenu (the grey one) in IE, zooming at 100% looks fine, but when you hit Ctrl+ or Ctrl- to text zoom, the margins between every line item (its made using an unordered list).. fall out and the text loses all spacing. Does anyone know where I went wrong? Any help would be much appreciated.. Oh and heres the CSS im using to work with this menu. Code: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#breadcrumb {
position: relative;
left:0px;
top:0px;
width:860px;
vertical-align: middle;
height: auto !important;
background: #F0f0f0;
margin-top: 0px;
display: inline;
}
#breadcrumb_left {
position:absolute;
left:0px;
top:0px;
width:660px;
height:20px;
background-color: #f0f0f0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
#breadcrumb_right {
position:absolute;
float: right;
left:660px;
top:0px;
width:200px;
height:20px;
background-color: #F0F0F0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
div.crumbs { margin: 0px 0px 0px 20px; float: left; font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
}
b.crumb_title { font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;}
.crumbs span {
display: block;
}
.crumbs ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.crumbs ul li {
background: none;
display: inline !important;
margin: 0;
margin-left: 20px;
font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
line-height: 20px;
}
.crumbs a:link { color: #0078C2; text-decoration: none; }
.crumbs a:visited { color: #0078C2; text-decoration: none; }
.crumbs a:hover { color: #629D34; text-decoration:underline; }
.crumbs a:active { color: #629D34; text-decoration:underline; }
.crumbs img {
float: none;
width: 8px;
height: 5px;
border: 0;
margin: 7px 0px 0px 20px;
padding: 0;
}
-->
</style>
Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar. Ok people, I have a page that contains 2 tables, one beneath the other... The table at the top can vary in height, but the table at the bottom is of fixed height... What I want to do is put some sort of "page break" in, so that the second table is always printed on a second piece of paper... Any ideas anyone? Hi: I have a MySQL/PHP generated form letter which gets printed and mailed. I have extablished a CSS font (class?) with a "page-break after" parameter as shown he PHP Code: h4 { font-family: Arial, Sans-serif; font-size: 14px; font-weight: 500; text-align: left; page-break-after: always;} This works great on a PC running IE. However, On a Mac, running OSX, the page breaks are entirely ignored and it is printed as a single long page. I have tried using other Browsers (Opera, Netscape, and Safari) and they all heve the same problem. Does anyone have a suggestion? Thanks Sean Hope I'm posting this in the right place - was contemplating the HTML forum for a while but thought this would be the right place to post in. I'm trying to implement microdata into a site I'm developing to get Google's Rich Snippets search results. http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=176035 At the moment, implementing microdata seems to break my layout. For instance, wrapping prices on my site with Code: <span itemprop="price">119.99</span> seems to change the font size and other properties of the price's font style. The same thing happens when I wrap Code: <div itemscope itemtype="http://data-vocabulary.org/Product">...</div> around my template. Any idea why this is happening? I don't think there are any CSS styles in my site that are referencing to the microdata at all. Hello! When the content of my website expands to include scroll bars, a 1px bar of white becomes visible on the right side of my content. I'm aware that the white is from my bg, but I don't know why everything gets off-set. Also, in IE7 there is a strange spacing issue between my header and the navigation, although it is not evident in other browsers. This is currently visible: http://www.caseit.org/test My content: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<img src="header.jpg" width="1000" height="140" />
</div>
<div id="navigation">
<ul id="qm0" class="qmmc">
<li><a href="javascript:void(0)">Home</a></li>
<li><a class="qmparent" href="javascript:void(0)">About CaseIT</a>
<ul>
<li><a href="javascript:void(0)">Overview</a></li>
<li><a href="javascript:void(0)">History</a></li>
<li><a href="javascript:void(0);">Previous Competitors</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">About SFU Business</a></li>
<li><a href="javascript:void(0)">Why Compete?</a></li>
<li><a class="qmparent" href="javascript:void(0);">CaseIT 2010</a>
<ul>
<li><a href="javascript:void(0);">Organizing Committee</a></li>
<li><a href="javascript:void(0);">Timeline</a></li>
<li><a href="javascript:void(0);">Competition Information</a></li>
<li><a href="javascript:void(0);">Venues</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sponsors</a></li>
<li><a href="javascript:void(0);">Media</a></li>
<li><a href="javascript:void(0);">Contact Us</a></li>
<li class="qmclear"> </li>
</ul>
</div>
<div id="image">
<img src="image1.jpg" width="900" height="233" />
</div>
<div id="container">
<div id="content">
hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br /> hhqrqrqr<br />erereqrqw<br />
</div>
<div id="sidebar">
we
</div>
<div id="sponsors">
</div>
</div>
</body>
</html>
My CSS (only the relevant stuff): Code:
@charset "UTF-8";
/* CSS Document */
body
{
background-color: #EEEEEE;
background-image:url(bg.jpg);
background-position: top center;
background-repeat:repeat-y;
}
#header
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#navigation
{
width: 1000px;
height: 35px;
background-image:url(linkbg.jpg);
margin-left: auto;
margin-right: auto;
}
#image
{
width: 900px;
height: 233px;
margin-left: auto;
margin-right: auto;
}
#container
{
width: 900px;
margin-left: auto;
margin-right: auto;
background-color:#33FF33;
height: 100%;
}
#content
{
float: left;
width: 645px;
}
#sidebar
{
background-image: url(sidebarbg.jpg);
background-repeat: no-repeat;
background-color: #999999;
float: left;
width: 255px;
}
#sponsors
{
float: left;
width: 900px;
height: 200px;
}
Additional notes: I use the Meyer reset unedited from his website. Thank you! Hello, I have a page with a large table. The problem is that when you print the page, the browser will add a page break in the middle of a row. I would like to force no-page-breaks for each row, so when you print, it will never print half a row on one page and the other half on the next page. I am assuming css can do this, but I have no idea where to start. I can look up the specifics, can someone just point me in the right direction? It is possible (although support seems sketchy) to prevent tables from breaking: Quote: table {page-break-inside: avoid;} BUT... the css definitions don't seem to apply to non-block-elements (such as tr and th). Although the CSS validator does not seem to complain, most browsers don't seem to support it. This feature seems to important to have been neglected by WC3, so what am I missing? My final option (and I shutter to think about it) is to place a non-breaking table inside each row. That seems (to me) very silly, but perhaps it is a way around the problem. It has an additional problem that the td breaks won't line up. The table won't lok much like a table anymore. I am looking for a much happier solution. Thanks Hi, I'm having some problems printing a html document. I have a print.css file that formats my page. I've set up a class for inserting page breaks where I need them. But for some reason it doesn't work. Also it's doing a strange page break at the beginning of my html document when it's printed. For some reason I can't add a link to my posts, so here's the url minus the www's and the dot. jfmackie.com/About_Us/our_team_Sales_copy.html Please help! Thanks sskully Hi People... Not sure if the is in the right forum!? Basically i have a page that is only ever going to be displayed in IE (using the webbrowser control within a programme). On this page i would like to use 'page-break-after: avoid' but as this is not implemented i am try to go about it differently. Is it possible to do something along the lines of this... Quote: <div style="page-break-after: expression(are we in the bottom eigth of the page?'always':'auto')"> Can this work, oh and i also need help with the bit in bold and italics. Many Thanks! Hi all I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page. This probaly isn't possiable but you never know. Any Ideas would be helpfull Nick Carlevaris When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. Hey all. K, i have very limited access to IE 6, but I know for a fact that the layout on this page is going to be nasty. I'm using the following stylesheet for it, and am wondering if anyone can help me out by taking a look at it, and at very least addressing the major issue of the two halves of the content page aligning. Code:
#tshirtBox {
width:50%;
float:left;
border-right:1px solid #ddd;
}
#tshirt_formBox {
width:49%;
float:right;
}
#tshirt_imagebox {
width:320px;
height:320px;
margin:auto;
border:1px solid #eee;
}
#tshirt_imagebox p {
text-align:center;
margin:5px;
}
.shirtForm {
width:90%;
margin:auto;
margin-top:10px;
border:1px solid #eee;
padding:5px;
}
.shirtForm p {
margin:8px 5px;
}
.shirtForm fieldset {
border:1px solid #ddd;
padding:10px;
width:90%;
}
.shirtForm legend {
font-weight:bold;
background:#CFEA30;
border:1px solid #ddd;
margin:5px;
padding:4px;
}
.shirtForm label {
width:30%;
height:20px;
background:white;
margin:2px;
padding-top:8px;
float:left;
font-weight:bold;
color:#555;
text-align:right;
}
.shirtForm_inputBox {
width:65%;
float:right;
border:1px solid #ddd;
height:26px;
margin:2px;
}
.shirtForm input[type="text"] {
background-color:#eee;
color:#444;
}
.shirtForm_inputBox input[type="text"] {
width:98%;
height:20px;
padding-top:2px;
margin:2px;
}
.shirtForm_inputBox select {
width:98%;
height:20px;
padding-top:2px;
margin:2px;
}
* + html .shirtForm_inputBox input[type="text"] {
width:96%;
height:18px;
}
.shirtForm_qtyInputBox {
width:15%;
float:right;
border:1px solid #ddd;
height:26px;
margin:2px;
margin-right:50%;
}
.shirtForm_qtyInputBox input[type="text"] {
width:92%;
height:20px;
padding-top:2px;
margin:2px;
}
* + html .shirtForm_qtyInputBox input[type="text"] {
width:86%;
height:18px;
}
.submitQuote {
float:left;
margin:10px;
padding:2px;
background:#CFEA30;
border:1px solid #ddd;
font-weight:bold;
cursor:pointer;
}
.totalText {
color:red;
font-weight:bold;
}
#swatchList {
margin:0 auto;
width:320px;
}
#swatchList li {
float:left;
width:30px;
height:30px;
margin:1px;
list-style:none;
cursor:pointer;
}
Much appreciated! Hey all, I'm looking to create a simple CSS layout design with a title bar running across the top, with the title picture/text in a middle column and then a middle column running down the centre of the page, something like this. Can anyone tell me how I can do that, with the top bar/title and the central title/main column? Thanks. I have been tasked with creating a webpage, they have told me what they want and i have found the perfect template that fulfills there needs except for one thing. this template ((oswd.org/design/preview/id/3428)) is what i will be using from oswd, its great but i would like to have it sit centered in the page with a margin on all sides not just the right and the left. for example omniture.com has margins on all 4 sides, allowing the grey background to be viewable above the header and footer. how can i achieve this result with my template ive tried numerous things and nothing has worked for me so far. im not an expert web designer and dont have time to learn css inside and out, just need a little guidance or some code i can impliment. Thanks in advance OK, I have been trying to figure this one out but it's been a while since I last messed with floating stuff around on a page. The layout I want is an element taking up the full width at the top, a navigation bar on the left and any number of elements taking up whats left under the top one to the right of the nav bar. I have gotten this working sans top element by absolutely positioning the nav bar and giving the main elements appropriate left margins, but with the top element this would require setting a top position for the nav bar perfectly fitted to the height of the top element. I was hoping to be able to float the nav and main elements, and clear the top one (in case it's narrow). The problem is, ideally I'd have the nav bar be a fixed width, and the main elements can then scale with the browser window. But I can't get it to work right. Any suggestions? |
|||||||