|
CSS - Problem With Absolute Positioning Next To A Floated Item
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 Similar TutorialsI really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css. I got a header (140px height), main container and a footer. The main container consists of three areas (from left to right): - a fixed sized column with some illustration (48px) - main contents column, (all available space) - a fixed sized column with newsfacts and such (301px) I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link. I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px. Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is. Here's a screenshot fragment in Firefox, the only browser in which I got it to work: http://www.stack.nl/~rem/linksbox.jpg I've got the following code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welkomstpagina</title>
</head>
<body>
<div id="startpageLinksBox">
<div id="links">links</div>
<!-- <ul>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
</ul>
-->
</div>
</body>
</html>
with the following CSS file. Code: body {
margin: 0;
width: 100%;
background: url("../../images/common/bg_news.gif") repeat-y top right;
}
div#links {
display: inline;
height: 20px;
border: solid 1px #000000;
float: right;
width: 200px;
margin-left: 48px;
margin-right: 0px;
}
div#startpageLinksBox {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #e0e0e0;
height: 20px;
position: absolute;
left: 48px;
top: 140px;
margin-right: 302px;
}
div#startpageLinksBox ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
border: solid 1px #000000;
height: 20px;
}
div#startpageLinksBox ul li {
float: right;
border: solid 1px #e0e0e0;
padding: 0px 5px;
}
a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }
Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem. It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems. I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing. 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 IE 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. 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. 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 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 First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled. I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower. Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left. Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML. I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now Thanks in advance! 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? Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? 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 Hi all, I want to place a piece of text directly below an item that has a 'position: absolute' style on it, but when I put a div in there for the new text, it just places the text at the top of that absolute positioned item. Is there any way to get past this apart from floating the item? Cheers. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! 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. 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! 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. 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? 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 |
|||||||