[thelist] css gurus

[Scott McPhee]

There's the rub... I don't think that can be done -  the BORDER
cproperties can only be used on elements (div,td,tr) - and all elements
give a line break.  So where I have SPAN class=header, if the border
properties were added to the header class it wouldn't apply (span is an
inline construct)... if I change the span to a div it will give a line
break...

You were probably right to then use a table cell and have the cell an
absolute width so it doesn't slide UNDER the rightside menu - when you
have the width of 100% it will just pop it below the menu.  I suppose
then create another class that just leaves off the right side formatting
so it looks like its sliding under the menu.  Not elegant at all.

Ever thought of not doing the whole thing with css and just building a
table structure?  Your right side menu could row span 2 or three rows
and then full sized rows beneath?

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 1:01 PM
> To: thelist at lists.evolt.org
> Subject: RE: [thelist] css gurus
>
>
> 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
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !