|
CSS - Improving The Layout Of A Site With Css
Hello all - I wondered if anyone can help. I have created a site using html and css and seem to have a problem with the layout - see http://www.mysimplestore.com/
I have used <div>tags to define the different sections of the website in terms of a main container, header, left hand side, main content and a footer. When I look at the site in Internet Explorer there is gap between the search bar and the start of the text and I would like to reduce this gap. I have tried an number of options without success. Can anyone help? Thanks Techmog Similar TutorialsHi, I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting. Would you kind people tell me how I can find out where the problem is in these cases? I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags.... size of the pictures are also moderate as you can see... I know you can't read the text, but where do you think I should look for the problem? the site address is (oh i can't post links!!!) please use 'punez' dot 'nafice' dot 'com' (it's a subdomain) I'm working on www.wirelessguy.net and I'm trying to add something to my layout. I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane I am trying to improve design of most popular div in one section (http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=3). I designed something in photoshop but I am having hard time wth integrating it(http://www.pearl.ru/isdunyasi/newtable.gif). I cannot figure out how to do it because if I set what I designed as a background there is big chance texts will overflow as that area gets its values from the database. Code:
#innersubcontentpopular{
float:right;
width:300px;
height:450px;
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#innersubcontentpopular h1{
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
#innersubcontentpopular h2 {
padding:5px 2px 5px 2px;
font-size:12px;
font-weight:bold;
color:#aaaaaa;
}
#innersubcontentpopular p {
padding:2px;
margin:0;
font-size:12px;
}
this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs 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? Hi I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div. I would like some help if poss on how to put this design into divs before I plough staright in!! Thanks for any help or advice! Hello. I am currently trying to learn CSS. I have experience in HTML, PHP/mySQL, and some .NET(ASP.NET & C#). I am currently working on a web design project. I know how beneficial CSS can be. I am understanding most of the concepts. I am trying to divide my page up into a parent main page. For example, there is a background color(style). On top of that is my parent main page section. It is similar to a piece of paper on top of a larger(darker) piece of paper. Then within that main page I am going to have about 3-4 separate boxes, which will make up different sections(news, departments, etc). The problem I am having is I have everthing setup with 1 box within the main page. However, I put the other box in the same nested <div class = "page"> tag and I can get it where I want in terms of left, right, and bottom positioning for margins. However, I can not get the 2 boxes to be on the same row. There is space on my page that I cannot use. With my prior experience I know that the solution to this problem was using nested tables. However, from my understanding I thought I could refrain from using tables and use some CSS techniques instead. Please give me any input you might have or any questions that might seem confusing. I might be able to post up a site so a person could see what I am trying to do. 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 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;
}
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'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. ?!!?!? 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 page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work? Thanks 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! |
|||||||