PDA

View Full Version : Image postioning in CSS



Rikjs
Apr 3rd, 2007, 06:58 PM
I'm sure this is all very simple to you pros. In reference to the image:

I have three parts. The top part you can see already in place behind the banner. The top part and banner are exactly where I want them. The middle part which is the thin dark strip sitting right at the top over the top part, and an end part which isn't on there yet.

I want this middle part to start right below the top part, repeat itself down until it's provided a background for the page content (in this case, that little form), and then place the end part wherever the last middle part is. This is what I have so far. Not forgetting the main question, feel free to chatise me on bad CSS and HTML, but suggest improvements while you do ;)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MusicStar</title>
<style type = "text/css">
body {
background-color: #586572;
color: white;
font-family: Arial;
margin: 0; padding:0;
}

#topDisplay {
position: absolute;
left: 18.25%;
}

#middleDisplay {
position: absolute;
left: 18.25%;

}

#banner {
position: absolute;
left: 38.25%;
top: 5%;
}

.musicForm {
border: thin solid white;
position: absolute;
left: 41.25%;
top: 40%;
text-align: center;
}

th {
border: thin solid black;
background-image: url('images/th.png');
background-repeat: repeat;
}

#maintext {
position: absolute;
left: 38.25%;
top: 40%;
text-align: center;
}

a:link, a:visited, a:active {
color: white;
text-decoration: none;
}

a:hover {
color: white;
text-decoration: underline;
}
</style>

</head>
<body>
<img src = "images/table-top.jpg" id = "topDisplay">
<img src = "images/table-middle.png" id = "middleDisplay">
<img src = "images/banner.png" id = "banner">
<table class = "musicForm">
<th>Search</th>
<form action = "servlet/assignment2.searchServlet" method = "get">
<tr><td>
<div>Category: <select name = "category">
<option value = "Classical">Classical</option>
<option value = "Country">Country</option>
<option value = "Jazz">Jazz</option>
<option value = "Hip-Hop">Hip-Hop</option>
<option value = "Pop">Pop</option>
<option value = "Rock">Rock</option>
</select></div>
</td></tr>
<tr><td>
<div>Max Price: <input type = "text" name = "maxPrice"></div>
</td></tr>
<tr><td>
<input type = "submit" name = "submit">
</td></tr></table>
</form>
</body>
</html>

tsutanai
Apr 4th, 2007, 03:14 AM
The full links for the images would be very helpful. I'll try my best to help (I'm not very advanced at this myself, but I think I can do it with the image URLs).