...

View Full Version : aligning?



Saavan
12-18-2005, 12:48 PM
i have made this layout, coded it by hand i have made all the content areas repeat, and the problem is when i have enough text in my content and navigation areas my layout looks fine but when i dont have enough text it all splits up, can someone help me with this please?
Enc: CSS, HTML and screenshots

HTML:

<html>
<head>
<title>Untitled-1</title>
<link href="styletest.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="keywords" content="Graphics, Saavan, Wallpapers, Layouts, Tutorials, Blog, Junk, Design Simplicity, DesignSimplicity, Linksout, PNG's, Transparent PNG's, Tables, iFrames, DivLayers, Div Layers">
<META NAME="description" content="Looking for top notch graphics, layout, wallpapers, transpraent PNG's well look not further than designsimplicity.">
<META name="distribution" content="Global">
<META name="rating" content="General">
</head>
<body background="images/bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- ImageReady Slices (Untitled-1) -->
<br><table width="600" height="681" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

<tr><td colspan="6"><img src="images/index_01.gif" width="600" height="21" alt=""></td></tr>
<tr><td colspan="6"><a href="http://designsimplicity.net"><img src="images/index_02.gif" alt="" width="600" height="130" border="0"></a></td></tr>
<tr><td colspan="6"><img src="images/index_03.gif" width="600" height="17" alt=""></td></tr>
<tr>

<td background="images/index_04.gif">&nbsp;</td>
<td background="images/index_05.gif" valign="top">

<!-- CONTENT GOES HERE-->

Your content here well hello there my name is saavan and i own design simplicity Your content
here well hello there my name is saavan and i own design simplicity Your content here well hello
there my name is saavan and i own design simplicity Your content here well hello there my
name is saavan and i own design simplicity Your content here well hello there my name is
saavan and i own design simplicity Your content here well hello there my name is saavan and
i own design simplicity Your content here well hello there my name is saavan and i own design
simplicity Your content here well hello there my name is saavan and i own design simplicity</td>

<td background="images/index_06.gif">&nbsp;</td>

<td colspan="2" background="images/index_07.gif" valign="top">

<!-- NAVIGATION GOES HERE-->

Your content here well hello there my name is saavan and i own design simplicity Your content
here well hello there my name is saavan and i own design simplicity Your content here well hello
there my name is saavan and i own design simplicity Your content here well hello there my
name is saavan and i own design simplicity Your content here well hello there my name is
saavan and i own design simplicity Your content here well hello there my name is saavan and
i own design simplicity Your content here well hello there my name is saavan and i own design
simplicity Your content here well hello there my name is saavan and i own design simplicity
Your content here well hello there my name is saavan and i own design simplicity Your content
here well hello there my name is saavan and i own design simplicity Your content here well hello
there my name is saavan and i own design simplicity Your content here well hello there my
name is saavan and i own design simplicity Your content here well hello there my name is
saavan and i own design simplicity Your content here well hello there my name is saavan and
i own design simplicity Your content here well hello there my name is saavan and i own design
simplicity Your content here well hello there my name is saavan and i own design simplicity<br><br></td>

<td background="images/index_08.gif">&nbsp;</td>

</tr>
<tr>
<td colspan="4"><img src="images/index_09.gif" width="555" height="20" alt=""></td>

<td colspan="2"><img src="images/index_10.gif" width="45" height="20" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="390" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="128" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="19" height="1" alt=""></td>
</tr>
</table><br>
<!-- End ImageReady Slices -->
</body>
</html>

CSS:


body {background-image: url(images/bg.gif); cursor: default; text-align: justify}
body,td {font-family: verdana; font-size: 8pt; color: #7D7D7D; text-align: justify }
h1 {color: #C591A1; text-align: right; border-bottom: dashed 1px #DEC0CA; margin-bottom: 8px; font-size: 8pt}
b {color: #C591A1}
a:link,a:visited {color: #966E7A; text-decoration: none; cursor: default}
a:hover {color: #C591A1; cursor: default; text-decoration: underline }


SCREENSHOTS:

http://img202.imageshack.us/my.php?image=enoughtext5cl.jpg

http://img202.imageshack.us/my.php?image=notenoughtext2nz.jpg

_Aerospace_Eng_
12-18-2005, 06:53 PM
Can you post a link? It would be better since it requires for us to actually view the images. Get a free host if you have to.

Osiris
12-18-2005, 08:39 PM
I don't think he can. If you'll notice in the screenshots, the URLs are file:// paths, not http:// paths... Probably means he doesn't have a web server.

_Aerospace_Eng_
12-19-2005, 01:24 AM
There are many free ones that can be used temporarily. :)

Saavan
12-19-2005, 07:25 AM
http://www.geocities.com/saavan_m_hirani/Copyofindex.html

here is a link to a preview hope it helps a =)

_Aerospace_Eng_
12-19-2005, 09:30 AM
Try it like this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled-1</title>
<style type="text/css">
body {
background:#FFFFFF url(images/bg.gif);
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#7D7D7D;
text-align:center;
}
a img {
border:0;
}
#container {
width:600px;
margin:auto;
text-align:justify;
}
#header {
line-height:0px;
font-size:0;
}
h1 {
color:#C591A1;
text-align:right;
border-bottom:dashed 1px #DEC0CA;
margin-bottom:8px;
font-size:8pt;
}
b {
color: #C591A1;
}
a:link,a:visited {
background:none;
color:#966E7A;
text-decoration:none;
}
a:hover {
background:none;
color:#C591A1;
text-decoration: underline;
}
#main {
background:#FCFCF2;
color:#7D7D7D;
border-left:1px solid #AFB170;
border-right:1px solid #AFB170;
padding:0 19px;
}
#content {
margin-right:155px;
padding-right:19px;
}
#right {
width:155px;
float:right;
}
.clear {
font-size:1px;
line-height:0px;
clear:both;
}
#footer {
clear:both;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="Graphics, Saavan, Wallpapers, Layouts, Tutorials, Blog, Junk, Design Simplicity, DesignSimplicity, Linksout, PNG's, Transparent PNG's, Tables, iFrames, DivLayers, Div Layers">
<meta name="Description" content="Looking for top notch graphics, layout, wallpapers, transpraent PNG's well look not further than designsimplicity.">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div><img src="images/index_01.gif" width="600" height="21" alt=""></div>
<div><a href="http://designsimplicity.net"><img src="images/index_02.gif" alt="" width="600" height="130"></a></div>
<div><img src="images/index_03.gif" width="600" height="17" alt=""></div>
</div>
<div id="main">
<div id="right"><!-- NAVIGATION GOES HERE-->
Your content here well hello there my name is saavan and i own design simplicity Your content
here well hello there my name is saavan and i own design simplicity Your content here well hello
there my name is saavan and i own design simplicity Your content here well hello there my
name is saavan and i own design simplicity Your content here well hello there my name is
saavan and i own design simplicity Your content here well hello there my name is saavan and
i own design simplicity Your content here well hello there my name is saavan and i own design
simplicity Your content here well hello there my name is saavan and i own design simplicity<br><br>
</div>
<div id="content"><!-- CONTENT GOES HERE-->
Your content here well hello there my name is saavan and i own design simplicity Your content
here well hello there my name is saavan and i own design simplicity Your content here well hello
there my name is saavan and i own design simplicity Your content here well hello there my
name is saavan and i own design simplicity Your content here well hello there my name is
saavan and i own design simplicity Your content here well hello there my name is saavan and
i own design simplicity Your content here well hello there my name is saavan and i own design
simplicity Your content here well hello there my name is saavan and i own design simplicity </div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer"><img src="images/index_09.gif" width="555" height="20" alt=""><img src="images/index_10.gif" width="45" height="20" alt=""></div>
</div>
</div>
</body>
</html>

Saavan
12-19-2005, 04:33 PM
thanks alot for that dude solved it but anyway that you can put another bit in my CSS so that i can have a different font for the header and such?

NAVIGATION

something like that and one where i can put an image underneath the writing like:

http://img270.imageshack.us/my.php?image=headers0ug.png

or just use an image like that for the header


Thanks

Saavan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum