|
CSS - Cant Work Out Why Layout Is Wonky
Hi, on this page http://www.southampton-property.com/about/news/ the left hand property search doesn't align correct like it does on all other pages and I cant work out why, any ideas?
edit: fixed Thanks! Similar TutorialsI have a brand new site going, and I am having a bit of trouble with the left hand column in IE. It all looks fine as long as the content doesn't take up more space than the height of the banner (I have a skyscraper ad there, nothing else). It's also ok in Firefox, Chrome, etc. But in Internet Explorer, the left hand column refuses to stretch down to the bottom if there is a lot of content, despite being set to 100% height, and I don't know how to fix it. I'm not sure what to do about this. I'm certain the code is... unconventional. But it works, aside from IE... I'd really like to explain this better, but I can't post links to show screenshots or anything. the site is comicnex(dot)us I mean, basically, there is a header comprised of 2 boxes, a large one with the header graphic and a twitter box, and a narrow one with a navigation buttons. a narrow column to the left, the content to the right, and a footer at the bottom. The problem arises when the content box gets too full, then the side bar doesn't stretch. *edit - I just discovered another problem in IE. again, I'd show screenshots of what is going on if I could. Basically, if you make the browser narrow, the left column moves to the right, and covers up content in the content area. Again, only in IE. I don't know how to explain it better than that, you'll just have to type in the URL and see it while using IE. I'm taking over a project that has been abandoned by it's previous coder, and let's just say that I am a novice. So I have two issues here. NiftyCorners was used to try and create rounded corners on the top of some div headers. On the top of my top-left div box, the header has taken a liking to being a different color than it is being told to be. All 4 div headers are supposed to be a light blue, with rounded upper corners. All the gif's that niftyCorners is using are blue. Only the top left div header box is rounded, and it's red, and laying on-top of a squared off blue header. I have a screenshot, but alas, I'm not allowed to post it. Tell me what code you might want to see, and I'll post it. I'm clueless as to where to start. Hello, I have a div that is 500px wide, inside that div I need to have a footer that includes three columns placed at the bottom. The middle column will hold a graphic and under the graphic will be the 10 numbers (generated by a database). Then on the left and right side of that I need to have a div that will hold a graphic and text under the graphic. The left and right divs will be a fixed size, though the middle div will grow if the numbers are double digits (as opposed to having 1-10). I also need to have the left and right placed right next to the middle div, so if the middle div gets larger, then the left will move to the left and the right will move to the right. Does this make any sense??? So far everything I have tried as failed...I am going to include my latest code, which is very minimal. CSS STYLES Code:
#footer_wrap { clear: left; width: 500px; height: 60px; }
.left { float: left; width: 50px; height: 60px; }
.middle { clear: none; width: auto; height: 60px; margin: 0 auto; }
.right { float: right; width: 50px; height: 60px;
HTML CODE Code:
<div id="footer_wrap">
<div class="left">left</div>
<div class="middle">test</div>
<div class="right">right</div>
</div>
I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it. <!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" /> <title>Untitled Document</title> <style type="text/css"> <!-- #headerDiv { position:absolute; left:0px; top:0px; width:100%; height:219px; z-index:1; background-image:url(images/header_bg.jpg) } #leftcontentDiv { position:absolute; left:0px; top:0px; width:50%; height:219px; z-index:2; } #headermenuDiv { position:absolute; width:263px; height:19px; z-index:2; margin-top:5px; margin-left: 10px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; left: 26px; } #rightcontentDiv { position:absolute; right:0px; top:0px; width:50%; height:219px; z-index:2; } #logoDiv { position:absolute; left:0px; top:0px; width:511px; height:101px; z-index:2; background-image:url(images/ogo.jpg) } #searchDiv { position:absolute; left:90px; bottom:0px; width:330px; height:42px; z-index:2; background-image: url(images/search.jpg); } #logosearch_containerDiv { position:absolute; left:1%; top:25px; width:511px; height:146px; z-index:2; } #signupDiv { position:absolute; width:212px; height:19px; z-index:2; margin-top:5px; right:5px; font-size:12px; font-family: Arial, Helvetica, sans-serif; color: #FFF; } #loginDiv { position:absolute; right:0px; top:24px; width:233px; height:119px; z-index:2; background-image:url(images/login.jpg) } #bodytopDiv { position:absolute; left:0px; top:219px; width:100%; height:401px; z-index:2; } #photoDiv { position:absolute; left:0px; top:0px; width:589px; height:349px; z-index:3; } #titlecontainerDiv { position:absolute; right:2px; top:0px; width:50%; height:349px; z-index:3; text-align: left; } body { text-align: center; } #bodytopbottomDiv { position:absolute; left:0px; top:348px; width:100%; height:51px; z-index:3; background-color: #0361C1; } #bodytopDiv #bodytopbottomDiv table { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 12px; } #newalbumsDiv { position:absolute; left:0px; top:620px; width:301px; height:301px; background-image: url(images/newalbums.jpg); } #topalbumsDiv { position:absolute; left:318px; top:620px; width:301px; height:301px; background-image: url(images/topalbums.jpg); } #videosDiv { position:absolute; left:636px; top:620px; width:386px; height:301px; background-image: url(images/videos.jpg); } #lowerbodycontainer { width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; left: 0px; top: 0px; } --> </style> </head> <body> <div id="headerDiv"> <div id="leftcontentDiv"> <div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div> <div id="logosearch_containerDiv"> <div id="logoDiv"></div> <div id="searchDiv"></div> </div> </div> <div id="rightcontentDiv"> <div id="signupDiv">New User? Signup | New Artist? Sign up</div> <div id="loginDiv"></div> </div> </div> <div id="bodytopDiv"> <div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div> <div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div> <div id="bodytopbottomDiv"> <table width="777" border="0" align="center" cellspacing="10"> <tr> <td width="145">text goes here</td> <td width="150">text goes here</td> <td width="126">text goes here</td> <td width="161">text goes here</td> <td width="125">text goes here</td> </tr> </table> </div> </div> <div id="lowerbodycontainer"> <div id="newalbumsDiv"></div> <div id="topalbumsDiv"></div> <div id="videosDiv"></div> </div> </body> </html> I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! 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'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. 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;
}
Hey, I know how to do this using a table, but I'm worried it will break down in certain browsers and I want to know the best way to go about this and incoperate some css and divs.. Here is what the table would consist of background: url ('../images/topbg.jpg') repeat-x; height: 295px; width: 850px; 1st row = 1 column height: 155px; 2nd row = 8 equal columns height: 140px; In each of these 8 columns I want to insert an image link which are centered vertically as well as horizontally can someone lead me to a site that either has examples or teaches me how to outlay a webpage without using many tables? I tried and got lost in confusing websites :S thanks Hi I have a problem where my design does not look the same in 2 browsers for MACS. Netscape 7 MAC OSX 10.3 and Opera 6 MAC OSX 10.3. If you take a look at http://dmumford.bizhat.com/calibre/ you will see what it is supposed to look like. The links below are the MAC screenshots taken from browser cam http://www.bullsigns.com/netscape7-mac-osx-10.3.jpg http://www.bullsigns.com/opera6-mac-osx-10.3.jpg If anyone could help, i would be eternally grateful, as I have never needed to worry about MACS before. Thank you tiny pic .com/nqb f9i.png Hey, I'm super sorry for the url but that's the ONLY way you guys will know what I'm talking about. Obviously I'll be doing the more advanced graphics later. Please answer the following questions: I would like the white and the yellow to go on for the rest of the page (no matter how big your monitor is). How would I do this? I also want the green and the dark blue to stretch if I were typing more and more. (I know I would have to save the bottom of the sections of those images and the middle if I were to do this.) And I need this to be completely centered on the webpage. Overall, I can handle the rest. So what attributes/properties do I have to study to get this to work? If you're feeling super nice you can code it for me. ;D Ok I've been stuck on this layout for about 2 days and I've had it. I was wondering if someone would be willing to help me with it through AIM or MSN messager. Also if no one is willing to help I'm willing to pay someone 30-40$ to code the layout for me in CSS so it works in Firefox and IE. I pretty much just need the stylesheet or the one on one help to make it work. If you're willing to help me IM ME at stareatceiling or MSN: ajay@statc.net . It'd be cool to have this done tonight or tommorow so i can start developing the backend for it. Thanks. Hello, I am creating the base design of a web site that consists in two horizontal bars: Navigation and Intro. "Navigation" will contain the menu. "Intro" will contain two items: a logo (image) on the left and a banner (flash) on the right. In this moment I have the following: http://www.27lamps.com/Beta/Bar/Bar.html I am not sure if using a background image is the best way to do this ... ... it seems to me that since the two bars are two different sections then I should use two divs. So the questions I have: 1. Should I use two divs, one for each bar, and setting the line- height in em instead of using the background image? 2. How to place side by side the logo and the banner and centered them vertically? 3. I would like the Navigation and the Intro bars to have a minimum height. Thanks, Miguel Hi everyone- I'm new here and am a newbie with CSS layouts. I'm having trouble with certain elements on the page that I was wondering if someone might be able to take a look at my code and html file. I'll trade graphics services for a few minutes of your time if neccesary. Hopefully someone can let me email them I'll give mine as well I'm sure it's easy to find on my profile. Thanks in advance for any help. 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'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers: lab.wx3.com/cssprob/layout_challenge.png (sorry, I'm a new user so I can't post the http part) The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space. I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css. Hey, So I'm trying to create a blogger skin by myself and I'm already stuck. I want the template to look something like this: *** And I failed while I was looking for that kind of a template. And I did search, for a decent amount of time. So, any help? Does somebody know, where can I get a template like that or how can I create it myself? Thanks a bunch, Lara. EDIT: Um, new user accounts are not permitted to create posts containing URLs? Aw'sm. So, how can I show you my idea of the layout? :/ |
|||||||