On 11/29/06, Tal Liron <[EMAIL PROTECTED]> wrote:
> Hello. I'm a starter at Css and was building a this page-
> http://www.planetnana.co.il/liricooli/pagetry.html
> I've got two questions:
>
> 1. Could someone please explain to me why the text in the left column
> pushes the middle and the right columns down? What should I do to prevent it?
> 2. The grey "My Purchase" bar height's is too long. I've defined the
> length I want but it stretches without any seen reason.
i'm taking a guess, but i think the reason you might not have gotten
many replies is that your page is a bit of a hassle to help with. :)
the absolute positioning isn't needed for your page here, and you
might want to look at any of the very good three column layouts from
the wiki. there's a link to it in the footer of every email.
i took a little time to change your page a bit to get rid of the
absolute positioning and think that what i have is closer to what you
want. i didn't do any major html changes, but if you look at those
three column layout examples and decide to adopt one, you might need
to change the html more. i mostly just stripped the css down.
if you have any questions about the layouts, be sure to post them back
to the list. good luck!
-----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html><head><title> TEST PAGE</title>
<style type="text/css">
.body {
margin:10px 10px 10px 10px;
}
#header {
}
h1 {
font-size:36px;
padding-left:30px;
text-align:left;
}
#links {
width:98%;
background:#C0C0C0;
height:5px;
}
#left {
float: left;
width:24%;
}
#middle {
float: left;
width:74%;
}
#text {
border-right:1px solid black;
border-left:1px solid black;
float: left;
width: 59%;
}
#right {
width:39%;
}
#section {
border-right:3px solid black;
border-left:3px solid black;
clear: left;
}
#albums {
border-right:3px solid black;
border-left:3px solid black;
}
div.pic1, div.pic2
{
padding-left: 10px;
padding-top: 7px;
padding-bottom:7px;
}
</style>
</head>
<body>
<div id="pic"><img src="C:\Documents and Settings\liri\My
Documents\HTML\Rocknik\mgi_html\images\top_logo.gif" align="top"
width="80" height="50"></div>
<div id="header">
<h1>
Rocknik Header Strip
</h1>
</div>
<div id="links">
<h3>
My Purchase
</h3>
</div>
<div id="left">
<img src="C:\Documents and Settings\liri\My
Documents\HTML\Rocknik\mgi_html\images\skin_gtek_bkgd.jpg">
<br>
<p>Now Playing: 21st Century Schizoid Man gsgfddddd
dddggggggggggggg
ggggdfgdfgd fgdfgdfgdfgdjk ljkljl
<br>
<br>
fgdfgdfbdfbdf bdfbdfbfdbfdbfdbd fbfdbnddddddddd
</p>
</div>
<div id="middle">
<div id="text">
<h2>
King Crimson</h2>
<table>
<tr>
<td valign="top"><img src="C:\Documents
and Settings\liri\My
Documents\HTML\Rocknik\crimsonsmall.jpg"></td>
<td valign="top"><p>British
Progressiev-Rock band. some text
about the artist that isn't longer than 13 lines some text about the
artist that isn't longer than 13 lines some text about the artist that
isn't longer than 13 lines some text about the artist that isn't
longer than 13 linessome text about the artist that isn't longer than
13 lines some text about the artist that isn't longer than 13 lines
some text about the artist that isn't longer than 13 lines some text
about the artist that isn't longer than 13 lines some text about the
artist that isn't longer than 13 lines some text about the artist that
isn't longer than 13 lines some text about the artist that isn't
longer than 13 lines some text about the </p>
</tr>
</table>
</div>
<div id="right">
<div class="pic1">
<img src="C:\Documents and Settings\liri\My
Documents\HTML\Rocknik\Excheckout.JPG">
</div>
<div class="pic2">
<img src="C:\Documents and Settings\liri\My
Documents\HTML\Rocknik\msg.JPG">
</div>
</div>
<div id="albums">
<p>No Way</p>
</div>
</div>
<div id="section">
<table cellspacing="15">
<tr>
<td><a href="">Albums</a></td>
<td><a href="">compliations</a> </td>
<td><a href="">singles</a> </td>
</tr>
</table>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
