|
CSS - Problem Aligning Layers - Please Help!!!
I am trying to solve a problem I have had for a very long time. I have ignored it but I just can't do that any longer ... The code works well in FF but not in IE.
The problem: I want to display three layers side by side (left to right). The left and right layers show just fine but the middle layer jumps down to just under the higher of the two other layers, effectively making my site not IE friendly. The code (taken from my site): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Working with divisions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
div#content
{
margin-left: 205px;
margin-right: 205px;
width: 610px;
margin-top: 0px;
line-height: 150%;
background-color: white;
border: 1px solid red;
}
div#more
{
float: right;
width: 160px;
margin: 0;
padding: 4px 0px 8px 4px;
background-color: red;
color: #fff;
border: 1px solid white;
}
div#container
{
/* background-image: url(../nav_col_base.jpg); */
/* background-repeat: repeat-y; */
background-color: yellow;
border: 1px solid black;
}
div#container2
{
/* background-image: url(../more_col_base.jpg);
background-repeat: repeat-y;
background-position: right; */
border: 1px solid black;
background-color: gray;
}
#verMenu
{
padding-top: 2px;
float: left;
margin-left: 0px;
font: bold 11px Verdana, sans-serif;
width: 195px;
background-color: green;
border: 1px solid white;
}
div#banner
{
color: #fff;
background-color: #333;
border-bottom: 1px solid #000;
}
div#banner h1
{
margin: 0;
padding: .3em 0 .3em .5em;
font-size: 2.2em;
font-weight: normal;
}
#cleardiv
{
clear: both;
height: 1em;
}
</style>
</head>
<body>
<div id="banner">
<h1>This is my banner division</h1>
</div>
<div id="container">
<div id="container2">
<div id="vermenu">
This is the VERMENU division. Lets see what happens if I add a whole lot of content to this deivision. I am expecting the content division to drop down and start displaying just as this content ends.
</div>
<div id="more">This is the more division. I also notice that in FF the width for the content division does not overlap over this division while in IE it does.</div>
<div id="content">This is the content division. I cannot figure out why this division drops to just under the larger of the other two divisions. If you add lines to any of the two divisions, this division shifts down ...</div>
<div id="cleardiv"></div>
</div>
</div>
</body>
</html>
I have color coded the layers to simplify identifying the layers and where they show. What am I doing wrong? Thank you all in advance for your assistance. Jose PS: I cannot post a link otherwise, I would have provided you with one for my website. Similar Tutorialsi seem to be having trouble aligning two css layers i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done? also the HTML is wrapping around the image, any way i can stop this? as the images should be along the bottom below the image. the link and data are as follows: http://wakefieldfhs.co.uk/stu/users/njacques/9 and one last thing i just noticed while testing all this, its not displaying the footer and ending data (this only occurs on my server, not on my test server. :S Code: (
layout->doExifBorder();
echo("EXIF INO HERE");
$layout->endBorder();
$layout->endBorder();
footer(); // for future refernce footer.inc include the end div's!!
?>)
(this would equate to: ) Code: <div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div> <div class="footer" align="center"> <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div> </div> </body> </body> </html> Hi I have a div (#adcontainer), in that there are some boxes (#adcontainer .ad). Inside every box there should be a small image at top 5, left 5. At top 5, right 5 there should be a price-flash-image. Everything works perfect besides the price-flash.. I can't manage to position correctly. The css I'm using is: Code:
#adContainer { position: relative; width: 155px; float: left; margin: 0; margin-left: 5px; padding: 0;}
#adContainer .ad { width: 100%; margin: 0; padding: 0px; border: 1px solid black; background-color: white; }
#adContainer img { position: relative; display: block; top: 0px; left: 0px; padding: 3px; z-index: 1; }
.price { position: absolute; width: 68px; height: 40px; top: 5px; right: 5px; background-image: url('../images/price_flash_small.png'); font-size: 13pt; font-weight: bold; text-align: center; line-height: 40px; display: block; z-index: 99; }
HTML: Code: <div id="adContainer"> <div class="ad"><img src="shop/images/products/48602_small.jpg" width="94" height="100"><div class="price">24,90</div></div> <div class="ad"><img src="shop/images/products/4258_small.jpg" width="100" height="57" alt="Flow"><div class="price">78,00</div></div> <div class="ad">ad 3</div> </div> Please help! Hi, http://sinistersuicide.net/lolastour12.html is the page I'm working on. Problems: - I tried using absolute positioning on my div layers but if the page was viewed on a lower resolution than what I'm using 1440x900 the div layers would move from where they were positioned. - So I transfered over to relative positioning and all was fine till I noticed a huge gap at the bottom of the page. The code for the page is: 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">
<html>
<head>
<title>lolastour1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.centre {
width: 406px;
height: 260px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -480px;
left: 15px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
.samplemovie {
width: 500px;
height: 340px;
overflow:auto;
margin-right: auto;
margin-left: auto;
position: relative;
top: -1105px;
left: 20px;
z-index: 50;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.3");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script></stylesheet>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#faabcb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<!-- Save for Web Slices (lolastour1.psd) -->
<table width="921" height="1301" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="17">
<img src="images/lolastour1_01.jpg" width="920" height="209" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="209" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/lolastour1_02.jpg" width="60" height="910" alt=""></td>
<td rowspan="2">
<a href="http://">
<img src="images/Join.jpg" width="102" height="47" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_04.jpg" width="93" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Members.jpg" width="172" height="41" border="0" alt="Members Log In Here"></a></td>
<td rowspan="3">
<img src="images/lolastour1_06.jpg" width="66" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Gallery.jpg" width="138" height="41" border="0" alt="Gallery"></a></td>
<td colspan="2" rowspan="3">
<img src="images/lolastour1_08.jpg" width="89" height="553" alt=""></td>
<td colspan="2">
<a href="http://">
<img src="images/Videos.jpg" width="144" height="41" border="0" alt="Videos"></a></td>
<td colspan="3" rowspan="5">
<img src="images/lolastour1_10.jpg" width="56" height="910" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_11.jpg" width="172" height="512" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_12.jpg" width="138" height="512" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/lolastour1_13.jpg" width="144" height="869" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/lolastour1_14.jpg" width="102" height="863" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="506" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/lolastour1_15.jpg" width="24" height="357" alt=""></td>
<td colspan="7">
<a href="http://">
<img src="images/Join-17.jpg" width="521" height="40" border="0" alt="Join"></a></td>
<td rowspan="2">
<img src="images/lolastour1_17.jpg" width="13" height="357" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/lolastour1_18.jpg" width="521" height="317" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="317" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/lolastour1_19.jpg" width="34" height="181" alt=""></td>
<td colspan="14">
<a href="http://">
<img src="images/Join-21.jpg" width="863" height="68" border="0" alt="Join"></a></td>
<td colspan="2" rowspan="2">
<img src="images/lolastour1_21.jpg" width="23" height="123" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/lolastour1_22.jpg" width="863" height="55" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="55" alt=""></td>
</tr>
<tr>
<td colspan="12">
<img src="images/lolastour1_23.jpg" width="703" height="26" alt=""></td>
<td colspan="3" rowspan="2">
<a href="http://www.sinistersuicide.net/lolastour2.html">
<img src="images/Page-2-Tour.jpg" width="172" height="58" border="0" alt="Page 2 Of Tour"></a></td>
<td rowspan="2">
<img src="images/lolastour1_25.jpg" width="11" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/lolastour1_26.jpg" width="310" height="32" alt=""></td>
<td colspan="3">
<a href="http://">
<img src="images/Webmasters.jpg" width="259" height="32" border="0" alt="Webmasters"></a></td>
<td colspan="4">
<img src="images/lolastour1_28.jpg" width="134" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="34" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="89" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="127" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td></td>
</tr>
</table>
<div class="centre">
<a href="images/freeimage1.jpg" rel="prettyPhoto" title=""><img src="images/freeimage1thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage2.jpg" rel="prettyPhoto" title=""><img src="images/freeimage2thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage3.jpg" rel="prettyPhoto" title=""><img src="images/freeimage3thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage4.jpg" rel="prettyPhoto" title=""><img src="images/freeimage4thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage5.jpg" rel="prettyPhoto" title=""><img src="images/freeimage5thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage6.jpg" rel="prettyPhoto" title=""><img src="images/freeimage6thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage7.jpg" rel="prettyPhoto" title=""><img src="images/freeimage7thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage8.jpg" rel="prettyPhoto" title=""><img src="images/freeimage8thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage9.jpg" rel="prettyPhoto" title=""><img src="images/freeimage9thumb.jpg" width="90" height="120" alt="" /></a>
<a href="images/freeimage10.jpg" rel="prettyPhoto" title=""><img src="images/freeimage10thumb.jpg" width="90" height="120" alt="" /></a>
</div>
<div class="samplemovie">
<script type='text/javascript' src='swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','450','300','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://sinistersuicide.net/lolacasting.flv');
so.addVariable('controlbar','none');
so.addVariable('autostart','true');
so.addVariable('icons','false');
so.addVariable('stretching','fill');
so.write('mediaspace');
</script>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
Okay, I am attempting to make my first-ever layout, (all by myself!! I'm so proud.) but, seeing as this is my first real attempt, I've run into some problems. My latest seems pretty simple, yet I can't seem to find a solution... The page in progress is here. Currently I have made divs as a css layout for my content, and have a fixed background. The problem: I would like it if my content didn't go over the top part of the background; the moon and the brushes/text I plan to add. Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane? I don't know if I'm at all on the right track with this, so I'd appreciate your thoughts and suggestions. Thanks. My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other ok... im making a site with CSS... this is my css code - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; font-family: verdana; font-size: 12px; text-align: justify; color:white; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } and this is my code for my PHP page, which reads the css - Quote: <html> <head> <link rel="stylesheet" type="text/css" href="fula.css" /> </head> <body> <div id="head"><img src="image/head.jpg"></div> <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated! to view the page this problems on - http://www.outlawz.frihost.net/fula/test2.php The site is located at: http://68.41.210.39:8081/empcoBeta/index.html Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE? The css is as follows: #under { width:84%; height:1%; background-color:#1E77D3; position:absolute; top:5%; left:16%; } #mainleft { width:35%; background-color:white; vertical-align:top; position:absolute; top:10%; left:22% } #mainright { width:40%; background-color:white; vertical-align:top; position:absolute; top:10%; right:2% } body { font-family: sans-serif; font-size: 12px; } .indented1 { padding-left: 5pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } .indented2 { padding-left: 10pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } a:link {color: #17507e; font-size: 2; text-decoration: none; } a:active {color: blue; font-size: 2; text-decoration: none;} a:visited {color: #17507e; font-size: 2; text-decoration: none;} a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;} #column { width:1%; height:81%; background-color:#B4CCEB; position:absolute; top:0%; left:15%; } #leftsidebar1 { width:100%; height:5%; background-color:#B4CCEB; position:absolute; top:0%; left:0%; } #leftbar1 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:5%; left:0%; } #leftsidebar2 { width:16%; height:2%; background-color:#B4CCEB; position:absolute; top:40%; left:0%; } #leftbar2 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:41%; left:0%; } #leftsidebar3 { width:16%; height:1%; background-color:#B4CCEB; position:absolute; top:81%; left:0%; } #credits { position: absolute; left:1%; bottom:20%; } .tcredits { text-align: left; font-size: 9px; font-family: sans-serif; } I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php All I'm looking for is something like: <div class="field">Name</div> <div class="result">Jeremy</div> Where the size of the left div is set and the right div can extend to the right of the page, but not drop underneath. I had: .field{ float:left; width:150px; } result{ float:left; } Which works fine until there's a really long name on the right. In cases like this, I still want that div to stay over to the right, but instead it drops down. So I want: Name: .... Here's a really long name. Here's a really long name. .............. Here's a really long name. Here's a really long name. .............. Here's a really long name. But I'm getting: Name: Here's a really long name. Here's a really long name. Here's a really long name. Here's a really long name.Here's a really long name. The right "column" breaks down to the line below. Of course this is easy to solve using tables. Any suggestions for Divs? (never mind, i dont need layers anyways) Sorry, pls delete this! I have put together a page with a left floating text box that text wraps around the top, right and bottom. It was going pretty well, thanks to some help I have already received, but I am having a problem with a bulleted list alignment. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS or HTML to prevent the list bullets from bumping into the text box, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the width of the text box. It does not render at 160px in Firefox, but does in IE. http://s125392025.websitehome.co.uk/layout.html I'm working on a CSS layout(mind that this is my first time working with CSS, if something isn't right tell me, because I want to learn it right the first time), it's 2 columns, a main body and a subnav. But I can't get the subnav to align properly with the main body. I'm not too sure how to do this, I've tried it in a X,Y fashion but I'm not sure if I was doing that right. Please help. Edit: Finally Found it, nm. Hi guys .. Kinda stuck again. I've just obtained a menu which I liked, and for some reason, using the 960 gridsystem i cant get it to align correctly under the space which will eventually be a textlogo Here's the index.html: PHP 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" /> <link rel= "stylesheet" href="css/960/960.css" /> <link rel= "stylesheet" href="css/960/text.css" /> <link rel= "stylesheet" href="css/nav.css" /> <title>FIXA DATORN!</title> </head> <body> <div class="container_16"> <div id="logo" class="grid_4 push_5"><p><h3>FIXA DATORN!</h3></p> </div> </div> <nav> <div class="menu"> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">Portfolio</a></li> <li><a href="#" title="Jobs">Blog</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </div> </nav> </body> </html> and nav.css: PHP Code: /* Nav */ nav{ bottom:414px; min-width:450px; position:absolute; right:10%; text-align: center; } nav ul li{ border-bottom:5px solid #68a99f; float:left; font-family:'BebasNeueRegular', sans-serif; font-size:18pt; height:60px; line-height:60px; list-style-type:none; margin:0 7px; text-align:center; width:120px; } nav ul li:hover{ border-bottom-color:#0076a3; transition-property:border-bottom-color; transition-duration:0.5s; -moz-transition-property:border-bottom-color; -moz-transition-duration:0.5s; -webkit-transition-property:border-bottom-color; -webkit-transition-duration:0.5s; } nav ul li a{ color:#eee; display:inline-block; height:100%; width:100%; text-decoration:none; } nav ul li a:hover{ color:#999; text-decoration:none; transition-property:color; transition-duration:0.5s; -moz-transition-property:color; -moz-transition-duration:0.5s; -webkit-transition-property:color; -webkit-transition-duration:0.5s; } .current_page_item{ border-bottom-color:#af4932; } The image that is set to align right keeps moving down some. Is there anyway to get it to be level with the image that's left aligned without using a negative margin or tables? The problem occurs in Netscape 7 and IE 6. Mysteriously enough it is displayed correctly in Opera 7. Code: #title {
margin-left: 170px;
background: url(./imgs/title_mdl.gif) repeat-x;
width: auto;
height: 40px;
}
#title span {
font-size: large;
text-align: center;
}
#title img {
width: 82px;
height: 40px;
}
Code: <div id="title"><img src="./imgs/title_lft.gif" alt="" align="left"><span>Hello</span><img src="./imgs/title_rgt.gif" alt="" align="right"></div> Hey, I'm working on a site (URL) and I am having some problems. I made a class in CSS: Code:
.middle {
background-attachment: fixed;
background-image: url(images/midtop.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
and am applying that class to the middle table. When I view it in IE, it looks fine, but in mozilla (I'm using firefox) it looks like it is positioning it at 0, 0 of the page, not the table. If I change background-position: 0px 0px; to background-position: 139px 0px; then it looks fine in mozilla, but not IE. Does anyone know how to fix this? (Or why it is happening) Thanks~ Hi Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
label
{
text-align: left;
display: block;
}
div.search_cell
{
display: inline;
}
</style>
<div id="control_panel">
<form action="http://test.at" METHOD="post">
<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>
<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>
<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>
<div class="search_cell">
<span class="smalltext">of</span>
</div>
<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>
<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>
</form>
</div>
</div>
Ok, I have this: Code: #background {
position:relative;
width:600px;
height:480px;
z-index:1;
background-image:"/background.jpg";
border-style:none;
color:#000000;
} <div ID="background">Whatever</div>
But it doesn't work.. why? have I got this right....any selector effectively becomes a layer once I add a 'position' and a 'z-index'? Thanks Chris |
|||||||