Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css help debug

Status
Not open for further replies.
ecalbert

ecalbert

Programmer
Dec 25, 2004
61
IL
the following is my code for my page.
It is displaying wrong

for each row (2 rows) -- it should display the blue bar with the words upcoming....
then the black description underneath --
and underneath that the row with 3 books...

then teh second row should repeat the same thing under it -- not on top of it.

can someone help me please??


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}


html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:0px}


.midle_txt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #477eb7;
text-decoration: underline;
}
.more_txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FF0000;
font-weight: bold;
cursor: hand;

}
.head_txt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
cursor: hand;
text-align:right;
}

.box {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
float: left;
}
.subheading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-align: justify;
font-weight: bold;
width: 465px;
padding-top:3px;
padding-bottom:3px;
display:block;
}
.bl_txt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
float: right;
}

.featuredheader {
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-image: url(images/e-com-24_11_06_104.jpg);
background-repeat: no-repeat;
height: 25px;
width: 465px;
font-weight: bold;
vertical-align: middle;
text-align:right;
}
.floatl{


float:left;
}
.floatr{
float:right;
}
.topbar table{


background-color:#F00532;

}
.book{
width:160px;
float:left;
}
.tright{
padding-right:25px;
text-align:right;
}
.line{
display:block;
margin-bottom:20px;
}
.searchbox{
width:110px;
}

.cat_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
background-image: url(images/category_bar.jpg);
font-weight: bold;
}
.sub_cat {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-image: url(images/e-com-24_11_06_52.jpg);
background-repeat: no-repeat;
float: right;
text-align: center;
font-weight: bold;
vertical-align: top;
background-position: left bottom;
cursor: hand;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div class=line>
<div class=featuredheader> Upcoming g Publishing House Titles </div>
<div class=subheading>g Publishing House is Israel's leading Publisher
of Books about Israel and the Jewish People in English and these are
our newest titles. If you have a book you would like to see published
contact us</div>

<div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
</div>
</div>

<div class=line>
<div class=featuredheader> Upcoming g Publishing House Titles </div>
<div class=subheading>g Publishing House is Israel's leading Publisher
of Books about Israel and the Jewish People in English and these are
our newest titles. If you have a book you would like to see published
contact us</div>

<div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
<div class=book><img alt="g" src="images/e-com-24_11_06_55.jpg" width="71" height="110"><br>
<font class="midle_txt">this ist tilte of book</font>
<div class=tright><strong class="more_txt">More Info </strong></div>
</div>
</div>
</div>


</body>
</html>
 
Sort by date Sort by votes
Why not rearrange the contents of the second "line" div so that "featuredheader" and "subheading" appear below the div that contains the "book" divs. Then simply add the following to your "line" class.
Code: 
clear:both;

Clive
Runner_1Revised.gif

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096
 
Upvote 0 Downvote
thanks -- that helps except in ie. the books then don't appear centered under the line but to the left of it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
807
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
633
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
685
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
220
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top