|
CSS - Div Is Stretching...i Guess?
Ok so www.gameyin.com/index.php You will see a dotted border flowing up the left nav bar, and below advertisements (Yes I know I'm using tables. I will eventually move them onto a roll over menu.) I have it set up so it should only be dotted border for the ads. But it is going around everything. Weird. Here is..
CSS for it. Code: .advertisement {
font-weight: bold;
color: #000000;
border: 1px dotted;
width: 100%;
}
.advertisement p {
font-weight: bold;
color: #000000;
clear: both;
text-align: center;
}
HTML for it Code: <div class="advertisement">
<p>Have A Look At Some Of Our Sponsors</p>
<img src="images/ad1.gif" alt="Ads" />
<img src="images/ad2.gif" alt="Ads" />
<img src="images/ad3.gif" alt="Ads" />
<img src="images/ad4.gif" alt="Ads" />
<img src="images/ad5.jpg" alt="Ads" />
<img src="images/ad6.gif" alt="Ads" /><br />
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
<a href="advertise.php">Put Ad here</a>
</div>
You will see more if you go to site and see what I mean. Dunno if I got all the HTMl for it and CSS. I wrote it a while ago with the problem. Just never got around to trying and fix it . Similar TutorialsHi, beginner question, I guess there is a better way than this? Code: <TR> <td class="td2">jan_08</td> <td class="td2">feb_08</td> <td class="td2">mar_08</td> <td class="td2">apr_08</TD> <td class="td2">may_08</TD> <td class="td2">jun_08</TD> <td class="td2">jul_08</TD> <td class="td2">aug_08</TD> <td class="td2">sep_08</TD> <td class="td2">oct_08</TD> <td class="td2">nov_08</TD> <td class="td2">dec_08</TD> </TR> Thank you for your help. Hello, I've done this kind of work many times and never had a glitch but then there's always the first time. ENVIRONMENT: Dreamweaver 8, CSS 2.0, HTML created with Acrobat 7 using Save As name-of-the-file.htm (without CSS, only HTML3.2). In other words, I have a PDF file named name-of-the-file.pdf and it is saved (thus transforming it into an HTM format) saved as name-of-the-file.htm. This is done by Acrobat 7.0 itself. -------------------------------------------------------------------------------- PROBLEM: 1. While formatting the text generated as HTM, Styles are defined and used as needed. 2. Under Dreamweaver (Design) the CSS style work perfectly. 3. When previewing it under FF3 or IE7 (CSS inline) the page displayed in the browsers contain NO CSS formatting. 4. I passed the inline CSS to a file and tried that way. 5. Browsers still do not see the CSS. This is being run LOCALLY (not from a server). Could anyone give me any hint of why this is happening? I can include the CSS and part of the HTML in needed. Right now he HTML is huge and my next step will be break it up in smaller pages. Thanks for any suggestion. Hi from Athens,Greece! Glad to be here and hope i can help u as much as u help others and me of course. I have a problem that i think its common enough to give me a quick reply. I m using a separate ie css for a Joomla template, in that template suckerfish is used for the top drop down menu. When i open my forum as wrapped, under the top menu i also have the main menu for the forum. So if i click to the top drop down menu it appears like its obstructed by the forum main menu and its deosnt function well. I m gonna attach 2 pics, the first one is from opera and the other one its from IE the ie_css code its like this div#horiz-menu { PHP Code: } div#nav { position: absolute; top: 98px; left: 12px; } #nav ul ul a.daddy { width: 166px; } #access a { cursor: hand; } Hello it is propably my second post here I'm glad to know that there is place in the web space where you can search for help and accualy find it, without any problems. I almost finished my site, but I'm sad to say that I have strange problem. http://odin.foxnet.pl/kategorie/galeria It is gallery. It look quite good in IE, but not in FF or Opera. And funny thing, I make this site to be optimized for FF and Opera Here is my css source: http://odin.foxnet.pl/code/main.css line 287, or look for "#main #content .photo {" Scructure of page: Code: <body> <div id="top"> links </div> <div id="header"></div> <div id="menu"> menu </div> <div id="main"> <div id="content"> <div id="title" title=""> title and IE message </div> news starts <div class="photo"> <div class="story"> <a href=""> link to full story ( in this case full image ) <img src=""> thumb </a> </div> <img src=''> rating </div> news ends </div> </div> <div id="footer"></div> <div id="copyright"> bla bla bla... </div> </body> code in bold is repeating. Please could someone tell me what should I do, to make this "work" - look good ? And I'm sorry for my bad english . Good night. I know I've seen lots of questions on div sizing and positioning, but I apparently haven't been able to follow them. So I wrote out some very basic containers, and am looking for some very basic answers, even if they're only "no, it won't work." So let's say I have a layout like this: PHP Code: <div style="height: 100%; width: 100%; border: 2px red dashed; text-align: center;"> <!-- outside div --> <div style="height: 200px; width: 300px; border: 2px blue solid; text-align: left; margin-left: auto; margin-right: auto; "> <!-- centered div --> <div style="height: 100px; width: 100px; border: 2px green dashed; text-align: left; float: left;"> <!-- floated div 1 --> hello world 1 <!-- /floated div 1 --> </div> <div style="height: 100px; width: auto; border: 2px orange dashed; text-align: left; float: left;"> <!-- floated div 2 --> hello world 2 <!-- /floated div 2 --> </div> <div style="font-size: 0px; height: 0px; width: 0px; clear: both;"> <!-- clear div / --> </div> <!-- /centered div --> </div> <!-- /outside div --> </div> What I want to happen is for the orange div (floated div 2) to fill the rest of the width of the surrounding blue div (centered div). I know with this simple example I can simply set the pixel width, but I want to eventually make it more dynamic, allowing for variable sizes, like if I set the blue div to be a percentage instead of a fixed width. Any ideas? (Even links to appropriate threads are appreciated!) Thanks! (edit: had to update "centered div" to be firefox compatible) I have two divs floated inside another div, but the outside div isn't stretching to accommodate the inner divs. Why not? The TMPL tags are used by the HTML::Template perl module. html Code: Original - html Code <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> <div class='photo-navigate'> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=PREVIOUS_EXISTS><a href='<TMPL_VAR NAME=PREVIOUS_LINK>'><img src='<TMPL_VAR NAME=PREVIOUS_IMG>' border=0 /></a></TMPL_IF> </div> <div style='width: <TMPL_VAR NAME=THUMBNAIL_WIDTH>; float: left;'> <TMPL_IF NAME=NEXT_EXISTS><a href='<TMPL_VAR NAME=NEXT_LINK>'><img src='<TMPL_VAR NAME=NEXT_IMG>' border=0 /></a></TMPL_IF> </div> </div> css Code: Original - css Code div.photo-navigate { border: 1px solid black; background-color: #eeeeee; }
div.photo-navigate {
I read a thread on div streching but I didn't totally understand what was going on in that particular case so I thought I create a new thread and throw my code up as well. I'm trying to have a minimum height with a footer anchored at the bottom of the div (contained within it for the bg image to carry through behind the footer). But I can't seem to get all the pieces to work together. The problem I'm dealing with now is that the div won't stretch and the footer will be pushed down way too far. Here is what's happening. So how do I get the div to keep a minimum height of 706px or like 80% and then how do I get it to auotmatically stretch with the content and keep the footer anchored at the bottom of the stretched div? Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url(binkwaffle.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY>
<div id="main">
<div id="header"></div>
<div id="topnav">
<a href="index.php" class="topnav">home</a>
<a href="cards.php" class="topnav"> cards</a>
<a href="faq.php" class="topnav"> faq</a>
<a href="about.php" class="topnav"> about</a>
<a href="contact.php" class="topnav"> contact</a>
</div>
<!-- START EDITABLE AREA-->
<div id="content" class="binkwaffle">
<div>
<p>Hello</p>
<p> </p>
<p>This</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p> </p>
<p>a</p>
<p> </p>
<p> </p>
<p> </p>
<p>test</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>to</p>
<p> </p>
<p> </p>
<p> </p>
<p>seee</p>
<p> </p>
<p> </p>
<p> </p>
<p>if </p>
<p> </p>
<p> </p>
<p>this</p>
<p> </p>
<p> </p>
<p>is</p>
<p> </p>
<p> </p>
<p>working.</p>
<p> </p>
<p>thank you.</p>
<p> </p>
<p> </p>
</div>
<div id="footline">
</div>
<div id="footer" class="copyright">copyright 2006 binkwaffle
<div id="bottomnav">
<a href="index.php">home</a>
<a href="cards.php"> cards</a>
<a href="faq.php"> faq</a>
<a href="about.php"> about</a>
<a href="contact.php"> contact</a>
</div>
</div>
</div>
<!-- END EDITABLE AREA-->
</BODY>
</HTML>
Hey I'm new at this forum, and also new with tableless layouts. I wanted 2 small divs at the left and right side of the main content div. Everything went ok, till I putted some content in. None of the divs expanded in Firefox and in IE just the maindiv streched. Layout: www.dennisenderink.nl/test2 Stylesheet: www.dennisenderink.nl/test2/stylesheet.css Can you help me out please? I know this has been done to death but all the fixes I looked at on here didn't seem to help me... Essentially I'm trying to create a three-column layout plus a header and footer for an email. The left and right columns essentially act as thick borders and the middle column is for content. As such I want the left/right columns to stretch to the height of the middle column. Someone suggested that I wrap them in a div with the height set to 100% so that they expand to fill that space, but it hasn't worked. As such the content breaks the layout and the borders don't continue down with the rest of the content. Here's the code (minus header + footer divs): Code: <div name="column" id="column" style="width:600px; height:100%;"> <div style="padding:0px; margin:0px;"> <div name="leftbar" id="leftbar" style="float:left; width:20px; height:100%; background-color:#69696b; border-left:1px solid #252429; border-right:1px solid #bcbcbe;"></div> <div name="contentbox" id="contentbox" style="text-align:left; width:553px; float:left;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br /> </div> <div name="rightbar" id="rightbar" style="float:right; width:20px; height:100%; background-color:#67666b; border-left:1px solid #e0dfe4; border-right:1px solid #302f34;"></div> </div> </div> This is probably a really simple fix but it's been making my head hurt. Ideally I'd have turned those borders into background-images and set them to repeat-y but HTML emails don't like background images. Any ideas? Hello, I have a div element within a series of nested tables. the width of the cell that the div element is in is set to "45%". My div element has a CSS style of "overflow:auto;" meaning I want scrollbars to appear if the contents of the div are larger than the alotted space. For some reason, the scrollbars appear, however, My div element stretches and pushes other elements off of the screen. Is anyone aware of any bugs or something that could cause this? The thing that is really strange is that I only have this problem when the table within the DIV contains elements that have the nowrap attribute set to true. Thanks, Crystal Ok, iv had this problem alot when making sites, however this time it seems to be more complicated. http://area51.chicagowars.com/templates/modern_rouge/index.php is a site im working on. However the background in <div class="outer"> wont stretch. Iv used clearfix CSS such as Code: div.inner:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
/* hide from IE-mac \*/
* html .inner {
height: 1%;
}
div.inner {
display: block;
}
/* end hide */
and the simpler Code: div.clearfix
{
height: 0;
clear: both;
}
<div class="clearfix"> </div>
You'll be able to see these in the script. Iv done this kind of thing before (http://www.rap-wars.com) where i had tyhe same problem, but this time its not workin, i think its the breadcrumbs thats complicating things! Does anyone have the solution? Hopefully this is an easy question, how is this done to fill a frame, without repeating, just to stretch it out and fill up a frame? Another question with this menu: Austin360 Does anyone know how they made the widths of the submenu items stretch/adjust wider for more text, while the top level stays the same? I have a couple of dropdown templates, but the submenus are only as wide as the top level list items. (If their text is wider, the top level item is stretched too -- not what I want) Thanks in advance! Here's a question I can't seem to fix. I have nested DIVs and when the nested DIVs receives text/content it will stretch, but the parent DIV of that DIV won't stretch with it. Causing the nested DIV to stretch beyond the border of the parent DIV. I've temporarily(sp) tried to fix the problem by putting tables in it, but any help with this would be appreciated. Thank you. ^_^ http://www.gamecitadel.com/reviews/31 In firefox: All content in the middle between the header and footer is in a div called mainContent Code:
#mainContent {
background-color: #323333;
background-image: url(images/index/contentBG.gif);
width: 779px;
height: 700px;
margin-top: 7px;
}
when the height is set, as is above, the mainContent div will only go to that height, and the content within it will continue down past(outside) of the div. if the height is removed, the mainContent div doesnt show at all. shouldnt the content inside the mainContent div determine its height? What have I forgotten to add? In IE: Works perfect When I shrink my browser to the left my div slides to the left out of view. Is there a way to create a cut off point so my div can neatly meet the edge of the browser and stay put when minimizing the browser to the left? Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems. I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else. Here's how it looks now: Code: <html> <head> <title>CSS Divisions</title> <style type="text/css"> #Wrapper { width:800px; margin-left:auto; margin-right:auto; text-align:left; } #Header { width:800px; height:120px; background:#FC6;} #PNav { width:800px; height:40px; float:left; background:#CCC; } #Content { width:800px; height:400px; float:left; overflow:hidden; background:#FFC; } #Footer { width:100%; height:80px; float:left; text-align:center; background-color:#FC6; } </style> </head> <body> <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div> </body> </html>
Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen. I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far. Any help would be greatly appreciated! I'm using a word wrap function in CSS that looks like this. .wordwrap { word-wrap:break-word; } It's very effective in preventing any tables on the entire site from stretching (comment boxes, news feeds, etc). However, it is SO effective that it will cut a word in half if it hits the edge of the table for example, a sentence like: L1 "The cow and dog jumped over the " L2 "moon and fell off." Might come out as: L1 "The cow and dog jumped over the mo" L2 "on and fell off." Any ideas on how I can use this function without cutting words in half? It does such a great job at preventing tables from stretching. I'm in the middle of learning CSS and have come along alright for the most part. I have two small questions though. 1) The page I'm working on is http://www.mcconaha.com/csscenter.php. It's a three-column layout, with div boxes holding various links down the right and left sides of articles that will be posted. There is a main div that all of this sits in, and that expands just fine to whatever amount of content the article may have. But if the article were to have just a samll amount of content, the div wouldn't expand to the minimum height established by the link boxes on the right and left. How do I make that happen? I just need the light grey box to expand down to the lowest point on the page. 2) Notice the small box with the yellow border in the middle. I want this to be a copyright footer, but have a similar problem. How do I make that box appear 10px below whatever the lowest point for the main div is? Basically, I need the nav boxes to push everything down. I HOPE this can be done fluidly, so I can simply add and remove boxes quickly without needing a CSS edit...that's the goal anyway...modular nav boxes. My CSS is at http://www.mcconaha.com/csscenter.css and the page is at http://www.mcconaha.com/csscenter.php (Also note that this is really all I'm asking. I'm going to clean up the rest...just roughing it out right now.) Anyway, thanks in advance. Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column) i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative? p.s. i have tried height:auto and height:100%...neither worked.... |
|||||||