|
Begginer: problems with positioning
12-04-2008, 08:14 PM
|
Begginer: problems with positioning
|
Posts: 1
Name: Dmitry
|
There is all fine in FF but Opera and IE is mistakes, Opera gives me an ugly view..
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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquafresh, like mentos - the fresh maker.</title>
<meta name="keywords" content="lalalala" />
<link rel="icon" type="image/png" href="favicon.png"></link>
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/pngfix.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(function(){$(document).pngFix();});
</script>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<![endif]-->
</head>
<body>
<div id="content">
<!-- Header -->
<div id="header">
<div align="left">
<table width="100%" border="0" cellspacing="0">
<tr>
<td width="60%" rowspan="2"><a href="index.html"><img src="images/logo.gif" alt="Aquafresh" width="149" height="60" border="0" /></a></td>
<td width="40%" height="32"><div align="right"><a href="index.html"><img src="images/home.gif" id="homebtn" border="0" width="32" height="7" alt="HOME" /></a><br /></div></td>
</tr>
<tr>
<td><div align="right"><img src="images/logo2.gif" alt="Advancing the science of daily oral health" width="295" height="31" border="0" /> </div> </td>
</tr>
</table>
</div>
</div>
<!-- Menu -->
<div id="menu" align="center">
<table width="920" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="114"><a href="#" target="_self"><img src="images/buttons/academy.gif" alt="The Academy" width="114" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="71" ><a href="#" target="_self"><img src="images/buttons/news_over.gif" alt="News" width="71" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="108" ><a href="#" target="_self"><img src="images/buttons/oralhealth.gif" alt="Oral Health" width="108" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="143" ><a href="#" target="_self"><img src="images/buttons/clinicalresearch.gif" alt="Clinical Research" name="menu_academy" width="143" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="121" ><a href="#" target="_self"><img src="images/buttons/patientfocus.gif" alt="Patient Focus" width="121" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="123" ><a href="#" target="_self"><img src="images/buttons/practicefocus.gif" alt="Practice focus" width="123" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="140" ><a href="#" target="_self"><img src="images/buttons/congressnetwork.gif" alt="Congress Network" width="140" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
<td width="93" ><a href="#" target="_self"><img src="images/buttons/products.gif" alt="Products" width="93" height="25" border="0" /></a></td>
<td width="1"><img src="images/separator.gif" alt="" width="1" height="25" /></td>
</tr>
</table>
</div>
<!-- Left side -->
<div id="left"></div>
<!-- Right side -->
<div id="right">Content for id "w" Goes Here</div>
<!-- Main content -->
<div id="main">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td height="700px"> </td>
</tr>
<tr>
<td height="45px"><img src="images/mainfoot.gif" alt="" width="100%" height="45" border="0" /></td>
</tr>
</table>
</div>
<div id="mainfoot"></div>
<!-- Footer -->
<div id="footer" align="center">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="footertable">
<tr>
<td><div align="center"><img src="images/gsklogo.png" class="png" alt="GSK Logotype" width="140" height="29" align="top" /></div></td>
<td><p align="center" class="footerlinks"><img src="images/separator_footer.gif" width="1" height="25" /></p> </td>
<td class="footerlinks"><div align="left"><span style="color:#FFFFFF"><a href="http://www.aquafreshscienceacademy.com/references.html" target="_self" class="footerlinks">References</a> | <a href="#" target="_self" class="footerlinks">About Aquafresh</a> | <a href="http://www.aquafreshscienceacademy.com/privacy_policy.html" target="_self" class="footerlinks">Privacy Policy</a> | <a href="http://www.aquafreshscienceacademy.com/terms_and_conditions.html" target="_self" class="footerlinks">Legal Notices</a></span><br/>
© 2007 GlaxoSmithKline group of companies. All rights reserved.</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS
Code:
html, head, body, div, span,
/*DOCTYPE, title, link, meta, style,*/
p, h1, h2, h3, h4, h5, h6, strong, em, abbr, acronym, address, bdo,
blockquote, cite, q, code, ins, del, dfn, kbd, pre, samp, var, br,
a, base,
img, area, map, object, param,
ul, ol, li, dl, dt, dd,
table, tr, td, th, tbody, thead, tfoot, col, colgroup, caption,
form, /*input, textarea, select, option, optgroup, button,*/ label,
fieldset, legend,
b, i, tt, sub, sup, big, small, hr
{
margin: 0px;
padding: 0px;
}
input, textarea, select, option, optgroup, button {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
body {
background-image:url(../images/bg.gif);
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #005493;
font-weight:normal;
}
#content {
background-repeat: repeat-x;
}
#content #menu {
background-image: url(../images/menubg.gif);
background-color: #41C2ED;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
height: 25px;
width: 99%;
}
#content #header #menu table {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#content {
height: 100%;
width: 100%;
left: 0px;
top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
overflow: visible;
position: absolute;
}
#content #header {
margin-right: 5px;
margin-left: 5px;
}
#content #footer {
background-repeat: repeat;
height: 50px;
width: 100%;
border-top-color: #FFFFFF;
border-top-width: 1px;
clear: both;
padding: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
}
.footerlinks {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
color: #FFFFFF;
padding-top: 0px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 5px;
text-decoration: none;
font-weight: normal;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
#content #left {
float: left;
width: 149px;
background-position: left top;
height: 745px;
background-color: #66CBEE;
background-image: url(../images/left.gif);
background-repeat: no-repeat;
}
#content #mainfoot {
clear: both;
height: auto;
width: auto;
}
#content #footer #footertable {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #FFF;
}
a:active {
color: #FFF;
}
.simpletext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-variant:normal;
font-weight:100;
color: #005493;
}
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #005493;
list-style-type: disc;
list-style-position: inside;
padding: 5px 0px 0px 0px;
}
#downloadbar {
position: absolute;
height: 100px;
width: 17%;
margin-top: 20%;
margin-left: -4%;
}
#content #main #maintext {
position: static;
height: 620px;
width: 95%;
top: 0px;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 7%;
}
.style2 {
color: #FF0000;
font-weight: bold;
font-size: 14px;
}
.style3 {
color: #1a2455;
font-weight: bold;
}
.style5 {font-size: 10px}
#right {
float: right;
height: 745px;
width: 153px;
background-color: #68CCEF;
background-image: url(../images/right.gif);
}
#main {
margin-right: 153px;
margin-left: 148px;
background-color: #FFFFFF;
height: 745px;
background-image: url(../images/mainbg.gif);
background-repeat: repeat-x;
}
#content #main table {
}
can somebody tell me where is a problem?
in IE that looks like this... and looks like margin-left & right 5px from #main but it doesn't
and in opera
Or there is any other ways? I need template like this but i dunno how to make it real  
 |
|
|
|
|
12-05-2008, 11:47 AM
|
Re: Begginer: problems with positioning
|
Posts: 10,016
Location: Tennessee
|
Get rid of the absolute positioning - it's not needed and will cause you headaches.
Get rid of the tables for layout - I'll never understand using divs and CSS and then sticking that inside a rotten old table.
Lots of FREE layouts can be found on the web to do what you want:
http://blog.html.it/layoutgala/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
12-08-2008, 05:56 AM
|
Re: Begginer: problems with positioning
|
Posts: 65
Name: hector
|
Yes, Absolute positioning is a disaster at the best of times...
Tables are obsolete for page design, but i find myself using them to quickly display grids of data as opposed to writing an ID & class style, sometimes its just quicker & more convenient.
|
|
|
|
|
12-08-2008, 08:38 AM
|
Re: Begginer: problems with positioning
|
Posts: 84
Location: Brussels, Belgium
|
Make a grid first, by deleting all tables, leaving divs alone.
Make no alignments in your div-tag, the only attribute you should use is ID.
In your CSS, you lay out every ID.
Then, try to position the divs relative to the parent divs, or first without positioning. Let them in the normal flow as much as possible.
Make everything in the content or menu with LI and P tags.
Try something like this:
<body>
<div id="content">
<div id="header">
<div>test</div>
</div>
<div id="menu" align="center">test</div>
<div id="left">test</div>
<div id="main">test</div>
<div id="right">test</div>
<div id="mainfoot"></div>
<div id="footer">test</div>
</div>
</body> |
|
|
|
|
« Reply to Begginer: problems with positioning
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
