|
CSS - Problem Aligning Images Inside Div.
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> Similar Tutorialshttp://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
Hi all, I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area. The first is this one . Everywhere that WAS white, I want to be this. Then, on TOP of that, and encapsulating the text itself, I want this one . Now, I thought I had this right, but it all isn't working. In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two. In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone. Any help would, as always be greatly appreciated! Chris PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css I am new to CSS and just experimenting with a site. I have however hit a but of a brick wall. Now the following div tags work fine in Firefox but in IE they don't align right. This is the syle info Code: div#info {
float: left;
width: 210px;
margin-top: 0px;
border-right: 1px dashed blue;
font-family: Arial;
min-height: 350px;
}
.infobox {
width: 220px;
height: 280px;
background: transparent url(images/userinfo.jpg) no-repeat top left;
text-align: left;
padding-left: 10px;
}
.userbox {
padding-top: 40px;
padding-left: 55px;
font-size: 20px;
}
.questionbox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
.scorebox {
padding-top: 60px;
padding-left: 55px;
font-size: 20px;
}
Now the following code works fine in both firefox and ie. It aligns everything up. Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> Question 1 <div class="scorebox"> 3 out of 5 </div> </div> </div> However i am trying to insert some javascript into the "questionbox" tag like this Code: <div id="info"> <div class="infobox"> <div class="userbox"> Username </div> <div class="questionbox"> <form name="questionnumber"> <input type="text" name="question" size="5" readonly="true" value=""></input> <script language="JavaScript" type="text/javascript">test()</script> </form> </div> <div class="scorebox"> 3 out of 5 </div> </div> </div> Then all the alignment stays the same in firefox. However in IE the text box is moved down slightly and therefore doesn't align. Any ideas Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly I have #sidebar on my website and within the sidebar which contains two smaller divs (Calender and Archive) inside it which are styled by #sidebar div When I put these two divs in, Calender wasn't where I wanted it to be, at the very top of the sidebar. It was a few pixels lower. To fix I went to #sidebar div and changed the top margin to -1px and now it's at the very top. Is this a sensible fix? I've checked in Chrome 2.0, Safari 4.0, Firefox 3.5 and IE 8 and it looks to be OK but there's a nagging feeling in my head that I shouldn't have needed to do this. Here is the HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
<div id="content">jkjk</div>
<div id="sidebar">
<div id="calender"><h3>Calender</h3>
<p>fjkfjdklfjkljfsk</p></div>
<div id="active"><h3>Archive</h3>
<p>fjdkfjkfjk</p></div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>
And here is the main.css: Code: @charset "utf-8";
/* Main style */
body { padding: 0; margin: 0; background-color: #000; text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.wrapper {
text-align: left;
margin: 0 auto;
width: 750px;
}
/* Header */
#header {
background-color: #996666;
margin-top: 35px;
margin-bottom: 5px;
height: 90px;
padding: 0;
border: solid 1px #F00;
}
/* Nav Bar */
div#navcontainer {
background-color: #996666;
border: 1px solid #F00;
margin-bottom: 5px;
}
div#navcontainer ul {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
}
div#navcontainer ul li {
display: inline;
margin-left: -4px;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: #000;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
color: #FFF;
}
#active a {
}
/* Main Content */
#content {
background-color: #996666;
float: right;
width: 500px;
border: 1px solid #F00;
margin-bottom: 5px;
}
/* Sidebar Styles */
#sidebar {
background-color: #996666;
float: left;
width: 243px;
border: 1px solid #F00;
}
/* The Divs that house Calender and Archive */
#sidebar div {
background-color: #800040;
}
/* The 'Calender' and 'Archive' text */
#sidebar div h3 {
background-color: #FF0;
font-size: 85%;
text-align: center;
text-decoration: underline;
margin-top: -1px; /* Remove this line and the calender 'box' should drop a few pixels from the top */
}
/* Footer */
#footer {
background-color: #996666;
border: 1px solid #f00;
clear: both;
padding: 0;
margin: 0;
}
If someone could take a look that would be great. I've commented it up for you so you should be able to find the divs easily. The code has been verified. I'm not a great web designer by any stretch of the imagination. I'm learning as I go along so hopefully someone with more knowledge can help me out. Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images- Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size. -Images displayed correctly- This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right. Code:
/* Set the style for image(s) displayed */
img.left
{
margin-left: 10em;
}
img.center
{
margin-left: 3em;
img.right
{
margin-left: 3em;
}
Hope that makes sense, Gerbill Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... After putting a js slideshow at the top of the page I am having trouble getting anything to right of it. Every defaults to the next line. Any tips? Thank you! tinassweetshop.com Hi! I'm trying to implement an image drop-down menu. Everything seems to be working but there is an element that is pushing my second image button down and I can't seems to figure where it's coming from. It seems to be my link that is causing it but i'm stumpped. I've set up a test page so you can see what is happening. the site is at test .sylvaindelisle .com Thanks for taking the time to take a look. Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below? http://efetuncel.win.aplus.net/ryt/new/ Code:
#rcontent{
float:right;
width:490px;
padding:0px;
}
#rcontent .category{
float:left;
width:240px;
height:120px;
margin:30px 0px 0px 5px;
background: url(images/bg_home_category.gif)
}
#rcontent .category img{
float:left;
vertical-align:middle;
}
<div id="rcontent">
<div class="category">
<img src="images/home_categories_gb.gif" alt="" />
</div>
<div class="category">
</div>
<div class="category">
</div>
<div class="category">
</div>
</div>
Hello, I am trying to get two images aligned inside a table cell as a top and bottom background element. I know with CSS you can't have two background elements, so I was playing with relative and absolute positioning. Unfortunately, I was unsuccessful, as the positioning wouldn't refer to the diameter of the cell. I have an image demonstrating what I am looking for. The shaded area represents the two images (a bottom and top quote) that I want to align to the top and bottom. I can't simply make this a single image since the information on the left will be different heights. I also noted the table layout in the lower example if there are any questions in that regard. http://www.forma3.com/stuff/css_question.png Thanks so much! Okay here's what my HTML basically looks like: <div id="container"> <div id="top"></div> <div id="middle"><div id="text"></div></div> <div id="bottom"></div> </div> Now, the top, middle and bottom have a separate background image, that when they are all placed UNDERNEATH each other makes up an image. This works out fine in IE, but in Firefox with the CSS I have set for it, it puts a white line underneath each image (kinda like there's an imaginary <p> in between them, but there's not). Can anyone help if this is a basic problem? Or do I need to post my CSS in order to get this figured out? I have a div with blue background on the page below. It is is currently displaying horitzontally across the screen, with the images inside doing the same. I would like to vertically align it along the right side of the page, next to the text (which would be on the left). I'd also like the 'Property Search' within the blue, aligned below the photo of the house. Can anyone help me out? I'd like to KNOW how to do it and not have someone just send me an updated style sheet. Thanks. Styles attached. http://mulqueenconsulting.com/galese/ Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here 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? 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 (never mind, i dont need layers anyways) Sorry, pls delete this! 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. |
|||||||