Menu
Hi all,
I’m having problems with my positioning of text and would really appreciate it if some of you guys could help.
My page looks fine in 1280×960 but when I view it in 1024×768 the text is somewhere else. I’ve tried using % instead of px but still can’t get it to work. I have a div box (#news) inside another div box (#container) and I want text inside the the #news (I’ve higlighted the place in red in the code). How do i go about it so the text stays in the same place in all resolutions? And also after that I would like to have thumbnails on the right under “recent work”.
Here’s a screenshot of my site, i want the text displayed left of the dotted line where it says news and the thumbnails on the right: [URL=”http://img71.imageshack.us/img71/7444/layoutideavolatile02up3.jpg”]http://img71.imageshack.us/img71/7444/layoutideavolatile02up3.jpg
[COLOR=”Red”]
CSS code:
body {
margin-top: 0;
margin-bottom:0;
text-align: center;
}
#menubar {
width:964px;
height:29px;
margin: 0 auto;
padding-top: 10px;
margin: 0 auto;
}
#container {
width:964px;
height:670px;
margin: 0 auto;
}
#menu {
width:964px;
height:29px;
margin: 0 auto;
}
#news {
position:absolute;
width:150px;
height:29px;
margin: 0 auto;
float:left;
}
h1{
font-family: verdana, arial, sans-serif;
font-size: 9px
}
#box {
width:964px;
margin: 0 auto;
}
[COLOR=”Red”]
HTML code:
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
<html xmlns=”
<head>
<title>VOLATILE ARTWORKS</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel= “stylesheet” href=”va.css” type=”text/css”>
<script language=”JavaScript” type=”text/JavaScript”>
<!–
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//–>
</script>
<link href=”va.css” rel=”stylesheet” type=”text/css” />
<link href=”va.css” rel=”stylesheet” type=”text/css” />
<link href=”va.css” rel=”stylesheet” type=”text/css” />
</head>
<body bgcolor=”#000000″ bgproperties=”fixed” onload=”MM_preloadImages(‘img/over_root.gif’,’img/over_about.gif’,’img/over_photography.gif’,’img/over_artwork.gif’,’img/over_contact.gif’,’img/over_links.gif’)”>
<div id=”box”>
<div id=”header” align=”center” class=”topmargin”> <img src=”img/header.jpg” align=”top” border=”0″ id=”header”>
</div>
<div id=”menubar” align=”center” style=”background-image:url(img/menubar.jpg)”>
<div id=”menu”> <a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘root’,”,’img/over_root.gif’,1)”><img src=”img/root.gif” name=”root” width=”35″ height=”20″ border=”0″ id=”root” /></a>
<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘about’,”,’img/over_about.gif’,1)”><img src=”img/about.gif” name=”about” width=”43″ height=”20″ border=”0″ id=”about” /></a>
<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘photography’,”,’img/over_photography.gif’,1)”><img src=”img/photography.gif” name=”photography” width=”82″ height=”20″ border=”0″ id=”photography” /></a>
<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘artwork’,”,’img/over_artwork.gif’,1)”><img src=”img/artwork.gif” name=”artwork” width=”56″ height=”20″ border=”0″ id=”artwork” /></a>
<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘Image6′,”,’img/over_contact.gif’,1)”><img src=”img/contact.gif” name=”contact” width=”52″ height=”20″ border=”0″ id=”Image6″ /></a>
<a href=”#” onmouseout=”MM_swapImgRestore()” onmouseover=”MM_swapImage(‘links’,”,’img/over_links.gif’,1)”><img src=”img/links.gif” name=”links” width=”39″ height=”20″ border=”0″ id=”links” /></a>
</div>
</div>
<div id=”container” align=”center” style=”background-image:url(img/content.jpg)”>
<div id=”news”> <font size=”1″ face=”Verdana, Arial, Helvetica, sans-serif”>
[COLOR=”Red”][SIZE=”5″]HERE I WANT MY TEXT
</font> </div>
</div>
</div>
</body>
</html>