|
CSS - Float Not Extending Bottom Layer In Net
It's hard for me to explain this so bear with me.
This is the page in question. The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch. I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right. I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers. Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to? Thanks in advance. Tim Similar TutorialsI'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem. I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers. Example 1: URL. As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs. Example 2: URL. Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content. The effect I'm looking for is something like this: URL. My CSS is here URL. First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too. Thanks in advance for any help you can offer. I have 2 div .In top div i have menu.In bottom div i have iframe . i want that top div should take about 20 % space and bottom div take rest of the space .iframe refresh every min and it content changes everytime .Currently scrollbar are appear both horizontally and vertically . How can i remove this scrollbar. I give a sample code <body class="body"> <div class="container"> <div class="top"> some contents here </div> <div class="bottom"> <iframe class="iframeclass></iframe> </div> </div> </body> how i design this classes The content of iframe is dynamic its height change everytime page refresh. Hi, I have a div layer, and I have set the background colour of this layer to purple. Now the height of this image various according to it content. However I would like that the bottom part of the image is made from a faded image. So far I have accomplished this by using an external image. However I would like to use the background: url(...) in CSS instead. Is this possible? Can I repeat an image only at the bottom part of a div in CSS? Thanks and Regards, Sim085 I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags. An example is http://www.adaappliances.com/produc...48&cat=0&page=1. Please do not attempt to order anything! This is not a live site yet. This is a snippet of the code. I am using inline styles for testing. Code: <div style="float:left; padding:5px"> <IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div> <p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p> I have not found a way to fix this. Any suggestions? Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help?
Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
<title>Comments on 2005-02-10: February 10, 2005</title>\n
<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
<div id="entry" xml:lang="en-US" lang="en-US">
<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
<p class="dream">I can only remember two things... That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games. One was for a calculator I had only owned in the dream, and it was spectacular!
</p>
<p class="normal">I brought my "newphonium" to school today.</p>
<p class="normal">We had a pretty normal session in Jazz. <em class="entry">Someone actually got a trombone solo.</em></p>
<p class="normal">Our teacher was back. The entire first half of the period going over our homework. <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em> Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>
<p class="happy">We didn't do much in Japanese. All we really did was read Katakana and finish our puzzle. <em class="entry">A few of us found new words.</em> I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>. During resource, I looked over this book with a couple of friends of mine and their friend. <em class="entry">It was so funny, too!</em></p>
<p class="normal">In Health, we continued our lecture on alcohol. <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
<p class="happy"><span class="normal">Class started off with a lock-down. <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English. <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>
<p class="sad">Before actually eating, I wandered a bit. <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
<p class="normal">We continued on proofs. <em class="entry">It took a bit of effort to do.</em> <span class="happy">Still, we finished the investigation.</span></p>
<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span> Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
<p class="happy">I got a ride home</p>
<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
<p class="happy">Once done with my homework, I took a two-hour nap.</p>
<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>. Also, I remember psychically communicating with my section from Band. <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span> Also, my old friend, who is a freshman now, was mentioned.</p>
<p class="happy">The dream gave me the idea to call him up. <em class="entry">Apparently, the call woke him up.</em> We talked about how our lives were going, along with school. <em class="entry">Apparently, the school banned people from using their calculators. How could they!? He also told me that some kids were goofing around during Breakout library time.</em> We scheduled a time to meet and talk about some more things. <em class="entry">I could show him Linux.</em></p>
<p class="happy"><strong class="entry">I fixed the comments system!!</strong> <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
<div class="right">
<img src="comments_files/right_main_bar.png" alt="right_side" />
</div>
<div class="left">
<img src="comments_files/left_main_bar.png" alt="left_side" />
</div>
<div class="center">
Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
<br />
Name: <input type="textarea" name="name" class="lower" />
E-mail: <input type="textarea" name="e-mail" class="lower" />
</div>
<div class="comment">
<input type="textarea" name="comment" class="text" />
<input type="submit" value="Post!" class="click" />
</div>
</form>
</body>
</html>
CSS: Code: h2 {
text-align:center;
font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
color:rgb(0,150,150);
}
h3 {
text-align:center;
font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
color:rgb(0,0,150);
}
form#main {
display:block;
}
form#main div.left {
float:left;
background-color:rgb(255,255,255);
}
form#main div.right {
float:right;
background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
height:60px;
}
form#main div.center {
background-color:rgb(0,0,0);
background:url(comments_files/center_main_bar.png);
font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
color:rgb(255,255,255);
padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 10% 2px 0;
}
form#main div.center input.lower {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 8% 2px 0;
}
form#main div.comment {
width:95%;
border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
width:90%;
margin:5px 5% 5px 5%;
height:100px;
}
form#main div.comment input.click {
width:25%;
margin:5px 37.5% 5px 37.5%;
}
body p {
text-align:justify;
font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
color:rgb(150,0,0);
}
a {
color:rgb(0,100,0);
text-align:left;
}
a:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
a#title {
color:rgb(0,100,0);
text-decoration:none;
margin-left 25%;
text-align:left;
}
a#title:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment a.mail {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,100,0);
text-decoration:none;
text-align:left;
}
div.comment a.mail:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment span.mail {
margin-left 25%;
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,0,150);
text-align:left;
}
div.comment {
border-bottom:2px dotted rgb(0,0,255);
margin:1.5em;
}
div.comment p {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
display:block;
}
/* ENTRY */
div#entry {
border:4px double rgb(0,0,0);
padding:0.25em;
margin:0.5em;
min-height:79em;
}
div#entry p {
font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
text-indent:2em;
text-align:justify;
}
div#entry p.dream {
font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
color:rgb(150,150,0);
text-indent:2em;
text-align:justify;
}
em.entry {
font-style:italic;
}
strong.entry {
font-weight:bold;
}
span.uentry {
text-decoration:underline;
}
span.hider {
color:rgb(255,255,255);
}
div.story {
border-left:2px solid rgb(0,0,0);
border-top:2px solid rgb(0,0,00;
}
div.story div.title {
border-bottom:1px solid rgb(128,128,128);
border-right:1px solid rgb(128,128,128);
font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
width:50%;
text-align:center;
}
div.story div.storybody {
padding:0.25em;
}
span.happy, p.happy {
color:rgb(0,100,0);
}
span.sad, p.sad {
color:rgb(0,0,100);
}
span.normal, p.normal {
color:rgb(100,0,0);
}
img.center {
margin:0.25em auto;
}
img.right {
float:right;
margin:0.25em;
}
img.left {
float:left;
margin:0.25em;
}
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?) Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks 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 bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things) So I have 3 images for the top of my page and 3 images for the bottom. The page is enclosed in a div frame titled "frame" each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe" Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom. Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame" I've tried some code in here to do it and it doesn't work.. any help here? thanks! Code:
<style type="text/css">
body {
text-align:center;
height:100%;
min-height:100%;
padding:0px;
}
#frame {
width:800px;
height:100%;
min-height:100%;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:left;
position:relative;
}
#contentlefttop {
width:155px;
height:282px;
padding:0px;
float:left;
background-image: url(images/layout_01.gif);
background-repeat:no-repeat;
}
#leftframe {
float:left;
width:155px;
position:relative;
height:100%;
min-height:100%;
}
#contentleft {
clear:left;
float:left;
padding:0px;
width:155px;
padding-bottom:270px;
}
#contentleftbottom{
width:155px;
height:270px;
/*clear:left;
float:left;*/
padding:0px;
position:absolute;
bottom:0;
background-image: url(images/layout_07.gif);
background-repeat:no-repeat;
}
#contentcenter {
width:486px;
padding:0px;
clear:left;
float:left;
text-align:center;
min-height:100%;
height:100%;
padding-bottom:53px;
}
#rightframe {
float:left;
position:relative;
height:100%;
min-height:100%;
width:159px;
}
#centerframe {
float:left;
position:relative;
height:100%;
width:486px;
}
#contentrighttop {
width:159px;
height:282px;
padding:0px;
clear:left;
float:left;
background-image:url(images/layout_03.gif);
background-repeat:no-repeat;
background-position:top;
}
#contentright {
clear:left;
float:left;
width:159px;
padding:0px;
height:100%;
padding-bottom:270px;
}
#contentrightbottom{
width:159px;
height:270px;
/*clear:left;
float:left;*/
position:absolute;
bottom:0;
padding:0px;
background-image: url(images/layout_08.gif);
background-repeat:no-repeat;
background-position:bottom;
}
#contentheader {
width:486px;
height:135px;
float:left;
background-image: url(images/layout_02.gif);
background-repeat:no-repeat;
}
#contentfooter {
/*clear:left;
float:left;*/
width:486px;
height:53px;
background-image: url(images/layout_09.gif);
background-repeat:no-repeat;
position:absolute;
bottom:0;
}
#sitemessage {
margin-left:17px;
margin-right:31px;
height:90px;
text-align:center;
font-size:12px;
}
#wisemanquote {
margin-left:22px;
margin-right:24px;
height:85px;
text-align:center;
font-size:12px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<div id="frame">
<div id="leftframe">
<div id="contentlefttop">
<div id="sitemessage"></div>
</div>
<div id="contentleft">Left</div>
<div id="contentleftbottom"></div>
</div>
<div id="centerframe">
<div id="contentheader"></div>
<div id="contentcenter">
<p>Center</p>
</div>
<div id="contentfooter"></div>
</div>
<div id="rightframe">
<div id="contentrighttop">
<div id="wisemanquote"></div>
</div>
<div id="contentright">Right</div>
<div id="contentrightbottom"></div>
</div>
</div>
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> I really like this menu: http://alistapart.com/articles/horizdropdowns (see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm) My problem is that it only works in one level. How can I modify it to support more levels? Or do you guys know any simular menu, that support more levels? Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out. Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs. Here is the HTML: Code:
<!-- TOP -->
<div class="topOutter clearFloat">
<div class="topInner floatLeft">
<div class="floatLeft">
<div class="floatLeft" style="width: 21px;">
<img src="customStyle/structure/top_left.gif" alt="" />
</div>
<div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">
<a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a>
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_end.gif" alt="" />
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_right.gif" alt="" />
</div>
</div>
<!-- /TOP -->
<!-- MIDDLE -->
<table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
<tbody id="collapseobj_forumbit_16" style="">
<tr>
<td class="thead" style="width: 100%; height: 17px;"></td>
</tr>
</tbody>
</table>
<!-- /MIDDLE-->
<!-- BOTTOM -->
<div class="bottomSpacer bottomOutter clearFloat">
<div class="floatLeft">
<img src="customStyle/structure/blc.gif" alt="" />
</div>
<div class="floatRight">
<img src="customStyle/structure/brc.gif" alt="" />
</div>
</div>
<!-- /BOTTOM -->
The CSS Code (spacer and top/middle classes are just bordering and bottom margins): Code:
.clearFloat { overflow: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine. And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem. Thx. I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway http://www.psyberarts.com/work/prism/index.html There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away. Should I just make a repeat image for the footer and do it that way? I have a div that has a table inside of it. Even though the table expands with content added, the div does not. It's important to me that the div extend with the table because this div in question has a background shadow border for the table. Here is the CSS: Code:
#right {
float: right;
width: 80%;
height: 100%;
}
#rt_brdr {
height: 100%;
width: 100%;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/r_brdr.gif) repeat-y right;
}
My HTML: Code:
<div id="right">
<div id="rt_brdr">
<table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
</tr>
<tr class="white_fill">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
</tr>
</table>
</div>
</div>
I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot. Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window. I dont think its box model issue because there is no major vertical padding..any ideas? I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> |
|||||||