[thelist] css gurus
Andrew Maynes
andrew at humanbehaviour.co.uk
Mon Oct 7 11:58:02 CDT 2002
excellent however the image is in the title now and not to the left? :)
actually that look alright so may just keep it like that, but ideally the image
should be outside to the left....
Andrew
-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Scott McPhee
Sent: Monday, October 07, 2002 05:08
To: thelist at lists.evolt.org
Subject: RE: [thelist] css gurus
Hi Andrew...
The problem being that the <h1> tags are HTML standard tags - they have
a carridge return "built in". So if you have a construct like this:
<class = title><SOME IMAGE><h1>SOME TEXT</H1></class>
The H1 will ALWAYS put a line break after the image - so it might be
better to make a new class for that.
Also the TITLE class only has a construct for H1 - so when you wrap it
around the image it sort of messes that up too.
My suggestion is to add this to product.css:
.title {
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:10px solid #000;
border-left:10px solid #000;
margin-top:10px;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
}
.header{
font-size:18px;
font-weight:bold;
}
and change the H1 in the same css to this:
.title h1{
font-size:18px;
}
The header tag the emmulates the h1 tag without the <p>. Your items in
your list can then look like this:
<div class="title"><a href="parts_pcb.html"><img src="left_pic.jpg"
alt="Amplifer Valve Tube Amplifiers Kits and Printed Circuit Board by
World Audio Design" width=106 height=70 border="0"
align="middle"></a><span class="header">Printed Circuit
Boards</span></div>
And the other pages already using that css shouldn't mess up.
hth!
sm
> -----Original Message-----
> From: thelist-admin at lists.evolt.org
> [mailto:thelist-admin at lists.evolt.org] On Behalf Of Andrew Maynes
> Sent: October 7, 2002 10:44 AM
> To: thelist at lists.evolt.org
> Subject: [thelist] css gurus
>
>
> I have a css layout which needs to be changed to add an
> image! I have changed the css file and the layout just
> doesn't want to work with me!
>
> I tried putting a table in to give two seperation within a
> single row but alas nothing :( this is the problem page
> http://www.worldaudiodesign2.co.uk/amplifier_p> arts_index.html
>
>
> and this is the page I want it to look like
> but with an image left of the title class
> http://www.worldaudiodesign.co.uk/amplifiers.h> tml
>
> Cheers
> Andrew
>
>
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.394 / Virus Database: 224 - Release Date: 10/3/02
More information about the thelist
mailing list