|
CSS - Absolute Positioning: Problem With Bottom
I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively.
html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title><?=$title?></title>
<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="inner_wrapper">
<div id="background"></div>
<div id="left_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="l_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="l_border_l"></div>
<div id="l_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="l_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="left_ccw">
<div id="cc1">
<?for($i=0;$i<500;$i++):?>1 <?endfor;?>
</div>
</div>
<div id="right_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="r_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="r_border_l"></div>
<div id="r_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="r_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="right_ccw">
<div id="cc2">
<?for($i=0;$i<1200;$i++):?>2 <?endfor;?>
</div>
</div>
<div id="bottom_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="b_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="b_border_l"></div>
<div id="b_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="b_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="bottom_ccw">
<div id="cc3">
<?for($i=0;$i<200;$i++):?>3 <?endfor;?>
</div>
</div>
</div>
</div>
</body>
</html>
css: css Code: Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }
Sorry I tried to get the HTML to highlight too but it wouldn't work. Screenshot of how it looks: http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg Screenshot of how it should look (done with my hacky workaround): http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg Similar TutorialsIE absolutely sucks (pun intended). Or mayhaps its the developer. In any case: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#top_main_content { width: 955px; }
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
margin: 0;
padding: 0;
text-align: right;
border-top: 1px solid #f1f1f1;
height: 243px;
width: 266px; } /* end #top_main_content ul */
#top_main_content ul li {
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
color: #686868;
width: 266px;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
margin-right: 5em;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { padding-right: 1.5em; }
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content #rotating {
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1;
text-align: right; } /* end #top_main_content img */
#default_div {
position: absolute;
visibility: visible; } /* end #default_div */
#div_a {
position: absolute;
visibility: hidden; } /* end #div_a */
#div_b {
position: absolute;
visibility: hidden; } /* end #div_b */
#div_c {
position: absolute;
visibility: hidden; } /* end #div_c */
#div_d {
position: absolute;
visibility: hidden; } /* end #div_d */
#div_e {
position: absolute;
visibility: hidden; } /* end #div_e */
#div_f {
position: absolute;
visibility: hidden; } /* end #div_f */
#div_g {
position: absolute;
visibility: hidden; } /* end #div_g */
#div_h {
position: absolute;
visibility: hidden; } /* end #div_h */
#div_i {
position: absolute;
visibility: hidden; } /* end #div_i */
</style>
</head>
<body>
<div id="logo_search">
<div id="logo_container">
</div>
</div>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
<div id="rotating">
<div id="default_div"><img src="images/test_image_main.gif" alt="" /></div>
<div id="div_a"><img src="images/test_image_a.gif" alt="" /></div>
<div id="div_b"><img src="images/test_image_b.gif" alt="" /></div>
<div id="div_c"><img src="images/test_image_c.gif" alt="" /></div>
<div id="div_d"><img src="images/test_image_d.gif" alt="" /></div>
<div id="div_e"><img src="images/test_image_e.gif" alt="" /></div>
<div id="div_f"><img src="images/test_image_f.gif" alt="" /></div>
<div id="div_g"><img src="images/test_image_g.gif" alt="" /></div>
<div id="div_h"><img src="images/test_image_h.gif" alt="" /></div>
<div id="div_i"><img src="images/test_image_i.gif" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In any case what will happen with this code is when a user rolls over a link (not shown in code), the visibility of the corresponding div will change. All of this renders and works correctly in FireFox, Opera, and Safari. In IE 7 and 6, it works correctly, but does not render correctly. In IE 7, the images (all 687 x 243) seem to be indented 687 pixels. In IE 6, there is a lot of trailing border in the links and that is pushing the images below the menu and will then probably have the same problem IE 7 is having. Thoughts? Edited to add that I solved the IE 7 problem by removing text-align: right; from the #top_main_content #rotating div. I still have the IE6 problem however. Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/ heres the css Code:
html, body {height: 100%;}
body {
background: #beb185 url('images/bggrad.gif');
background-attachment: fixed;
font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 0px;
margin: 0px;
text-align: left;
}
/*==============================
Layout
==============================*/
div#container {
background: #fff;
width: 961px;
height: 100%;
margin: 0px;
padding: 0px;
text-align: left;
float: left;
z-index: 1;
}
div#page {
height: 100%;
float: left;
z-index: 2;
}
#left-col {
background: #121212 url('images/leftcolgrad.jpg');
color: #fff;
width: 190px;
min-height: 100%;
height: 100%;
padding: 0px 5px 0px 5px;
border-right: 10px solid #13496e;
float: left;
z-index: 3;
}
#right-col {
color: #000;
width: 750px;
height: 100%;
padding: 0px;
border-right: 1px solid #121212;
float: right;
z-index: 4;
}
div#header {
background: #fff;
width: 740px;
height: 78px;
margin: 0px;
padding: 0px 5px;
text-align: left;
float: left;
z-index: 5;
}
div#content {
background: #fff;
width: 740px;
padding: 0px 5px 0px 5px;
float: left;
clear: both;
z-index: 6;
}
div#footer {
position: absolute;
bottom: 0px;
background: #000 url('images/footergrad.jpg');
width: 740px;
height: 180px;
padding: 0px 5px 0px 5px;
float: left;
/*clear: both;*/
z-index: 7;
}
K...I have an absolutely positioned toolbar in a search tool page. There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content! Anyone know what I can do about this? It's a little...crappy. MPEDrummer I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div. If you go to http://www.refinethetaste.com/html/ At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right. im creating ajax auto complete text box but my div tag does not appear correctly in IE7 (ok on firefox) appearing behind the textbox IE7 screen shot URL Firefox screen shot URL codes are HTML Code:
<tr>
<td align="left">PHONE BRAND</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlBrand" class="au_cm_pnl"></div>
</div>
</td>
</tr>
<tr>
<td align="left">PHONE MODEL</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
</div>
</td>
</tr>
CSS Code:
.au_cm_loc
{
text-align:left;
position:relative;
}
.au_cm_pnl
{
position:absolute;
top:25px;
left:0px;
border:1px solid #39AAE4;
width:204px;
max-height:50px;
overflow-x: hidden;
overflow-y: auto;
visibility:hidden;
background-color:#FEFEFE;
z-index:500;
}
.au_cm_pnl a
{
display:block;
padding:5px 0px;
width:95%;
margin:-7px 0px;
color:Blue;
text-decoration:none;
padding-left:5%;
background-image:url(../Images/textbox_bg.jpg);
}
.au_cm_pnl a:hover
{
background-image:url(../Images/button_bg.jpg);
color:#FFFFFF;
}
please help me to fix this problem thank you chathura Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks Hi I have an image positioned on my page with this Code: .notpos {
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
height: auto;
width: auto;
left: 170px;
top: 20px;
}
The problem is when a different screen resolution is used the image moves .......... can anyone help please? I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column. Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px; Here is my HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
height: 100%;
}
.left-col {
position: absolute;
width: 150px;
top: 130px;
left: 0px;
padding-left: 3px;
z-index: 2;
}
.right-col {
position: absolute;
width: 150px;
top: 120px;
right: 0;
padding-right: 3px;
z-index: 1;
overflow: hidden;
clear: both;
}
.center-col {
position: relative;
min-width: 300px;
min-height: 100%;
height: 100%;
z-index: 3;
top: 140px;
margin: 0px 160px 150px 170px;
text-align: left;
padding:5px;
}
.heading {
position: absolute;
left: 0px;
top: 0px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 0px;
z-index: 3;
padding-top: 25px;
margin: 0px;
display: block;
}
.footer-bar {
width: auto;
padding:10px 3px 3px 0px;
clear: both;
background-color: gray;
vertical-align: bottom;
text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
center content<br />
center content<br />
center content<br />
center content<br />
</div>
<div class="left-col">
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
left content<br /><br />
</div>
<div class="right-col">
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
right content<br /><br />
</div>
<div class="heading">
head content
</div>
<div class="footer">
<div class="footer-bar">page bottom</div>
</div>
</body>
</html>
Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)? The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON. How can I adjust my CSS so both versions work? GOOD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
BAD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
THANKS I've read the threads about making text and background colors appear at the bottom of a page. What I'd like to do is force an IMAGE to the page bottom, and on top of THAT, include a phone number, and active email link. Is this doable ? I've tried so many ways. The image always works, but while the text and email are OK in an 800x600 res, they jot up for a 1024x768. Anyone have experience with this ? Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence. Hello All. I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe BUT, I have ran into a problem on myspace with code. I am trying to create a linkable image I believe it would be called. <a href="website url"> <img src="wouldnt let me post url's" /> </a> Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.) I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also. I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage. Thanks in advance to anyone who replies, and also apologies for my incredible noobness. -Connor Hey guys, This is my first time messing with absolute positioning, and I am in a pickle. I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up. Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site. Check out the page and source code he URL Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes): Code: <style type="text/css">
<!--
div#links a:hover {text-decoration: none;
background: #698165;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
padding: 5px; margin: 10px; z-index: 100;
color: white;
font: 10px Verdana, sans-serif; text-align: justify;}
div#links a:link { text-decoration: none;
color: white;}
div#links a:visited { text-decoration: none;
color: white;}
-->
</style>
then the code is activated by: Code: <a href="#">Mowing <span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care. Our services will provide you with a beautiful, healthy landscape that will turn heads. If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes. </span> </a> Any help would be greatly appreciated, and thanks in advance! I think the best way to explain this is by example, if you go to this page: http://lifeyouwant.workinprogress.co.uk/how-we-work You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right. Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox). I would prefer to try not to use a hack for IE7. ANy ideas would be great! Thanks. Hello everyone, I would like to ask for any and all help on solving this problem I am having. Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html. You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks! Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it? Hi everyone, I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow. The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look) It renders perfectly in Firefox, safari and google chrome. Go figure. I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit: w w w . goscoblog. com/test/index.html Thanks In advance Good morning, I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out. I have a floating bar with all of my navigation links in it which is absolutely defined with the following code: Code: #headerBar { /* sets position of floating bar */
position: absolute;
clear: both;
top: 57px;
left: 0px;
padding: 0px;
margin: 0px;
width: 100%;
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
}
The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be. The url is: http://www.alokw.com Any suggestions? Thanks! |
|||||||