line up text

[junglist666]

basically im tryin to use css to get this
http://www.heathrowminicab.com/properties2.asp

to look like this
http://www.heathrowminicab.com/properties.asp

here is the code of the page..

<a href="edit_property.asp?ID=<%=rsProperties("id")%>"><img class="proppic" src="<%=rsProperties("out1")%>" /></a>
 		<a href="edit_property.asp?ID=<%=rsProperties("id")%>"><p class="topdesc"><u><%=rsProperties("address") & ", " & rsProperties("area")%></u></p></a>
		<p class="price" hspace="0"><%=formatCurrency(rsProperties("rent"))%> (p.c.m.)</p>

 		<p class="desc"><%=rsProperties("rooms") & ", " & rsProperties("type")%></p><p class="shortdescription"><%=rsProperties("shortdesc")%></p>
<br><br>

and here are the properties for the recpective items in the stylesheet

p.price {float:right; margin-top:0px; font-family:arial; color:#591409; font-weight:bold; font-size:9pt; float:right;}

p.topdesc {float:right; text-align:right; margin-top:0px; margin-left:5px; font-family:arial; color:#8A644A; font-size:10pt; font-weight:bold;}
p.desc {float:right; margin-top:0px; margin-left:12px; margin-bottom:5px; font-family:arial; color:#591409; font-size:10pt; font-weight:bold;}
p.shortdescription {float:right; margin-top:15px; margin-left:12px; font-family:arial; color:#000; font-size:8pt;}
img.proppic {margin-left:37px; border:0px; float:left;}

 

[BabyJeffy]

So, what have you tried so far?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[junglist666]

ok let me simplify the code and ill show you an exmaple in about 10 minutes or so

 

[Vragabond]

Looks to me you need to clear. Whichever is your element that starts the new item should have clear: both; specified to begin in a new line rather than continue floating.

 

[junglist666]

ok, i see what you mean but im not too sure how to accomplish it.. i have simplified things..

basically this code will loop for each record in my database (its asp)

here it is

<a href="edit_property.asp?ID=<%=rsProperties("id")%>">
	<img class="proppic" src="<%=rsProperties("out1")%>" /></a>
 	<a href="edit_property.asp?ID=<%=rsProperties("id")%>">
	<p class="topdesc"><u><%=rsProperties("address") & ", " & rsProperties("area")%></u></p></a>
	<p class="price" hspace="0"><%=formatCurrency(rsProperties("rent"))%> (p.c.m.)</p>
	<p class="desc"><%=rsProperties("rooms") & ", " & rsProperties("type")%></p>
	<p class="shortdescription"><%=rsProperties("shortdesc")%></p>

now it looks like this at the moment which is not quite it.
http://heathrowminicab.com/xx.asp

here is the css producing that mess

img.proppic {margin-left:37px; border:0px; float:left;}

p.price {float:right; margin-top:0px; font-family:arial; color:#591409; font-weight:bold; font-size:9pt; float:right;}

p.topdesc {float:left; text-align:left; margin-top:0px; margin-left:12px; font-family:arial; color:#8A644A; font-size:10pt; font-weight:bold;}

p.desc {float:left; text-align:left; margin-top:0px; margin-left:12px; margin-bottom:5px; font-family:arial; color:#591409; font-size:10pt; font-weight:bold;}

p.shortdescription {float:left; text-align:left; margin-top:15px; margin-left:12px; font-family:arial; color:#000; font-size:8pt;}

firstly i need the price on the same line as the address. but i have already aligned the picture to the left and the address to the right, so how do i get the price up there aswell

 

[junglist666]

can i just add that even now things look completely different in IE and in Firefox so if i get any help, i need to get them lookin as similar as possible in both.

 

[Vragabond]

To me it looks like price is not up there because there's no room for it. I would give the first anchor a class and clear that one, that should help with the alignment problems.

 

[junglist666]

http://heathrowminicab.com/xx.asp

if you look now, i have lined up the start of the address with the 2bed. is there now way to set the address to only be from the start of the 2bed to the end of the 3bed, then it will go on the next line and then i can fit the price to the right of that??

 

[Vragabond]

Of course it is. Just give your .topdesc appropriate width. Incidentally, it is not good to put paragraphs inside anchor tags. Former are block level elements and latter inline so that doesn't mix and match.

 

[ChrisHunt]

Hmmmmm....

Take a step back. Build up your page step-by-step, starting with the HTML (using hard-coded values), then the CSS, and finally the ASP to generate the text from the database.

I'd do it something like this, putting each property in its own <div>:

<div class="property">
  <a class="pic" href="#"><img src="house.jpg" alt=""></a>
  <span class="price">£100 (p.c.m)</span>
  <h2><a href="#">10 Downing Street</a></h2>
  <p class="desc">4 bedroom house</p>
  <p>Soon becoming vacant, here's hoping!</p>
</div>

You then style it something like this:

div.property {
   clear: both;
   overflow: auto;
}

.pic {
   float: left;
}

.price {
   float: right;
   width: 3em;
}

.property h2,
.property p {
   margin-left: 150px; /* wide enough for all pictures */
}

.property h2 {
   margin-top: 0;
}

.desc {
   font-size: larger;
   font-weight: bold;
}

Ideally, I'd have liked to have made the <h2> the first element in the <div>, but that makes it harder to float the other things left & right. Obviously you'll need to adjust font sizes, colours and margins to your own preference (though you don't need to define [tt]font-family[/tt] for every element).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[junglist666]

should i simply format the link in the stylesheet and remove the <p> from it then?

 

[junglist666]

Code:

p.topdesc { margin-top:0px; position:relative; margin-right:50px; text-align:left; float:right; top:0px; width:182px; font-family:arial; color:#8A644A; font-size:10pt; font-weight:bold; } img.proppic { margin-left:37px; border:0px; float:left; position:relative; }

http://heathrowminicab.com/xx.asp

hi, i would like the address to begin where the '2bed' button begins.. i cant seem to get it there on both IE and firefox.
above is the code im tryin to use in the stylesheet.. here is the code for the div its all in.

Code:

<a href="edit_property.asp?ID=<%=rsProperties("id")%>"> <img class="proppic" src="<%=rsProperties("out1")%>" /></a> <p class="topdesc"><u> <%=rsProperties("address") & ", " & rsProperties("area")%> </u></p> <br><br><br><br><br><br><br><br><br>

anyone know how?