|
CSS - Unique Layout = Unique Headache Please Help!
Hey DevShed,
I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div. The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div. Here's my current code; index.php PHP Code: <body> <div id="wrapper"> <div id="topnav"></div> <div id="banner"> <img src="images/banner.jpg" /> </div> <div id="header"></div> <div id="left_content"> <div id="newsheader">Latest news</div> <div id="box_1"> <img src="images/news.jpg" /> </div> <div id="box_2"> This is content blah blah blah </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </div><!--end of left_content--> <div id="right_content"> <div id="adheader"></div> <div id="user"></div> <div id="main_content"></div> </div><!--end of bottom_right--> </div><!--end of container--> </body> global.css PHP Code: #wrapper { margin: 0px auto; padding: 0px; width: 977px; border-left: 1px solid #B1B1B1; border-right: 1px solid #B1B1B1; } #topnav { background: #F0F0F0; background-image: url('images/top_back.gif'); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 977px; height: 18px; } #banner { background: #282828; background-image: #url('images/banner.jpg'); border-bottom: 5px solid #D2D2D2; margin: 0px; padding: 0px; width: 977px; height: 72px; } #left_content { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px 0px 0px 0px; width: 476px; height: 100%; float: left; } #newsheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; margin: 0px 0px 0px 0px; padding: 0px; width: 476px; height: 29px; } #right_content { background: #282828; padding: 0px; margin: 0px; width: 495px; height: 100%; float: left; } #box_1 { background: #6D6D6D; padding: 0px; margin: 0px; width: 476px; height: 249px; } #box_2 { background: #DADADA; padding: 0px; margin: 0px; width: 476px; height: 96px; } #bottom_left { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px; margin: 0px 1px 0px 0px; width: 236px; height: 29px; float: left; } #bottom_right { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; padding: 0px; margin: 0px; width: 237px; height: 29px; float: left; } #lnewscontent { background: #DADADA; border-right: 1px solid #FFF; padding: 0px; margin: 0px; width: 476px; height: 96px; } #adheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 209px; height: 29px; float: left; } #user { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 281px; height: 29px; float: left; } Here's a basic idea of what I'm going for: img683.imageshack.us/img683/6540/layoutsamp.gif PLEASE help me, I've been going at this for hours. I'm out of ideas! Similar TutorialsI'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction? Hey all, What are your techniques for making unique horizontal rules? At the moment I am using this code to separate content: Code:
/* CSS */
.line {
height: 5px;
background-image: url(../img/bg_3x7.gif);
background-repeat: repeat-x;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 0px;
}
Html: Code: <div class="line"></div> The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE... Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform. Cool cool cool, Thanks! Cheers Micky So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful. My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox. I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why? Here is the site: Code: http://www.chromaticstudios.net/AVT/ Hi All, I am having trouble trying to get the columns in this layout to work properly: http://www.lampdesign.co.uk/desdev/vsc/ The following image is how it should be shaping up: http://www.lampdesign.co.uk/desdev/vsc/vsc_real.png Problems: - In firefox the left column content is floating above the footer image - In IE the left column content appears to be pushing the right content downwards I have avoided padding and margins as far as possible. Relevant Source: <div id="contentcontainer"> <div id="leftcolumn"> This is the left column This is the left column This is the left column This is the left column </div> <div id="pagecontent"> This is the page content </div> </div> </div> <div id="footercurve"> </div> Css: #pagecontainer { background: url('images/global/pagebg.png'); width:790px; margin:0 auto; text-align:left; color:#333; } #contentcontainer { width:790px; margin:0 auto; } #leftcolumn { width: 180px; margin:0px; padding: 0px; font-size: 14px; color: #fff; float: left; } #pagecontent { width: 608px; margin: 0px; margin-left:182px; padding: 0px; font-size: 12px; } #footercurve { background: url('images/global/footercurve.png'); width:790px; height: 10px; margin:0 auto; text-align:left; color:#333; font-size: 0px; } If anyone can shed any light on what I am doing wrong, I would be most grateful. Thanks, Vince I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika I have tried and tried and this is the website that came closest to my problem... My code would be: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>
<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>
http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg This would be the regular resolution I'm looking for http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg And this would be my screen resolution problem Sad I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated. yeah so I just need a simple help with something. Its some basic stuff for a myspace layout.. I have got an image to span.. i received help here a while ago with it. but I can't figure out how to hover & span together. like for instance.. the idle image icon is black & white.. then when I mouseover it i want it to alternate to the colour image and also span the large image of itself to the side. I cant seem to combine them.. its either one or the other. just hover colour image over b&W.. or jus span large image. been noob i dont really know what to chop and mix. so how can i do it?? thanks for any help :P Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s. Here is what I want in English: 1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page. 2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as 3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom. I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file. Here is my horribly borked attempt at using nested <div>s: Code:
<html><head><title>CSS Hell</title>
<style TYPE="text/css">
<!--
body {
margin: 9px;
margin-bot: 0px;
background: #FFF;
}
#level0 {
background: white;
}
#masthead {
background: blue;
height: 60px;
}
#level1 {
background: #DDD;
border: solid;
}
#menu {
background: #BBB;
width: 150px;
}
#level2 {
background: white;
float: right;
border: dashed;
}
#promo {
background: blue;
float: right;
}
#main {
background: #CCC;
}
-->
</style>
</head>
<body>
<div id=level0>
level 0
<div id=masthead>
branding
</div>
<div id=level1>
<div id=menu>
LEFT SIDEPANE<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
</div>
level 1
<div id=level2>
level 2
<div id=main>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
main content area<br>
</div>
<div id=promo>
RIGHT SIDEPANE<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
promo<br>
</div>
</div>
</div>
</div>
</body>
</html>
Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!? Hi there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content. I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
}
#leftcolumn {
display: inline;
float: left;
left: 15%;
width: 150px;
}
#centercolumn {
float: left;
width: 511px;
height: 100%;
margin-left: 2px;
padding: 8px;
border-left: 1px solid #494949;
border-right: 1px solid #494949;
background: url(/images/bg.png) no-repeat top left;
background-color: #FFDCAA;
}
#rightcolumn {
float: left;
width: 150px;
margin-left: 1px;
}
#mainnav {
width: 150px;
padding: 0 0 0 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
color: #FFDCAA;
}
#mainnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainnav li {
margin: 0 0 0 0;
border-left: 7px solid #C10E0E;
padding: 0 5px 0 0;
}
#mainnav li a {
display: block;
height: 15px;
vertical-align: middle;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #C10E0E;
color: #FFDCAA;
text-decoration: none;
text-align: right;
}
html>body #mainnav li a {
width: auto;
padding: 0;
margin: 0;
}
#mainnav li a:hover {
background-color: #C10E0E;
border-left: 7px solid #FFDCAA;
color: #FFF;
padding: 0;
margin: 0;
}
#mainnav h3 {
padding-left: 5px;
font-size: 14px;
font-weight: bold;
color: #F6D4A4;
font-style: italic;
}
thanks! thanks Attached is my html page and my css file. The css is a template i got off ssi-developer. I'm changing it around a bit to fit my needs. The way I have the page now is fine I'm just curious to know if I can do this one thing. What I'm wondering is if I have to make different classes for the multiple rows that I have. Is there a way I can make the same layout without making all the rows. Once you see my files you will get a better understading of what I'm trying to accomplish. Hi, The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox. Can anyone suggest how I can fix this? Daniel I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path... http://jjs5327.aisites.com/IMD311/index.html Code:
@charset "UTF-8";
/* CSS Document */
body {
background-color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#000000;
}
#site {
width:775px;
height:500px;
margin:25px auto 0 auto; border:none;
}
#container {
width:775px;
height:500px;
margin:0 auto 0 auto;
border:1px solid #99CCCC;
}
#header, img {
margin-top:10px;
border:none;
cursor: default;
}
#left {
width:210px;
height:208px;
margin-top:80px;
margin-left:20px;
border-top:1px solid #99CCCC;
border-right:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float:left;
clear: both;
}
#menubar, #menubar p {
background-color:#FFFFFF;
text-align:left;
margin:auto;
}
#menubar a {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#FF9933;
text-decoration:none;
padding: 7.1px 0px 7.21px 10px;
border-bottom:1px solid #99CCCC;
cursor:default;
}
#menubar a.active {
color:#99CCCC;
}
#menubar p:hover a, #menubar a:focus, #menubar a:active { color: #FFFFFF;
background-color: #99CCCC;
}
#right {
width:520px;
height:390px;
margin:15px 40px 15px 255px;
border-top:1px solid #99CCCC;
border-left:1px solid #99CCCC;
}
#headline {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:14px;
text-align:center;
margin-top:60px;
}
#content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:10px 60px 10px 60px;
padding:5px;
line-height:20px;
}
#sumheadline {
font-family:Arial, Helvetica, sans-serif;
color:#000000; font-size:14px;
font-style:italic;
text-align:left;
margin:60px 0 0 90px;
}
#sumcontent ul{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style:disc;
text-align:left;
width:250px;
padding:10px;
margin-left:150px;
line-height:20px;
}
#techcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:60px 60px 10px 60px;
line-height:20px;
}
.tech2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#expcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:460px;
height:330px;
margin:59px 30px 10px 30px;
line-height:20px;
overflow: auto;
}
.exp2left {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#gencontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:490px;
height:385px;
margin:15px 10px 10px 15px;
line-height:22px;
}
.deshead {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
margin-left:115px;
padding-top:10px;
}
.description {
width:350px;
margin-left:115px;
}
#example {
overflow-y:scroll;
overflow-x:hidden;
height:389px;
width:519px;
}
#example1 img, #example2 img, #example3 img, #example4 img { float:left;
}
#example1 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example2 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example3 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example4 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#content li {
padding:5px;
}
#footer {
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:right;
width:775px;
height:20px;
margin-top:5px;
}
I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Full Height</title> <style type="text/css"> /*<![CDATA[*/ body { height: 100%; margin: 0; } #container { position: absolute; top: 0; left: 50%; margin-left: -350px; width: 700px; height: 100%; background-color: #fff; border: 1px solid red; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; } #nav{ width:135px; position:absolute; background-color:#000; left:0px; height:100%; float:left; clear:right; top:0px; margin-top:0px; } #banner{ width:565px; position:absolute; background-color:#f00; left:135px; height:125px; float:right; } #content{ width:565px; position:absolute; margin-top:125px; background-color:#00f; left:0px; height:100%; float:right; clear:left; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="nav"> </div> <div id="banner" </div> <div id="content"> </div> </div> </body> </html> The site I'm working on is located at the following address: http://www.solinari.net/div.php On the left, the navigation is in two pieces - a left and a right piece. I need to have both pieces extend to the bottom of however long the page is. The bottom div's of both pieces of the navigation each have an image repeating vertically, my question is how to get the div to extend to the bottom of the page. Any help would be greatly appreciated. Regards, Solinari heyya, I'm doing a quick layout, and I'm running into some problems with my floating menu. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:white;
font:normal 1em/150% Verdana,Arial,sans-serif;
}
#container {
width:750px;
padding:0;
margin:0;
background:#FAA;
}
#contents {
width:566px;
margin:10px 0 0 162px;
border:1px solid #999;
border-bottom:none;
padding:10px;
background:#FFF;
}
#contents p {font-size:80%;line-height:150%;}
#menu {
width:160px;
background:#FFA;
margin:0;
padding:0;
float:left;
}
img {border:none}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
<div id="contents">
<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
<h3>Welcome to mook</h3>
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
</div>
</body>
</html>
readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case. So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode. TIA, Greg I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom. I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done? FYI, the site is currently at http://users.adelphia.net/~mmorasch/ |
|||||||