[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