|
CSS - Top-bottom Anchored Div Ie
I'm trying to do something like this:
div#box { position: absolute; top: 100px; bottom: 100px; } ..so that the box anchors to the top and bottom no matter what resolution you're in. It works fine in Firefox. Any ideas for ie? javascript or anything. Thank you Similar Tutorialsi have images, but i have this Code: * a {
text-decoration:none;
font-weight:bold;
color:#665637;
}
* a:hover {
color:#B39760;
border-top-style: double;
border-top-width: 1px;
border-top-color: #665637;
}
and my anchored images take on the hover property. how can i stop them from doing this and just stay as they were? i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image. however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle. the problem with what i have now is that the image is always at the top of the game box div and so is the text. ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible? Code: if ($a == 2) {
echo "
<div class='gamebox clearboth floatleft halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$game['desc'] = "<span class='gdesc'>".$game['desc']."</span>";
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='gamelink'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='floatleft wordwrap' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a>
</div>";
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>
I have this code... Code: <div style="width:200px;height:300px;border:1px solid red;"> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">ok</div> <div style="width:198px; height:30px;border:1px solid blue;">wish this at bottom</div> </div> Above example is here... http://www.casti2001.com/box.html I ask, how can I put last box at bottom? Thanks for yor help! I have a DIV with no border or padding that I cannot get to bottom itself in IE7 even with
Code: position: absolute; bottom: 0px; is there a logical explanation for this? I tried Code: fixed: bottom; without success. hi i have few questions: 1. when you have a paragraph and the space between the two lines of text, how do you reduce it? 2. similarly say you have a paragraph and then another element underneath it for eg the end of table, a horiz. line etc, how do i reduce the space between that paragraph and that element. 3. I have a DIV but when i put it on the page it appears at the top, is there a way to place it so that it is placed at the bottom. here is the code: Code:
<div style="float:left;">
<a href="{U_VIEW_FORUM}">{FORUM_NAME}</a><br />
<b>{L_MODERATOR}: {MODERATORS}<br /><br />
{LOGGED_IN_USER_LIST}</b><br/>
<a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a>
<!--<a href="{U_INDEX}">{L_INDEX}</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>-->
<a href="{U_INDEX}">Forum</a> -> <a href="{U_VIEW_FORUM}">{FORUM_NAME}</a>
</div>
<div style="float:right; vertical-align:bottom; margin-top:9%;">
{PAGINATION}
<a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
</div>
in this the first DIV appears on the left, the second div appears on the right of the first div. HOWEVER it positions itself with the top of first div SOMETHING LIKE: Code: FIRST DIV TEXT SECOND DIV TEXT FIRST DIVE TEXT .... ... however i want it to look like: Code: FIRST DIV TEXT FIRST DIVE TEXT .... END OF FIRST DIV SECOND DIV TEXT now i have two possible sol for this ie: using margin-top to make it go down or use <br/>. is there a css specific tag? Basically, I'm trying to get a div *bottom* to stick to the bottom of the page always, regardless if div *content* has enough data to push it down. Simple right? But it also needs to be able to align below the page just below *content* if the page needs to scroll, so it can't be aligned "absolutely". So how's it done? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<style type="text/css" title="">
#sidebar {
background-color: #00CC00;
float: left;
height: 100%;
width: 250px;
}
#content {
background-color: #FF66FF;
float: left;
height: 100%;
width: 600px;
}
#bottom {
background-color: #CCCCCC;
clear: both;
width: 500px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="sidebar">Sidebar</div>
<div id="content">
<p>Main Content Area </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="bottom">Bottom Nav Div - this page is layingout correctly. </div>
</body>
</html>
Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, Current working file is he http://ravenwave.com/clients/opi/ link to the css file is he http://ravenwave.com/clients/opi/opi.css The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page. Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work. Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out. Thanks i want to make it so a certain div is always at the bottom, but i cant do it by playing a min-height on the div above it, is there a solution to this problem? ok so i have a photo gallery and the images vary in height. and so instead of having them defaulted to top aligned, i'm try to figure out how to get them to bottom align. anyone have any ideas or articles i can check out? thx I'm new here so Hello guys! I have a problem with CSS - its probably really simplistic but i've been searching for ages and cant figure it out! I have a long narrow DIV which is a header, then a much smaller DIV which is a small square picture. What i want is for the small picture to fit as tightly into the bottom left hand corner as possible. I've tried this: Code: Float:left; postion:absolute; bottom:0px; but as i'm sure u can figure out that sends it to the bottom of the page and not the bottom of its parent DIV. Please can somebody let me know how it is possible to achieve this? hope this is coherrant and fairly simple to do! thanks. I have three divs. The main div contains the background color and border. The second div has text, and The third has an img. What I want is for the image to sit at the bottom of the main div and stay there when the font-size is increased. I want the text to stick to the top of the main div. Can someone please help me. I have attached the code below it is all messed up cause I have been trying everything I can think of. ".abouttestcontainer { width : 100%; float : left; border-top : 1px solid #cccccc; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; color : #001F56; background-color : #DDEADE; border : 1px solid black; } .abouttest { float : left; width : 450px; height : 100%; padding : 10px 50px 0px 10px; text-align : left; font-size : 12px; border : 1px solid black; margin-right : 10px; } .aboutimage { border : 1px solid black; position : relative; display : inline; vertical-align : bottom; }" Hi all, Is it possible to automatically scroll the scrollbar to the bottom in the css. This is how you do it in html: var objDiv = document.getElementById("leftHand"); objDiv.scrollTop = objDiv.scrollHeight; Regards, Stephen I'm trying to position a DIV on the right bottom side of the page using the following code: position:absolute; right:0; bottom:0; Unfortunately when I scroll down the page, the div remains in it original place :-( Using mysql and php I gather data belonging to different people and I put together one page for each person. The bottom of each page has a different footer: Quote: <div id="footer">Data...</div> The declaration of style is Quote: <style type="text/css"> #footer { position: fixed; width: 100%; height: 180px; top: auto; right: 0; bottom: 0; left: 0; } </style> The problem is that each page has the same information shown at the bottom. However if I check the source code it shows different data for each bottom of page. Help! Hi, I am using this code running well so it draws a box in the upper left side the way I expected. It affects a <div class="textOnBodyBottom">... PHP Code: .textOnBodyTop { float: left; position: relative; margin-top: 20px; margin-left: 20px; border: 1px solid Black; } ...but I wanted to draw another box at the bottom so I expecte foll code would also run well... PHP Code: .textOnBodyBottom { float: left; position: relative; margin-bottom: 20px; margin-left: 20px; border: 1px solid Black; } ... but it doesn't. Can you help me? Tks! Hi there, I am having trouble aligning 2 divs to the bottom. I have a left and right side div for a header area, however the right side is taller than the left, so it is leaving a gap at the bottom of both sides. This is my CSS: PHP Code: #nav_wrapper{ } #nav_left{ width: 620px; padding-left: 20px; float:left; } #nav_right{ float:right; text-align: right; padding-right: 20px; } #member_login{ width: 180px; padding: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; background-color: #f6f6f6; line-height: 200%; } #member_login a{ font-family:Verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; font-weight:bold; text-decoration:underline; } and this is my HTML: PHP Code: <div id="nav_wrapper"> <div id="nav_left"> left content <div id="nav_right"> <div id="member_login"> right content </div> </div> </div> Any ideas? Hi! I can not solve one problem. As You can see here bezlica.ru/joomla/ , I need to have image "contacts" at the bottom of the grave. Currently, it is relative to top and works fine on different resolutions. But, if content needs to be expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9, images drops down from the grave to bottom. Maybe there is a way to make it relative to the bottom of the screen, or some other solution? It needs to stay fixed where it is on different resolutions, that is why it is so hard for me! Any help will be appreciated. Regards, Konstantin. |
|||||||