|
HTML - Bottom-align Div Inside Container Without Specific Height
Hi all,
Current code available for viewing he http://www.joomlatemplatesearcher.com/testtemplate/ I'm trying to position a div so that it sits (near) the bottom of a container. I'd assumed position:relative / bottom: 10px would do the trick, but no joy, and I can't figure out why that's not aligning. If anyone could offer help, I'd be very appreciative. Ultimately I'm trying to get the aqua-coloured box sitting inside the black area of the monitor (aligned from the bottom, as the div containing the monitor background is bottom-aligned to a container with variable height. Any suggestions greatly appreciated. With thanks, - SuperGrover Similar TutorialsHi I am trying to center a container from top to bottom aswell as left to right. This is my code for the container so far: Code: #container1 {
width:780px;
height:650px;
margin-left:auto;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
background-color:#FFFFFF;
}
As you can see my container is 780x650, i may change the height when i come to do the design but the design wont work if i cant have this container centerd on different screen resolutions. Left and Right centering has been acheived with margin's set to auto, unfortunately this does not work for top and bottom Anyone know how to achieve this, I am only really worried about browser compatability in FF and IE. Thanks in advance On the following page, i am trying to align the freewebs button in the bottom corner of the page: http://www.freewebs.com/jaceyanimation/ i can only figure the align right, so when i want it in the bottom corner of the page, i'm having to add alot of <br>'s. Is there a way the make a vertical wrapper, and align it that way? Hello. I am designing a website with a lot of partially transparent PNG images, so I am using multiple <div> containers with CSS positioning to create my page layout, so certain images overlap the background content for visual effect. I've run into a problem, though. I wanted to place an iframe inside of a <div> container, so that I can load external content into the iframe, yet position the iframe using CSS, rather than tables. Unfortunately, all of the "content" pages that load into this iframe-in-a-container lose their functionality -- rollover images won't load and links won't underline or activate when the cursor hovers over them. Is this because the iframe is inside of a <div> container? The same iframe code works fine if placed in a table, or directly in the body of the HTML, so I suspect that's the probelm. Does anyone know if that's just one of the limitations of using containers, or is there a workaround that would allow me to do what I wanted to do? If not, I'll just make my main page layout with tables, stick the iframe in a cell, and use <div> containers for the rest of my transparent images. Thanks for any suggestions! I have a div that contains multiple items which I need to have aligned to the bottom of a page when printing. How can I accomplish this? If I want to make a way to have that table move ends? I want to know how to make a div stretch to the full height of a container! Here is the html: Code: <!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> <title>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */
div {display:none} /* Keep NO MATTER what - Keep at top */
body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed}
#container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303}
#leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y}
/* END - Master */
/* START - Header - No change */
#logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none}
/* END - Header - No change */
/* START - Content */
/* END - Content */
/* START - Footer - No change */
/* END - Footer - No change */
The "leftside" image is supposed to be the full length of the header + content. Thanks! The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page. It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page. Here's a link to the page (apologies for the file size) link to page I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok? I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class). Thanks for any help. Hi, Im learning html/css and I really need some help to achieve what you can see on the image. So far Ive created the html side, but I've been around the css without good results. Please have a look: Thanks for your time Code: <div class="main">
<div class="image"><div class="about">
<div class="abouttop">
<div class="abouttopimg"><img src="http://www.freeimagehosting.net/uploads/70b79a8111.jpg" alt="about me" width="100" height="100" /></div>
<div class="abouttoptxt">
<p>First part</p>
<p>of text goes here</p>
<p>side to side </p>
<p>with the image</p>
</div>
<!--abouttoptxt-->
</div>
<!--abouttop-->
<div class="aboutmetxt">
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>dantium, totam rem aperiam, eaque ipsa quae</p>
<p>voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>rem aperiam.</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>sit voluptatem accusantium doloremque lau.</p>
</div>
<!--aboutmetxt-->
<div class="cb"></div>
<!--Do not Delete It. It is used to maintain height-->
</div></div>
</div>
<div align="center">
<table align="center" cellpadding="8" cellspacing="8" >
<tr>
<td><a href="#" title="First square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Second square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Third square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Fourth square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
</tr>
</table>
</div>
i need text in a cell of a table had align - left so it is by default but the last string (signature) i'd like to have aligned to the right help please Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi, I have a template in the making but i have got to a point now where the footer isnt working. I want the footer to stick to the bottom of the browser and for it to work when there is a small amount of content which doesnt require scrolling and also when scrolling is required. At the moment it works when scrolling isnt required but as you will see on my example below when scrolling happens the footer doesnt stay stuck to the bottom of the browser it just moves up with the rest of the site. Any ideas how to fix this? I have been testing in FF2 but i need it working in IE 6 + 7 + FF 2. The site is here any ideas or help would be great Cheers Hello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? Hello I have a very annoying problem: I have a table inside a td and I want the table the strech its height to the height of the <td> , but somehow I can't do it... <td valign="top" style="width:14px; border:solid 1px black;"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%; height:100%; min-height:100%; max-height:100%" > <tr> <td class="CommonSeperetorUp" > </td> </tr> <tr> <td class="CommonSeperetorMiddle" > </td> </tr> <tr> <td class="CommonSeperetorDown" > </td> </tr> </table> </td> int the class "CommonSeperetorMiddle" I set the height to 100% ... anyone? Hi guys, I've been frustrated for awhile trying to fix three of my problems. I just started making a site for myself today, the specific one is http://www.bcsticketsnow.com/rosebowl.html Anyway, I've got three problems, and appreciate any help anyone can offer on any of them: 1. I'm new to frames, and am told to stay clear of it. But I don't know php, so this is the only way I know to make a header, middle and footer on all 20 pages that I'm going to have where I only need to edit one to change all. So I have 3 frames in the frameset, header, mainrosebowl, and footer. I understand that cols="220,*,100" will make the header 220 pixels, the footer 100 px, and the middle part the rest of the window. But I'm trying to figure out a way to have it go deeper than the window. As you can tell, I've got a scroll bar on that middle frame. I want that frame to extend to more than 100% and push the footer below the visible window. So I'm really looking for a big scroll bar for the entire window to scroll down, not a mini scroll bar just for the middle frame. Is this possible? Having the cols add up to only the size of the window isn't what I'm looking for. 2. In the header frame, I've got that drop down menu (says "Bowl Events"). When I put the form in for the drop down menu, it kind of expanded the height of the table. It had less space before in that row of the table with the blue background. When I put the form in there, it kinda messed up the spacing. I essentially want to delete that space below bowl events to make the height of the row of that table like half the size. Any ideas? 3. For that same drop down menu, I'm trying to target each link in that menu to open up a new window (like target="_top"). But putting it after <option value="URL" target=..."> does nothing. Am I supposed to put it in the javascript? Here's what I have now: <script type="text/javascript"> function goToPage(dd) { var ind = dd.selectedIndex; if (ind == 0) { return; } var url = dd.options[ind].value document.location=url; } </script> <form> <select name="eventlist" onChange="goToPage(this); return false;" size="1" style="border: 0; BACKGROUND: navy; COLOR: white; FONT-FAMILY: arial; FONT-SIZE: 15px; font-weight: bold;"> <option value="">Bowl Events</option> <option value="http://www.bcsticketsnow.com/bcschampionship.html" onclick="header.location.href='_top'">BCS Championship</option> <option value="http://www.bcsticketsnow.com/rosebowl.html">2009 Rose Bowl</option> <option value="http://www.bcsticketsnow.com/orangebowl.html">2009 Orange Bowl</option> <option value="http://www.bcsticketsnow.com/fiestabowl.html">2009 Fiesta Bowl</option> <option value="http://www.bcsticketsnow.com/sugarbowl.html">2009 Sugar Bowl</option> <option value="http://www.bcsticketsnow.com/chickfilabowl.html">2009 Chick-Fil-A Bowl</option> <option value="http://www.bcsticketsnow.com/capitalonebowl.html">2009 Capital One Bowl</option> <option value="http://www.bcsticketsnow.com/cottonbowl.html">2009 Cotton Bowl</option> <option value="http://www.bcsticketsnow.com/holidaybowl.html">2009 Holiday Bowl</option> </select></form> I'm attempting to insert a image map menu at the bottom of each page, however for some reason there is a 2-4 pixel gap between the menu and the bottom of the table and I can't figure out why. Here is the URL: http://www.knockoutwebsites4u.com/LSC/index.html Thanks for your help in this matter. Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar My container kinda works, but kinda doesn't. I've had this problem before and I can't remember how I solved it, anyway.. My container is keeping my "reading" and "sidebar" divs in place, but the background of the container div isn't following down the other divs, it's just on top of the container. Here's my website : http://djance.net/wordpress (the layout is NOT done if you were wondering). And my Css : http://djance.net/layouts/14/css.style I think it's the Css, but anyway Help appriciated ! I'm pretty new to all of this and need some help trying to load a swf file in a container. What I have is a thumbnail gallery where I have thumbnails on the right side of the page and when you click on the thumbnail it pops on the left side of the page in a container. So what I want to do is keep the same format so you can click on the thumbnail then the swf file appears instead of an exploded image. This is what I have. Also I appreciate any and all help, thank you. <style type="text/css"> img { border: 0px } #container { text-align: center; border: 0px; margin: 0 auto; padding: 0px } #leftcol img { } #rightcol img { } </style> <td width="80" height="421"> </td> <td width="673"><div align="center"><img src="images/AF.jpg" name="ImageOnly" align="absmiddle" /></div> </div></td> <td width="71"> </td> <td width="318" valign="middle"><div id="leftcol"> <div class="root" id="root0"> <div class="scrollContainer" id="scroll0Container"> <div class="scrollContent" id="scroll0Content"> <p> <a href="#" onclick="ImageOnly.src='images/Asylum_5.jpg'"><img src="images/Asylum_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_1.jpg'"><img src="images/Asylum_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_2.jpg'"> <img src="images/Asylum_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_3.jpg'"><img src="images/Asylum_3_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/kerryn_5.jpg'"><img src="images/kerryn_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_6.jpg'"><img src="images/kerryn_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_7.jpg'"> <img src="images/kerryn_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_8.jpg'"><img src="images/kerryn_8_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_9_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_movie_thumbnail_2.jpg" /></a> (this is where I want to add it) </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/f_h_5.jpg'"><img src="images/f_h_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_6.jpg'"><img src="images/f_h_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_7.jpg'"><img src="images/f_h_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_8.jpg'"><img src="images/f_h_8_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/football_1.jpeg'"><img src="images/football_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_2.jpeg'"><img src="images/football_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_3.jpeg'"><img src="images/football_3_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_4.jpeg'"><img src="images/football_4_thumbnail.jpg" /></a> </p> <p> </p> </div> </div> </div> </div> I hope I'm posting in the right section. Again thank you for any help. |
|||||||