|
CSS - Questions About Divs
I am working on css for a project of mine and I am having a few minor problems with the position and widths of my divs.
If I have a parent container and divs within the parent container do the child containers not inherit the width and height of the parent containers? For example here is my css thus far: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
body {
margin: 0;
border: 0;
background: #ededed;
}
/*============================ Begin Layout Structure ============================*/
#wrapper {
width: 1024px;
min-height: 768px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 5px, auto;
background: #ffffff;
}
#accountselector {
position: relative;
height: 15px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
#headerwrapper {
position: relative;
padding-top: 5px;
width: 100%;
height: 200px;
}
#headerwrapper-left {
position: relative;
width: 65%
height: 100%;
}
#headerwrapper-left-logo {
position: relative;
height: 75px;
width: 100%;
background: blue;
}
#headerwrapper-left-navigation {
position: relative
height: 15px;
width: 100%;
background: red;
}
#headerwrapper-left-banner {
position: relative;
height: 110px;
width: 100%;
}
#headerwrapper-right {
position: relative;
width: 35%;
height: 100%;
}
#headerwrapper-right-heading {
position: relative;
width: 100%;
height: 15px;
}
#headerwrapper-right-customer{
position: relative;
width: 100%;
height: 185px;
}
#bodywrapper {
position: relative;
min-height: 478px;
width: 100%;
padding-top: 10px;
}
#bodywrapper-leftwrapper {
position: relative;
height: 100%;
width: 20%;
}
#bodywrapper-leftwrapper-subnav {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-leftwrapper-news {
position: relative;
height: 50%;
width: 100%;
}
#bodywrapper-rightwrapper {
position: relative;
height:100%;
width: 80%;
}
#bodywrapper-rightwrapper-body {
position: relative;
height: 100%;
width: 100%;
}
My HTML is as follows: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test5.css" /> </head> <body> <div id= "wrapper"> <div id= "accountselector">Home Business</div> <div id= "headerwrapper"> <div id="headerwrapper-left"> <div id= "headerwrapper-left-logo">US Sonet Logo</div> <div id= "headerwrapper-left-navigation">Link1 Link2 Link3</div> <div id= "headerwrapper-left-banner">US Sonet Banner</div> </div> <div id="headerwrapper-right"> <div id="headerwrapper-right-heading">Manage Account</div> <div id="headerwrapper-right-customer">Account Control Center</div> </div> </div> <div id="bodywrapper"> <div id="bodywrapper-leftwrapper"> <div id="bodywrapper-leftwrapper-subnav">Link1 Link2 Link3</div> <div id="bodywrapper-leftwrapper-news" >News</div> </div> <div id="bodywrapper-rightwrapper"> <div id="bodywrapper-rightwrapper-body"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</p></div> </div> </div> </div> </body> </html> Why aren't the children divs inheriting their width from the parents or do they not function this way? Similar TutorialsI am working on this site for a client and I can't figure out what the hell I'm doing wrong. It doesn't "work" in FireFox, which of course (I assume) means that IE is simply forgiving my errors, but let's not have a religious debate, let's solve problems. http://www.nolower.com/example.php http://www.nolower.com/css/public.css I am curious about two things: 1) Why is my white background (the main div) not showing up on this page? I thought I had cleared every float, yet, still, there it isn't! 2) Why does the background shadow (the main div), a background image that extends into the padding in IE as you'll see, not show up on FireFox? If anyone can help identify what I've done wrong and explain to me what made it break in CSS, I'd be very grateful. I've been trying to figure out the peculiarities of CSS and its very poor cross-implementation (not that tables were ever cross-implemented well either, oi) for about a year now and I always either make a new mistake or find something I haven't figured out yet. Thanks! Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! Does anyone know much about IE 7? In particular does it conform to the WWW consortium's box model (margins and padding). This would reduce a whole lot of extra CCS elements and headaches. Does is finally support transparent PNG files? Support for PNG will change the look of the web dramatically! I know how to center an element horizontally, but why does it not work with vertical centering? Horizontal (working) - Code:
element.foo {
margin: auto;
width: 0;
}
Vertical (not working) - Code:
element.fuu {
margin: auto;
height: 0; /* no values work */
}
I've seen an entire layout vertically centered by containing the entire layout in a single-cell table and applying the "valign" attribute to the cell, but I'd rather not use tables. I've also checked out the W3C's "Centering Vertically" example, but it relies on the author knowing the height of the content. Since height doesn't work with %, I can't use that. Does somebody know of a way to center vertically without using absolute positioning (relative is fine) or tables, and without knowing the height of the content? I'd rather not use trial and error, but this does seem like a question that is virtually impossible to answer 100% affirmatively (about as sure as 100% height works ). i have three relatively simple questions -- i want to put thumbnails on my page inside the main container-- (2 column layout) i have used some code from REAL WORLD its close but not quite there-- also the thumb sizes will be different - they are stamps- like postage stamps so some horizontal and some square -- just need a tweak here also i have a gray line running thru the site--- not sure where it is coming from but i think it might be from the link container on the sidebar-- and speaking of side bar list container-- i would like it to be centered instead of up against right side-- i played with margins and padding - i am still wading thru that concept-- but coudlnt get anything to work--- so i SURE WOULD appreciate help on these three items -- many thanks in advance-- here is link to page THE PAGE here is link to CSS CSS Id really like to use css for page layout. Im using asp.net and I need to setup a template that all my pages use. Id rather not use tables, but ive had trouble using css in the past. I need a layout that allows for a header certered section (used to do it with a nested, centered table) center section should have shaded edges to simulate a printed page footer menubar below the header I also need the content area to expand and not go bezerk when i add data in a table or a large image. Can anyone point me to an example that does this ? I am using <ul><li> menu. My questions are, how can I keep one element from wrapping down, when the screen size gets too small? Also, how can I make the grey of the menu span across the whole div? I tried a few things like wrapping the menu in a div with a background, setting extra elements..ect. I can't seem to keep the design with the above solutions. Any help would be appreciated. - Gnome Html Code: <div id="MainContent"> <div id="Content"> <div id="Menu"> <ul><li><a href="index.html">Home</a></li ><li><a href="index.html">Products and Services</a></li ><li><a href="index.html">Employment</a></li ><li><a href="index.html">Blah</a></li ><li><a href="index.html">Home</a></li ></ul> </div> <div id="imageWrapper"> <img src="team.jpg" class="displayed" border="0" /> </div> <div> Lorem ipsum dolor sit amet </div> </div> </div> CSS Code:
#MainContent{
float: left;
width: auto;
}
#Content{
margin-right: 265px; /*Set right margin to RightColumnWidth*/
}
#Menu {
backgound-color:#C0C0C0;
border-top:1px Solid #C0C0C0;
padding-top: 6px;
padding-bottom:6px;
display:block;
}
#Menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
width:auto;
}
#Menu ul li {
display: inline;
}
#Menu ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #FFFFFF;
background-color: #C0C0C0;
}
#Menu ul li a:hover
{
color: #C0C0C0;
background-color: #FFFFFF;
}
I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong. First heres the links: (and yes this does involve CSS): http://65.26.50.204/ec/index.php - My Layout (View Source) http://65.26.50.204/ec/stylesheet.css - The CSS One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS? Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it? Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what? Hi, I'm a fairly experienced programmer and am learning how to make websites in a modern way with xhtml and css. I'm trying to create a fairly simple looking front page in the vein of http://www.facebook.com/ . but i have a few css questions. Firstly, how can i give the background of my website a gradient (non -flat) colour using css? also - what is the best process when trying to make a website. I have mocked up a quick design in photoshop (image is attached to the post) and want to begin implementing. Would each part (e.g.) logo be a seperate div which links to an image? any help is appreciated as i'm used to working with tables and divs are a whole new realm for me! thanks I have 3 problems with the CSS I'm attempting (been a very long time). You can see my crud in progress at .shelleysjewelry.com/uploads/newsite/shelleys/index dot html (and, yes, it is pure crud -- besides the god-awful CSS & JS, none of the links work). I've been banging my head on these... Problem the First: I have a tricky absolute positioning situation that uses a combination of sliding dropdown menus and Javascript, like so: var h = document.getElementById(id + '-ddheader'); var c = document.getElementById(id + '-ddcontent'); var dimensions = getPosition(h); c.style.left = dimensions[0]; c.style.top = dimensions[1] + h.offsetHeight + 5; c.style.display = 'block'; "c" represents the slideout submenu and is absolutely positioned. Both values are being set to something that is expected (e.g., dimensions[0] is not zero). However, while it works in IE, it doesn't work in Firefox -- the top is being respected, but the left isn't. I understand I have a lot of margin/padding that will mess with absolute positioning, but AFAIK, that should only affect a few pixels, not render it unusable. Anyone have insight why? Problem the Second: I love the overflow property. The tabs are wrapping around. However, I'd like them to not overlap, without explicitly breaking them into two rows. I don't suppose there's any way to do that? Problem the Third: In IE, to run the site, I have to "allow ActiveX Content". There is a Javascript function that runs on startup to calculate minimum div heights and other innoconous methods. How do I get rid of that warning? Any help much appreciated... ) After using tables for most of my web development life (which isn't very long) I'm diving into using divs and css to try and learn that art form. Obviously I'm running into issues that I could use some help on. I'm trying to layout a login area and I would like some direction. Here's what I have currently: Code: <div id="headerSignin">
<asp:MultiView ID="mvSignin" runat="server" ActiveViewIndex="0">
<asp:View ID="vwNotSignedIn" runat="server">
<div class="signInTitle">
Username:</div>
<div class="signInTextbox">
<asp:TextBox ID="txtUsername" runat="server" Width="200px" /></div>
<div class="signInTitle">
Password:</div>
<div class="signInTextbox">
<asp:TextBox ID="txtPassword" runat="server" Width="200px" TextMode="Password" /></div>
</asp:View>
<asp:View ID="vwSignedIn" runat="server">
<div>
</div>
</asp:View>
</asp:MultiView>
</div>
And the css for those tags: Code: #container #header
{
color: Blue;
width: 1000px;
height: 100px;
position: relative;
}
#header #headerLogo
{
width: 600px;
position: relative;
float: left;
}
#header #headerSignin
{
background: #A9A9A9;
width: 400px;
position: relative;
float: right;
}
.signInTitle
{
width: 130px;
text-align: left;
vertical-align: middle;
float: left;
}
.signInTextbox
{
width: 200px;
float: right;
}
With what I currently have stated there, I get the two columns evenly filling 50% of the headerSignin div. And the 'Username:' and 'Password' text are sqished at the top and the textboxes are squished together. (The colors are there just so I differntiate. ) I would like obviously for the Username and password to be next to the textboxes with a width of 130px and the textboxes be 200px with some padding in between them to seperate them. If any confusion I apologize. I'm new at divs... Hi all, I'm working on a page layout, and would like some advice. I have two questions. First, here is my code so far: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="Description" content="A Milwaukee Based Industrial Cleaning Company that specializes in Janitorial Programs, Green Cleaning, Specilaty Cleaning, One-Time Cleaning, Post-Construction Cleaning, Carpet Cleaning, Fabric Upholstery Care Floor Mainenance, Concrete Floor Coatings, Snow Removal, and Lawn Mainteneance"> <title>CSS Template</title> <link rel="stylesheet" type="text/css" href="../css/gibb.css" > </head> <body > <div id="containerDiv" style="width: 100%; height: 100%"> <div id="mastDiv" style="width: 100%; background-color: teal; height: 150px;"><p>tasd</p></div> <div id="contentDiv" style="width: 100%; height: 100%; background-color: red;"> <div id="leftArticleDiv" style="float: left; width: 90px; background-color: red;"> <p> Left Content <br /><br /> </p> </div> <div id="navDiv" style="width: 100%; height: 100px; background-color: gray; margin-left: 90px">Nav Content</div> <div id="mainDiv" style="background-color: blue; height: 100% width: 100%; margin-left: 90px;"> <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer <p> Center Content<br /> longer </p> </div> <div id="footer" style="clear: left; height: 0px; visibility: hidden;"></div> </div> </div> </body> </html> This looks exactly how I would like it too in FF. My first question is, how can I fix it for IE. Specifically, navDiv and mainDiv appear below my leftArticleDiv, or they appear after it in IE. In FF they float right around the leftArticleDiv, but not IE. I've read many bug reports at ALA, but they don't seem to fit. Any ideas? Also, as you can see, my leftArticleDiv does not grow. That is, if it were to be longer than mainDiv, the results would be disatserous. Is ther anyway to have mainDiv and leftNavDiv always equall each other in height? So that whichever one were longer, the other one would be the same height? Thanks for your time. CJB First: I have seen: p.classname and just .classname What is the difference between the two if the latter is applied to a paragraph? Also: I have seen classes stack on top of each other like: <p class ="classname" class ="classname2">text</p> <p class = "classname" id = "idname">text</p> So is there a way to use classes with other classes id with other ids or classes and ids together like the above? Hi, I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately? Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden). Thanks, Jayant So I just started a class about 4 weeks ago with CSS and I have run into a problem. Its probably a stupid mistake on my part somewhere but I can't figure it out. I have div id tags and for those id tags I have created for example: #test h2, p { font-style:italic; text-align:center; font-weight:bold; display:inline; padding: 10px; } This is because I want only the header and p content in this specific div tag to have these properties. But for some reason its spilling out onto the rest of my p and h2 tags. Why is this happening and how do I stop it so that I can control which h and p tags have specific properties? Hope someone can help!! Thanks |
|||||||