|
CSS - Stop Me From Using Tables
Hi there,
I really want to not use tables as I want to embrace CSS. Though this problem is killing me as everything looks fine in IE but not in FF, which is never the case so need help. I require a title (two sentences overlapping each other) to be aligned side by side with a image. Basically i've got one image and two paragraphs in a container div, the paragraphs are positioned absolute but in FF the look as though they are being place relative ie bottom right of image? My html file looks like: <body> <div id="MainContainer"> <div id="HeaderContainer"> <img src="images/logo.gif" alt="Opix UK" name="Logo"/> <p id="Title1">Photo products for the contemporary home..</p> <p id="Title2">or business!</p> </div> </div> </body> My CSS looks like: body{ padding:0; margin:0; margin-top: 5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:center; } div#MainContainer{ width: 960px; text-align: left; margin-left: auto; margin-right: auto; } div#HeaderContainer{ border: 1px solid Blue; font-size: 19px; font-style: italic; font-weight: bold; } p#Title1{ border: 1px solid Red; color: #333333; position: absolute; left: 100px; top: 5px; z-index: 1; } p#Title2{ border:1px solid Red; color: #0066CC; position: absolute; left: 450px; top: 17px; z-index: 2; } Any help much appreciated? Similar TutorialsI'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Hey guys, So i'm working on the site www. paulfenton .tk. My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt. if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how... Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow. Any help or ideas would be great, let me know if you have any questions. -Paul I have the code below that basically builds a css based horizontal menu; menu items are floated into the menu bar, then in the same menuvbar, a small search box follows (floated). At this point I'd like to stop elements being floated, but IE7 has some troubles because it keeps floating the next element, regardless the clear:both or float:none issued. No problem in FF 3.5 and Opera 9.64 Can someone help? Just cut the following code and save in a document.htm and test with your favorit browser and IE7. 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>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}
h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}
a:hover img.sided {
border-color:#A6A6A6;
}
a {
color:#2970A6;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.fixed{
clear:both;
}
/* static END */
/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}
#header {
width:100%;
margin-top:20px;
height:300px;
}
#content{
width:1020px;
}
#footer{
}
#bitmaplogo{
margin-left:20px;
background:url("http://farm1.static.flickr.com/37/112944254_3f5212215a.jpg") no-repeat left bottom;
height:100%;
}
#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}
#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}
#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}
#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}
#cse-search-box{
float:left;
padding:3px 10px;
}
#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}
.cse-box-style{
height: 20px;
width: 250px;
}
/* header END */
.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}
.spacer{
background:url(img/spacer.gif);
}
.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}
.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}
.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}
.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div>
<div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a>
<div id="searchbox">
<div id="search-box-text">
Search
</div>
<form id="cse-search-box" action="http://mydot.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="fixed"></div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>
<div class="fixed"></div>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this? Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this: Code: <div id="main-image-container">
{if $theme.imageCount > 0}
<div id="slideshow-controls">
<ul id="control-buttons">
<li><button id="controls-left">
<img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
</button></li>
<li><button id="controls-play">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
</button></li>
<li><button id="controls-right">
<img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
</button></li>
</ul>
</div>
<div id="sliding-frame">
<div id="loading">
{g->text text="Loading Album..."}
</div>
<p><img src="{g->theme url="images/blank.png"}"
alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
</div>
imagine this set up, div floated left, div floated right, div in between. the middle div has text that wraps and expands the page to the required height. however in firefox, because it expands to the width of the entire page before wrapping, the middle div drops below the two floated divs. i cant fix it's width as it needs to expand to fill the middle width depending on the size of the browser (the left/rigtht floats have fixed width) if i put one or both of the floated divs within the middle div the text then wraps around the floats and doesnt remain in a column, setting each floats height to 100% is unsatisfactory, adding a further text container div only reproduces the original problem. so it's a 3 column problem, but also it isnt. going to have a sandwich and try to attack it again, looking for fresh ideas. ultimatley i might have to go back and use a big table. ouch! edit: just to clarify, the left and right floats are fixed width and height, the middle div can change width to accomodate the browser width, and height to accomodate the text. I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped thanks in advance Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code 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" /> <title>Free UFC PPV</title> <style type="text/css"> body { background-color: #CCC; font-family: Tahoma; } #holder { width: 75%; padding: 10px; border: 1px solid; text-align: left; } #img{ background-image:url(images/header.png); } #login { width: 100%; font-family: Tahoma; font-size:15px; text-align: right; color: Black; border: 1px solid; } </style> </head> <body> <center> <div id="holder" style="width:75%"> <a href="index.php"> <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a> <div id="login" style="100%" > <form action=""> Login:<input name="userlog" type="text" /> Password:<input name="passlog" type="text" /> <input name="btn_sub" type="button" value="Login" /> </form> </div> </div> </center> </body> </html> What can I do to stop resizing? Hi all, I was wondering if there was a way to stop an image stretching in all browsers. I'm creating a gallery for my web page. I've got a load of thumbnails that when you click on one it will display the picture lower down on the page. This image is in a DIV with a set width. The trouble is that some images could be small, some could be large. Using CSS I've tried setting the width to something like the size of the containing DIV. This works great for large pics but stretches the smaller pics (obviously it would as I was specifing a width). I then tried max-width. Hurrah, in Firefox this works great. Of course, Internet Explorer being the pile of poop that it is, my images come out huge and throw off the layout. is there an easy way to ensure that my small images stay small but my large images don't grow too large for both IE & Firefox using CSS? If not I guess I'll use PHP to determine the image size and go from there. I am constructing a new website and need help preventing the header text from overflowing. I have tried combinations of overflow:hidden; but does not seem to work. The site is here. Advice on how I can prevent overflow for FFox, IE6/7 appreciated. Hi I'm new to CSS and this site, so please excuse any stupidity in the code and presentation of this query! The following CSS (error.css): Code: body {background-color: white;}
title {font-style: italic}
thead {font-weight: bold; border-bottom: thick double}
td {width: 5em; border-bottom: thin solid black; border-top: thin solid black; background-color: green}
table {border: hidden}
.Xaddress {border-left: thin solid black; font: 1em bold; color: yellow; text-align: left}
.title {border-left: thin solid black; text-align: center; border-bottom: thick double; border-top: hidden}
caption {font: 2em bold}
#intro {position: static; color: black; height: 20%; backXground: #cccccc;}
#addresses { position: relative; left: 5em; height: 60%; color: black; height: 10em;}
#table1 {position: absolute; top: 4em; left: 1em; z-index: 10; color: black; background: #cccccc;}
#table2 {position: absolute; top: 5em; left: 6em; z-index: 9; color: black; background: #ff00ff;}
#footer {position: static; z-index: 10; color: black; height: 20%; backXground: #00ff00;}
and xhtml (error.html): 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" lang="en" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="error.css" />
<script type="text/javascript">
//Bring a span element and descendents to the front and send its span siblings and their descendents to the back
function bringToFront(id)
{
if (id != null) {
if (document.getElementById(id)) {
//Send all parent's descendents in spans to the back
var span=document.getElementById(id).parentNode.getElementsByTagName("SPAN");
var s=0;
var c=0;
while (span[s]) {
setzIndexOfBranch(span[s],9);
s++;
}
//bring id and descendants to the front
setzIndexOfBranch(document.getElementById(id),10);
}
}
}
//Set the zIndex of a node and all of its descendants
function setzIndexOfBranch(node,value)
{
if (node.style != undefined) {
node.style.zIndex = value;
}
var c=0;
while (node.childNodes[c]) {
setzIndexOfBranch(node.childNodes[c],value);
c++;
}
}
function parseXML()
{
text="<root>";
text=text+"<heading>XML CSS HTML test</heading>";
text=text+"<table1data>"+"<table>"+
"<caption>"+
"First table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"</table><br/>Some text after table 1<br/>"+
"</table1data>"+
"<table2data>"+"<table>"+
"<caption>"+
"Second table"+
"</caption>"+
"<thead>"+
"<td class="title">Column1</td>"+
"</thead>"+
"<tr>"+
"<td>row1</td>"+
"</tr>"+
"<tr>"+
"<td>row2</td>"+
"</tr>"+
"<tr>"+
"<td>row3</td>"+
"</tr>"+
"<tr>"+
"<td>row4</td>"+
"</tr>"+
"</table><br/>How can I make these 2 tables appear inside the addresses fieldset ?<br/>"+
"<br/>How can I make the addresses fieldset always fill @60% of the height ?<br/>"+
"<br/>Note the size of each table will vary but can assume to be less than 6 rows.<br/>"+
"</table2data>";
text=text+"</root>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("table1").innerHTML=
xmlDoc.getElementsByTagName("table1data")[0].childNodes[0].nodeValue;
document.getElementById("table2").innerHTML=
xmlDoc.getElementsByTagName("table2data")[0].childNodes[0].nodeValue;
document.title=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="parseXML()">
<h1>Positioning test script</h1>
<span>
<fieldset id="intro">
<legend>header</legend>
<span id="to"></span><br/>
Header text
</fieldset>
<br/><br/>
<fieldset id="addresses">
<legend>addresses</legend>
<br>This is in the addresses fieldset</br>
<span id="table1" onclick="bringToFront('table1')"></span>
<span id="table2" onclick="bringToFront('table2')"></span>
<br>This is in the addresses fieldset...................................................................................and I would hope for it to appear beneath the tables above. Table 2 may not exist.</br>
</fieldset>
<br/><br/>
<fieldset id="footer">
<legend>footer</legend>
This is all
<br/><br/><br/><br/><br/><br/><br/><br/>
footer text<br/>
<br/>Down to here.
</fieldset>
</span>
</body>
</html>
produces overflow in the middle fieldset. I would like the tables in this fieldset to be contained by the fieldset. It's prettier. That would also make the footer fieldset visible, so it's essential ! Can anybody help please ? Also the text which should appear below these tables. Any idea why it isn't positioned inline after the tables end ? Thanks. At http://alphaworks.co.uk/problems/non-flowing/ how can I get the three "Address line x" lines to line up under one another and not flow back to the left under the "Address:" label? Thanks, Geoff Hi all, I might be having a moment, but I am having a problem with a CSS inheritance of a property. I have a sidebar "left_float_column", which normally has a few divs inside it and hence i have a CSS property "left_float_column div" as below. Code: .left_float_column div {
min-height:200%;
border:solid #000 1px;
text-align:center;
background-color:#CADDEE;
margin-top:1%;
padding:2%;
}
Inside this I now want to place another div with a different color background, so i created another class selector: Code: .pdfdownload {
background-color: white;
}
When a div is nested as follows: Code: <div class='left_float_column'> <div class='pdfdownload'>Hello</div> </div> The background color of the pdfdownload is #CADDEE, not white? Is that right? Why is it right? never had this problem before. I can correct it by renaming the '.pdfdownload' line '.left_float_column .pdfdownload', but its not ideal as I wanted to use the pdfdownload multiple times on some pages in different places. I have checked using opera "inspect element" and it shows it is using the parents color, instead of the childs. I just don't understand I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available. Is this possible? I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content. Any help appreciated thanks! I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used. I'm guessing the style is being cached somewhere? If so can anyone advise how to stop this? thanks p.s. Its just a basic refresh that sorts it out, not a *hard* refresh. ================== I've come up with a fix of sorts. If I write the style out dynamically within the div itself each time then my problem is solved. I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding: Code: font-size:8pt; but that didn't work. Hi all, I have a header on my page with a fixed background image. IT is a picture of grass with a sign on the far left side of the screen. Its width is set to auto, which is working well. I also have an absolutely placed picture ontop of the header and positioned to be at 50% of the page width. However, when I shrink the page too much the absolute pic goes over the sign on the fixed background pic. Is there any way to stop my absolute pic 130px from the side of the page?? here is my css PHP Code: body { text-align:center; width:100%; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px; padding:0px; } #header{ margin:0px; padding:.3em 0; height:118px; width:100%; background-image:url(images/head_back.jpg); background-repeat:no-repeat; } #header img{ position:absolute; top:4px; left:56%; margin-left:-166px; } ... and relevant code: PHP Code: <body> <div id="header"> <img src="images/title.jpg" /> </div> Seems so simple, I just cant get it. I have tried min-width on numerous settings and nothing has worked I couldn't really figure out what keywords to be searching for... I am more than happy to read a previous post if anyone could direct me. Here's my problem: Attempting to layout a page using divs and no tables. I have a stylized left-side border that I have to use, and I would like it to stretch. It a symmetrical drawing, so I cut it in half in Photoshop, and then saved a 1 pixel slice from the center as a third picture. (So I now have 3 images: one for the top, middle, and bottom) The Top and Bottom images should stay the same height, and the Middle image will be repeated to make the border stretch with the window. My div layout is as follows: <div id="divTopLeft" style="top:0em;left:0em;position:absolute;display:block;background-image:url('images/bg_TopLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> <div id="divMiddleLeft" style="top:300px;bottom:300px;left:0em;position:absolute;background-image:url('images/bg_MiddleLeft.gif');background-repeat:repeat-y;width:151px;z-index:0;"> </div> <div id="divBottomLeft" style="bottom:0em;position:absolute;left:0em;vertical-align:bottom;display:block;background-image:url('images/bg_BottomLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> This works great as long as the window is at least 600 pixels high. If the window becomes shorter than that, "divBottomLeft" overlaps "divTopLeft" (and maybe Middle as well, but I can't tell). I thought that specifying the same z-index would make them run into each other instead of overlapping, but no such luck. Can anyone help? Thank you! -jim Hi All, A seemingly simple problem which has me pulling my (already thinning) hair out: I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right. I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right. Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it. I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can. It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle. Thanks, all. rjgfx Hi all, My CSS problem: The text links in my right colum ("#iiicolright" - in a 3 col layout) is overlapping the content that appears below in on page.... Here is my CSS for the 3 col layout: Code:
#iiicolleft {
position: absolute;
left: 0;
width: 120px;
margin: 0;
padding: 0 0px 0 10px;
text-align: right;
}
#iiicolcontent {
margin: 0 200px 0 120px;
padding: 0;
}
#iiicolright {
position: absolute;
right: 0;
width: 200px;
margin: 0;
padding: 0 10px 0 0;
}
Here is the HTML: Code: <body> <div id="top_container"> <ul id="top_menu"> ... ... <!-- MAIN NAV MENU GOES HERE --> ... ... </ul> </div> <h1> </h1> <div id="iiicolleft"> <h5>[home]</h5> </div> <div id="iiicolright"> <h6>Current Projects:</h6> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link One</a></p> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Two</a></p> <p><img src="img/link.gif"><a href="#" title="test" target="_blank" class="mbiguism" alt="test">Link Three</a></p> </div> <div id="iiicolcontent"> <p>Default home contents go he Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <a class="mbiguism" href="foo.html">aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <h2> </h2> <h3> </h3> <div id="bot_container"> <ul id="bot_menu"> ... ... <!-- SECONDARY NAV MENU GOES HERE --> ... ... </ul> </div> </body> I use H1 H2 and H3 as horizontal-rule seperators... here is the CSS: Code:
h1 {
font-size: 15px;
padding: 0;
margin: 0;
line-height: 15px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 15px;
}
h2 {
font-size: 5px;
padding: 0;
margin: 10px 0 2px;
line-height: 5px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 5px;
}
h3 {
font-size: 5px;
padding: 0;
margin: 0 0 5px;
line-height: 5px;
background: url(../img/bg_3x7.gif) repeat-x left center;
height: 5px;
}
Does the overlap have to do with the absolute postioning of #iiicolright? I would greatly appreciate any suggestions anyone may have! Thanks in advance! Cheers Micky |
|||||||