|
CSS - Two Float Questions: Columns And Images
My CSS practice site (http://stallinswebdesign.com/vs/index.php) is coming along - no tables! - thanks to those of you who have helped along the way. I've used the float property to construct a 3-column site. Two short questions include:
1. I want to display a small image at the top of my middle column. When I drag from either side to make the browser window smaller, IE forces the image and everything below it to the bottom of the page. FF and Opera simply slide the side-column content under the image, which I much prefer. Is there a way to tell the image to stay at the top so that IE can't push it to the page bottom? 2. If you look, you will see that my site is designed with a narrow column on either side of the main wider column. It would look really great if I could occasionally split that center column into two equal-width columns. For example, if each line segment below represents a short paragraph or image, could I do the following when I've already designed the site with float and not the position property? _____ _______________ ______ _____ _______________ ______ _____ _______ _______ ______ _____ _______ _______ ______ _____ _______________ ______ _____ _______ _______ ______ etc. etc... Thank you all for your time. Similar Tutorialsultimately, I would like to have a container that holds three equal columns...my issue is that each time I try to define a container and put a column inside the container...it doesn't sit "inside" the container. Just a quick piece of code to demonstrate my issue: body { margin:0px; background-color:#999; } #container { margin:70px 10px 30px 10px; border:5px solid #424242; background-color:#fff; } #left { position:absolute; top:70px; left:0px; margin:20px; background-color:red; width:150px; } <body> <div id ="container"> <div id="left"></div> </div> </body> Now, I know that I am new to CSS and I also figure that my coding is wrong and that I am making an elementary mistake. Any and all comments and help are appreciated...please be gentle! haha thanks jon Hi, I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects. I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7. The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto). Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function. In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it. Cheers! Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here When I am floating two containers or images my background color disappears. Why is that and what should I do instead? Here is what I am doing: <div class="contentWrapper"> <div class="content"> <div class="leftContent"> <img src="" alt="" /> </div> <!-- end leftContent --> <div class="rightContent"> <img src="" alt="" /> </div> <!-- end rightContent --> </div> <!-- end content --> </div> <!-- end contentWrapper --> Now the css: .contentWrapper { margin: 0; padding: 0; width: 100%; } .content { margin: 0 auto; padding: 0; width: 960px; background: #ccc; } .leftContent { margin: 0; padding: 0; width: 450px; float: left; } .leftContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } .rightContent { margin: 0; padding: 0; width: 450px; float: right; } .rightContent img { margin: 0; padding: 0; width: 200px; height: 200px; border: #000 solid 1px; } Thanks! Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. 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 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? 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? 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 ? 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 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 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 I have the following code: Code: <div class="Outer"> <div class="Inner"> Text one </div> </div> <div class="Outer"> <div class="Inner"> Text two </div> </div> I have the following CSS Code:
.Outer{
width:150px;
float:left;
}
.Inner{
Margin:10px:
}
I would like to set the Inner div in first instance of Outer to have a margin-left of 0px. I have tried the following Code: .Outer:first-child .Inner{
margin-left:0px;
}
This works in Chrome but not in IE, but it does work if I apply the style inline to the First Inner Div. Can it be done within the CSS file? 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 |
|||||||