18 replies [Last post]
mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Hello all,

After many months of struggling with a convoluted mess of frames and html, I have decided to embark on the holy grail... a fully valid xhtml/css implementation of the folowing website:
http://www.madewithpixels.co.uk

you can see the working version here:
http://www.btinternet.com/~m.auty/sandbox/index.htm (view in Mozilla / Firefox to see it render correctly)

the css is here:

http://www.btinternet.com/~m.auty/sandbox/sandbox1.css
this is my first attempt at this, and i'm pleased with the results so far.

This version of the website code DOES validate correctly as XHTML, and I've found this a lot easier that anticipated... however im having a couple of problems.

1. In internet explorer, the two grey boxes half way down the page (the ones with the curved corners) have a thin strip of the background colour showing, this seems to be affected by the 'text size' settings in the browser. Can anyone suggest a fix? I dont want to resort to placing the curved corner .gif's into the HTML.

2. I would like the two main content boxes to be scaleable in the vertical axis and for the footer to stick to the bottom of the browser frame... I know I'm asking for trouble here, and I WILL fix the height of the page if neccessary, but if someone can suggest a way to acheive this I'd be grateful... I'm aware of the css hacks available and have been reading about them a lot... am i likely to have to implement one here in order to acheive this fluid page design?

incidentally... while trying to find an answer to my 2nd question, and reading about (on this forum) the inability of IE to work with 100% height attributes set in the <body> of the css... I have a vertically scaleable version of this page that works in IE (well, the main container scales, I still cant find a way to attach the footer to the bottom of it ) but not in Mozilla!!! ... using absolute positions for every DIV except the main container and specifying 100% height seems to work fine in IE but using this technique in Mozilla / firefox makes all the DIV's with absolute positions sit outside the main container.... I can upload this version of the code if anyone is interested.

Cheers for any thoughts / help or advice.

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

Ankou
Offline
Regular
Last seen: 17 years 7 weeks ago
Timezone: GMT-6
Joined: 2004-10-08
Posts: 40
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

For problem #1 - the curved images. In your CSS call when using those image for background. make sure they are set to the top as well as the left or right.

#curve_l {
top 391px;
left 17px;
right 1px;
bottom 0px;
positionabsolute;
background #838890 url(../images/curve_l.gif) no-repeat top left ;
height 14px;
width 229px;
}
#curve_r {
background #838890 url(../images/curve_r.gif) no-repeat top right ;
top391px;
left 248px;
positionabsolute;
height 14px;
width 485px;
}

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Ankou, Brilliant! cheers very much mate. as you said it would, that solved the problem with the background colour showing above the curve graphics. although it didnt solve the fact that the DIV's containing the curve gif's were expanding with the text size

then i had a rare moment of coding epiphany and realised that setting a font-size attribute might solve it... and it did!

so, new found confidence (and the realisation that i will NEVER go back to tables and frames) in hand....

re: question 2
i've spent the evening messing around with the code, and have slightly refined the 100% height version of the code.

Now the main content DIV's expand nicely along with the main 'frame' although i have had to sacrifice the footer for now.
However, this still only works properly in IE and not Mozilla/Firefox, my understanding was that this was more likely to be the other way round???

the two versions are here:

the current, all browser compliant version (thanks to Ankou!)
http://www.btinternet.com/~m.auty/sandbox/index.htm

the IE, 100% height version
http://www.btinternet.com/~m.auty/sandbox/index2.htm

now i'm really confused about this issue, and i'm too close to making it work to just give up now and go for a fixed height... any thoughts anyone?

cheers

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

If you want cross-browser code that will stick a footer at the bottom (but grow if it needs to) you can check a page I did for another forum member at: http://www3.ns.sympatico.ca/d.elliott/demos/apletfx.html from this thread. (shrink the text until the footer comes "up" to the bottom - it will then stay there) The CSS is quite well documented so you can see how the trick is done.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

*edit* to help, i thought id add a quick description of my css structure, skip it if you've worked it out already

    the css sets a #body attribute of 100% height (among other things, but nothing else that effects size / padding margins etc)
    heres the container: #container {
    border: 1px solid #000;
    background-color: #fff;
    position: relative;
    width: 750px;
    height: 100%;
    text-align: left;
    font-family: "arial", "verdana", sans-serif;
    the main image is also a relative position, with an absolute height value and alignment
    everything else below this is set to absolute positioning to ensure the 2 pixel width between the curve DIV's and 2 main content boxes
    your footer code is inserted below this, before the end of the #container

-------------------------------------------------------------

Thanks DC,

I have spent the last few hours playing with your code and cant quite seem to get it right.

using it 'raw' (albeit with my design style) gives me a reasonable result, except the footer is sitting outside the main container... http://www.btinternet.com/~m.auty/sandbox/index2-rawdccode.htm

using a small tweak to your code, gives slightly better results. I added a position:relative to the #footer which brought it 'inside' the container.

Then I tweaked the distance from the grey main content boxes with
top:-50px; which kind of works... http://www.btinternet.com/~m.auty/sandbox/index2-dctweakedcode.htm

heres where i think the problem is.
Obviously there is something wrong with my container in the first place as it does not respect the 100% height value in mozilla browsers and under closer inspection you'll notice that the main content boxes are kind of bodged into being vertically scaleable with height:50%; attributes (I'm positive this can't be right).

so after studying the css in the example you provided i and deciding that i need to have the expanding content boxes and everything else behaving correctly before i attempt to make the footer work, I have a few questions.

your code is quite similar to mine in that you have a body and container (your #mainwrapper I presume) set to 100% height just like mine... so why does mine not work?

I also noticed that you have other attributes in your code such as #outer, #HTML mainwrapper, and lots of different BODY / HTML definitions, are these vital to your 'trick' working? and what do they do?

sorry to ask so many questions, but I'm determined to understand this for myself and not just leech the forum for code to replace mine. its a shame that i cant offer much in return at the moment... photoshop help anyone???

Again, thanks very much

Mike

[/][/][/][/][/]

www.madewithpixels.co.uk
design | graphics | multimedia

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

hmmm, in my haste to not clutter up the forum, I forgot that editing my last (pretty useless) post would prevent my thread jumping to the top.... DOH stupid brain

anyway... see above (this has to be a legal bump, no?)

Laughing out loud

www.madewithpixels.co.uk
design | graphics | multimedia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Two posts here, this one with the CSS:

/* sets up main background texture and aligns everything to top of frame*/
html, body { height: 100%; } /*moz needs height on html as well*/
body {
	margin: 0;
	background: url(../images/bg_01.jpg);
	text-align: center;
	font-family: arial, verdana, sans-serif;
	color: #fff;
	text-align:center;
}
/* sets up white box with black border*/
#container {
	width: 750px;
	min-height: 100%;
	height:auto;
	margin: 0pt auto -38px;/*negative margin at bottom leaves room for footer*/
	border: 1px solid #000;
	background-color: #fff;
	text-align: left;
}
* html #container { height: 100%; }/*for IE*/

/* sets up main image background*/
#main_image {
	position: relative;
	height: 376px;
	background: url(../images/index1.jpg) no-repeat bottom ;
}
/* sets up grey bars with curved corners */
#curve_l {
	position:relative;
	float:left;
	margin-left: 17px;
	height: 14px;
	width: 229px;
	background: #838890 url(../images/curve_l.gif) no-repeat top left ;
}
#curve_r {
	float:left;
	position:relative;
	height: 14px;
	width: 485px;
	background: #838890 url(../images/curve_r.gif) no-repeat top right ;
}
/* sets up grey bars with curved corners */
#body_l {
	position:relative;
	float:left;
	background: #838890;
	height:auto;
	width: 229px;
	color: #fff;
}
#body_r {
	background: #838890;
	float:left;
	position:relative;
	height: auto;
	width: 485px;
	font-size:10px bolder;
	color: #fff;
}
#clearfooter { 
	clear: both; 
	height: 37px; 
}
#footer {
	clear: both; 
	margin: 0 auto; 
	width: 716px; 
	height: 37px; 
	color: #838890; 
	background-color: #096DAB;
}
/*Special class to clear floats within a div*/
.floatcontainer:after{
	content: ".";
	display: block;
	height: 0;
	overflow:hidden;
	clear: both;
	visibility:hidden;
}
/* Holly Hack Targets IE Win only \*/
* html .floatcontainer {
	height: 1%;
}
/* End Holly Hack */

/* sets up main styles for text and links */
.p1 {
	padding:20px;
}
a:link {
	color: #860d01;
	text-decoration: none;
}
a:hover {
	color: #870b01; 
	text-decoration: underline;
}
a:visited {
	color: #666;
	text-decoration: none;
}
h1, h2, h3, h4, h5 {
	padding: 10px;
	border: 0px solid orange;
}
You will note that I removed all the absolute positioning. You need all the elements to be "in the flow" to push content down. I added Tony's clearing technique for a couple of float containers I created to contain the floating (instead of absolute positioned) divs.

A couple more subtle things here that people should make standard practice. Note the general order of selectors and properties. Start with the parent objects like html, body, main positioned containers and then work down to text stylings and such. Within a property block, start with the main determinants - is it block or inline, relative or absolute positioned, and then work down through the critical dimensions of height|width, and margin|border|padding. This all makes things very orderly and easy to read and ensures you don't miss anything. You started labelling certain sections with comments - it makes things much easier to decipher (especially a year from now) so keep it up.

DE

Edit for spelling

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type"
    content="text/html; charset=us-ascii" />
    <meta name="author" content="Michael Auty" />
    <meta name="keywords"
    content="design, graphics, multimedia, cascading, style, sheets, xhtml, css, w3c" />
    <meta name="description"
    content="An experiment in re-creating http://www.madewithpixels.co.uk in valid css 1 and xhtml/xml." />
    <meta name="robots" content="all" />

    <title>madewithpixels sandbox v1.1c</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=us-ascii" />
    <link href="sandbox2-rawdccode.css" rel="stylesheet"
    type="text/css" />
</head>

<body>
    <div id="container">
        <div id="main_image"></div>

        <div class="floatcontainer">
            <div id="curve_l"></div>

            <div id="curve_r"></div>
        </div>

        <div style="background-color:#838890; margin:0 17px;"
        class="floatcontainer">
            <div id="body_l">
                <p class="p1">welcome to the
                www.madewithpixels.co.uk sandbox</p>
            </div>

            <div id="body_r">
                <p class="p1"><span>this version of the code now
                expands to fit the available height of the browser,
                although it only works in I.E at the moment. And i
                still cant get the footer to 'stick' to the bottom
                of the design.</span></p>
            </div>
        </div>

        <div id="clearfooter"></div>
    </div>

    <div id="footer">
        footer content here
    </div>
</body>
</html>
Pretty much the same here except there are two divs wrapping the curve_ and body_ divs. I have inline styled the background color on the body_ wrapper so that if one div is longer than the other they don't have a step at the bottom.

There are still some finicky adjustments to do but it is mostly all there.

Don't worry - I may take you up on your offer to do some pixel pushing in the future :?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

erm wow.

what can i say but thanks very much... photoshop work?...anytime mate, have you got something in mind? you know where to find me, drop me a line...

Ok, so ive been trying to understand what you did, I've pretty much got the generals, i see how the floats work (kinda... i'll brush up on terminology i think)

and i see how you've fixed the browser compatibility, but im unclear on a couple of points...

1. these pieces of the css:html, body { height: 100%; } /*moz needs height on html as well*/ and * html #container { height: 100%; }/*for IE*/I understand what they do, but i dont 100% understand how you have used them?.. where do you call them in the html?.. or dont you have to? does the html just know to use them for the <body> & <html> tags?... im showing my ignorance here i know!

2. I also dont really understand the clear attribute. does this clear all the attributes from the previous DIV's and CSS calls?.. if so, what were you trying to 'clear'?

3.So if ive guessed correctly for question 1, then this code

/*Special class to clear floats within a div*/ 
.floatcontainer:after{ 
   content: "."; 
   display: block; 
   height: 0; 
   overflow:hidden; 
   clear: both; 
   visibility:hidden; 
}
then your using it exactly as you say in the /*comment - but again, where do you call it in the html?

4. how does the holly hack work?

I guess most of these questions could be answered if i knew more of the terminology, can you suggest a good online guide?... i found what looked like a comprehensive online glossary on cssvault.com but it was lets say, 'un-designer friendly'... we are only simple souls, coders need to be gentle with us! i think i now know more acronyms than any decent person should ever have to know!

right o, i'm off to play with getting my 2 pixel borders back and getting the content boxes fixed to the bottom too... im presuming that as you havent mentioned that it isnt possible, your gonna leave this one to me!... thats kinda mean, but great fun! Wink

oh yeah, i'll leave all the working versions up online, so that anyone reading this thread can see the results of your fixes to my code. the results from your last post(Drunk will appear here (when i can log in to my ftp):http://www.btinternet.com/~m.auty/sandbox/index2-dccomplete.htm

thanks so very much

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

just in case anyone was thinking about posting, thanks anyway but hold yer horses - an hour on and i'm making good progress...
"almost there... almost there... stay on target, stay on target!"

holly hack is my friend Wink

i'll shout if i need help!

cheers

mike

www.madewithpixels.co.uk
design | graphics | multimedia

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Hi DC,

Dont even look at my last big post, it was done in a moment of weakness! (except this part Laughing out loud

what can i say but thanks very much... photoshop work?...anytime mate, have you got something in mind? you know where to find me, drop me a line... )

anyway, Is there any chance you've got some time to take a look at this? *whimper* my brain hurts! I have made good progress, and i just about understand everything you did with your code.. woohoo! except....

i have managed to define the 2px white spaces under and between the curve boxes and everything still renders / validates correctly in all browsers (not tested on MAC yet).

my latest version is here http://www.madewithpixels.co.uk/sandbox/index2.htm

To achieve this, I had to use the 'Holly Hack' when setting the space between the curve boxes, as setting a 2px margin-right on the left hand box threw the alignement of the right hand box way over to the right of the container when viewed in IE..

basically the hack adds a margin-left: -15px; to the right hand curve box to pull the box into line when viewed in IE...

the weird thing is, using the hack made the left hand curve box jump all the way to the left in mozilla, forcing me to bring it back in line with a left-margin: 17px setting in the main #curve_l style... im pretty sure somethings wrong here, why would i have to correct an IE hack in Mozilla.... something tells me that i might not have needed the hack.

Now i just need to get the 2px white space between these main content boxes sorted out, and make the bottom of them stick to the footer (with another 2px white space underneath)... oh yeah, and i need to add some more white space under the footer...

I've been at this for 5 hours now. obviously, you've given me everything i need to work it out for myself, but guess what?... im stuck, nothing I do seems to give me the 2px white space between the main content boxes... same for making them stick to the footer...

where have i gone wrong? have i guessed correctly and used a hack where i didnt need to hence giving me this problem?

to make this easier to answer, everything i did to your code is commented in the latest version, numerically too, in the order i did them so that i can retrace my steps.

cheers v much

Mike

again, my brain hurts!

www.madewithpixels.co.uk
design | graphics | multimedia

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

ok, have made much more progress... after reading an excellent article on http://www.alistapart.com about 'faux coloumns' and a cheeky (so obvious it hurts) little technique, I have managed to get the main content boxes sorted out...

I now have content boxes and a footer that fill the available height of the
browser window, except somethings not quite right.... I can get the
container expanding in height with the browser window no problem, by setting
the height attributes in the CSS and the height of the DIV in the html to
100% height ... except it's TOO big, the footer is waaay down the bottom and
requires me to scroll down to it (not what i want)....AND... it doesnt work
in mozilla...

ok, so a bit more tweaking, changing the %'s for em's and now mozilla works
correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the
height attributes in the CSS and the DIV and everthing should be fairly
straightforward.

But no! it doesnt work, if i set a height attribute above 50em (or 50% for
that matter, its the same result, just doesnt work in Moz), the footer is
off the screen, if i set it lower than 50, then the content boxes dont
expand anymore... damn, what the hell am i doing wrong?

also, in IE I have about 10px of white above the footer that i cant
eliminate... If anyone can give me an explanation as to what is happening
(im sure the two problems are related) I'd be very grateful. i'm getting
closer all the time, i just need to understand whats happening here and I
reckon i'll be ready to start putting the rest of the elements in like the
navigation etc

the latest and greatest is here:
http://www.madewithpixels.co.uk/sandbox/latest.htm

cheers

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

anyone have any ideas? i've been tweaking this code all day and I'm getting no-where.

heeeeeelp!

www.madewithpixels.co.uk
design | graphics | multimedia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Sorry, I have been away for the past few days using a chainsaw rather than a keyboard, am playing catchup on eMail and stuff so it will be another 24hr before I am in helping mode again.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Hi Dave,

hey no problem, your input was very much appreciated and I've been inspired to learn for myself and make good progress from the help that you gave me.

The latest version of the code is here
http://www.madewithpixels.co.uk/sandbox/latest.htm

Although this version doesnt address the issues that you have helped me with, the code you provided has shown me how to acheive an awful lot... hence the nearly complete design you see here.

At the moment, I have settled for a design that expands to fit the content as the content grows (which is an imporvement on my original - totally fixed HTML version), rather than the fully dynamic 'footer sticks to bottom of browser' design i was hoping for...

this is simply becasue i was making no progress at all, and i intend to come back to it when I am more confident with the technology.

Thats not to say that I wouldnt aprreciate some more help on the subject! Wink ... i seem to be able to get somewhere close (see the above posts) but am stuck with the finer points.

With best regards,

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Amazing progress, mate.

If you are planning a fair bit of content, the footer would usually be "pushed down" anyhow, so what would be the point? You have a semi-liquid design now but still have some issues with .titlemain and .strapline (which should probably be IDs not classes). Those design elements really can't absorb font changes without having a negative impact on your design. I'd really recommend you do them graphically and then fake it with the menu stuff.

More later.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

thanks very much! I am kinda pleased with myself!

The reason im aiming at a fully fluid design is an aesthetic decision and nothing more... i'd rather have the content boxes filling the available height of the design just to stop the pages 'jumping around' between clicks.

I hear what your saying about the graphical approach to the navigation typography, but the concept behind the site was to prove that a designer doesnt need to use graphics to acheive a design led approach.... web-text CAN be cool!

It does however (as im sure you've seen), degrade awfully in mozilla when changing the size of the font settings... but just as you cannot stop a person reading a book backwards, i cant stop anyone having thier font sizes set to 200% either.... I'm hoping to offer a text only version anyway to accomodate those users that want the high contrast - big fonts approach.

Looking forward to your comments.... sat here at work trying to design an interface for a multimedia kiosk with CSS streaming through my brain.... in fact, i have an idea!... must get home, must get home!

cheers

Mike

www.madewithpixels.co.uk
design | graphics | multimedia

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Well - you can make it "degrade" gracefully (although degrade is not the proper term here - Mozilla is doing what the specifications say it should do, IE is not - you have designed for a degraded browser not for standards) . . . but I digress.

The critical point in your design is at the intersection of your vertical and horizontal menus. What if you were able to make the title material grow up and to the left, rather than down and to the right? Think of a box defining that space from the top-left corner of your photo down to the menu-intersection and then making your titles "play nice" in that area. It is quite feasible with bottom:0; text-align:right and a couple of other tweaks.

This isn't definitive but:

In the HTML:

<div id="container">
	<div id="main_image">
		<div id="topleft"><!-- This is the relatively positioned container-->
			<div id="titlemain"><a href="#">madewithpixels</a>
				<div id="strapline">design | graphics | multimedia</div>
			</div>
		</div>
		<div id="navcontainer">

In the CSS:

/* defines font styles and positions for all main navigation elements */
/*This is a new div to contain the titlemain and strapline*/
#topleft {
	position:relative;
	top:15px;
	left:15px;
	height:245px;
	width:715px;
	text-align:left;
	border:1px dotted red;/*border just for visualization purposes*/
}
#titlemain {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 47px;line-height:1;
	color: #FFFFFF;
	font-weight: bolder;
	position:absolute;
	left:0;
	bottom: 0;
	width: auto;
	/*Semitransparent black background from my website*/
background:transparent url('http://www3.ns.sympatico.ca/d.elliott/black_trans.gif') repeat;
}
#titlemain a:hover {
   color: #f0f;
   text-decoration:none;
}
#strapline {position:relative;
	float:left;
	width:260px;
	margin-top:10px;
	margin-bottom:-25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	font-weight: bolder;
	line-height:1;
	text-align:right;
}
.imagenav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	position:absolute;
	top: 58px;
	left: 266px;
	width: 300px;
background:transparent url('http://www3.ns.sympatico.ca/d.elliott/black_trans.gif') repeat;
}

Please note the change from class to id for titlemain and strapline. If you want to use the semitransparent black background from my site, please d/l it for your own use (rather than hot-linking to it) If you take this approach and still have the background picture original without the semitransparent overlays - substitute that in to see how you can create that effect by layering on with your text.

Now, think about how you could use this technique for the other menu elements - growing your vertical menu to the left away from a vertical at about 270px and so on. Once mastered you can do all sorts of title effects that don't "break" within the normal range of font sizes, nor do they rely on fixed font sizes.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mickieluv
Offline
Regular
Last seen: 17 years 20 weeks ago
Joined: 2004-07-09
Posts: 20
Points: 0

Site redesign with CSS, 2 questions about stretchy div's

Hello mate,

I had to laugh when I read your last post, as soon as I get to a stage when i'm happy with what i've acheived, you come up with a MUCH better way of doing it...

I didnt even know that the semi transparent trick was possible, Ill go off and play with this ASAP as its such an elegant way around having to place the black bars onto the main image graphics. hehehehe how can i resist?

On the fluid layout issue, I think i am going to try and produce a demo that acheives what i'm aiming at, and then worry about squeezing it into my design later, ive learned so much in the past week, i cant thank you enough.

Its funny, but... It must have taken me months if not years to get to the (fairly limited) level of HTML expertise that i have.... and yet i feel that i've come so much further than that in 7 days learning CSS, Im aware that understanding the nuances of this technique is all important, but tables and frames seems so convoluted now... just sitting here last night dropping those navigation links into place with utter simplicity was close to a religious experience!

by the way. I just noticed your domain is hosted with Sympatico.ca... are you anywhere near Vancouver?

regards,

Mike

www.madewithpixels.co.uk
design | graphics | multimedia