PDA

View Full Version : Design Help


superkangaroo
12-03-2009, 01:23 AM
Hello Everyone,

:confused:

I need help with some designing. I am using a "liquid wrapper" to hold the DIVs. I am trying to add some pics to the sides of the div. I tried using the absolute positioning on the pics but they don't stay exactly with the all the DIV's when the window is resized, even though the pics are in the "wrapper"

Thanks

edbr
12-03-2009, 01:31 AM
they should , post your coe or provide a link

superkangaroo
12-03-2009, 02:13 AM
i dont have my website uploaded yet. So is it ok to just post the code, without pics?

edbr
12-03-2009, 02:22 AM
yes just put it in code tags

superkangaroo
12-03-2009, 02:50 AM
Here is the code, if you see room for improvement please let me know thanks.

<!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>Index</title>
<script type="text/javascript">
<!--
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_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_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>
<style type="text/css">

div.wrapper {
margin-left : 10%;
margin-right : 10%;
}

#top {
position:relative;
width:780px;
height:208px;
z-index:1;
left: 0px;
top: 0px;
}


#dec{
width: 760px;
height: 120px;
}

#left{
position:absolute;
left: 7px;
top: 233px;

}

#right{
position:absolute;
left: 884px;
top: 235px;

}


#middle {
position:relative;
width:735px;

z-index:1;
left: 0px;
top: 0px;
}



</style></head>

<body bgcolor="#0000FF" onload="MM_preloadImages('Images/buttonOver.png')" >
<div class="wrapper">
<center>

<!-- WRAPPER -->

<!-- SPACE
<table>
<tr>
<th width="750" height="20" bgcolor="#9933CC"> Space </th>
</tr>
</table>
Space End -->




<!-- TOP -->
<div id="top" style=" background-color: #0F0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 6px solid #090; " >
<tr>
<th width="774" height="200" bgcolor="#00FF00" >

<!-- Logo -->
<table width="200" height="200" align="left">
<tr>
<th width="200" height="200">
<img src="" alt="" name="Logo" width="200" height="200" id="Logo" />
</tr>
</table>
<!-- Buttons -->

<table width="550" align="top">
<tr>
<th width="91" height="65" scope="col"><span class="moveUp">Archieves</span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('arch','','Images/buttonOver.png',1)"><img src="" name="arch" width="91" height="65" border="0" id="arch" /></a></th>

<th width="91" scope="col" background="Images/button.png">Games<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('games','','Images/buttonOver.png',1)"><img src="" name="games" width="91" height="65" border="0" id="games" /></a></th>
<th width="91" scope="col" background="Images/button.png">Art<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('art','','Images/buttonOver.png',1)"><img src="" name="art" width="91" height="65" border="0" id="art" /></a></th>
<th width="91" scope="col" background="Images/button.png">Random<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rndm','','Images/buttonOver.png',1)"><img src="" name="rndm" width="91" height="65" border="0" id="rndm" /></a></th>
<th width="91" scope="col" background="Images/button.png">News Blog<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','Images/buttonOver.png',1)"><img src="" name="news" width="91" height="65" border="0" id="news" /></a></th>
<th width="91" scope="col" background="Images/button.png">About<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','Images/buttonOver.png',1)"><img src="" name="about" width="91" height="65" border="0" id="about" /></a></th>
</tr>
</table>

<!-- Banner -->
<table >
<tr>
<th width="550" height="109" ><img src="" width="550" height="109" /></th>
</tr>
</table>
<!-- ConTainer End -->

</th>
</tr>
</div>

<!-- Top End -->

<!-- DECORATION -->
<div>

<!-- left -->
<div id="left">
<img src="" width="120" height="120" />
</div>

<!--middle-->
<div id="dec" style="background-color:#9900FF" align="center">
<img name="decoration" src="" width="750" height="120"/></div>

<div id="right">
<img src="" width="120" height="120" />
</div>

</div>
<!-- DECORATION -->


<!-- MIDDLE -->
<div id="middle" style=" background-color: #0F0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 6px solid #090; ">
<tr>
<td width="735" height="580">

<!-- COMIC -->

<table width="735" height="580" bgcolor="#00FF00">
<tr>
<th width="596" scope="col" background="Images/comic.png"></th>

<!-- Comic END -->
<!-- side LINKS -->

<th width="138" scope="col">
Comics

<table width="138" height="526" border="1">
<tr>
<td width="147"><img name="" src="" width="138" height="120" alt="" /></td>
</tr>
<tr>
<td><img name="" src="" width="138" height="120" alt="" /></td>
</tr>
<tr>
<td><img name="" src="" width="138" height="120" alt="" /></td>
</tr>
<tr>
<td height="118"><img name="" src="" width="138" height="120" alt="" /></td>
</tr>


</table></th>


<!-- side LINKS END -->
</tr>
</table>

</td>
</tr>
</div>
<!-- Middle END -->

<!-- space -->
<!-- space END -->



</center>
</div> <!-- WRAPPER -->
</body>
</html>

edbr
12-03-2009, 02:57 AM
change the wrapper to position elative

div.wrapper {
margin-left : 10%;
margin-right : 10%;
position:relative;
}

edbr
12-03-2009, 02:59 AM
i dont like to see tables used for layout so thats what i would improve on

superkangaroo
12-03-2009, 05:41 AM
I changed it to relative but when i span it out it gets unorganized. Can you explain what you mean i dont like to see tables used for layout

Thanks for helping

Corrosive
12-03-2009, 06:04 AM
Read this under 'stuff you should know'

http://www.dreamweaverclub.com/forum/showthread.php?t=28741

Tables are outdated and troublesome. Learn CSS

superkangaroo
12-03-2009, 06:43 AM
Your post is very helpful :cool: