Need help styling Header

HTML & CSS
1

In my Header, I have my Company Name and then some text prompting customers to log in.

To simplify things, I decided to use an <H1> for the company name.

The problem is that I cannot seem to add Top/Bottom Padding to my H1.

(I changed the H1 to display: inline; so that I could put the Company Name and Personalization on the same line.)

Here is what I have…


<div id="header">
	<!-- COMPANY NAME and PERSONALIZATION -->
	<h1>ACME, Inc.</h1>
	<span id="personalization">
		Hello, <a href="#">Sign In</a> to get personalized information.
		&nbsp; New Customer? &nbsp;<a href="#">Start Here</a>
	</span>



#header h1{
	display: inline;
	padding: 1em 0em;
	font-family: Georgia, Baskerville;
	font-size: 2em;
	text-align: left;
}

#personalization{
	font-family: Geneva, Helvetica, Arial, san-serif;
	font-size: 0.8em;
}

If there is a better way to style this, please let me know! (I just try to keep things simple and not add unnecessary DIVs.)

Thanks,

Debbie

2

Hi,

If you set an element to display:inline then vertical padding is handled differently and vertical margins have no effect. Although you can add vertical padding it will not move the text but will just bleed into the lines above and below depending on the browser.

You could increase the line-height of the h1 to match the padding you have added and it may have the desired effect.

Otherwise you would need to float the header (or set it to display:inline-block which would entail some hacks for ie6 and 7 though).

3

I hate to mention this after my last long thread with Rayzur where we got into a “DIV etiquette” discussion… LOL

But, maybe I could do what I had originally done, and just wrap my H1 (inline) and SPAN in a DIV and then use the DIV to position thing?

I’m really trying hard to code CSS in a pure way, and not go crazy with nesting DIVs, but at the same time you have to be practical, right?

(Complex layouts are going to require more code.)

What is your take on this?

Debbie

4

Hi Debbie,

I’d need to see a picture of what you want it to look like but your use of span in the above code is incorrect. It should be a p element.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#header h1 {
    display: inline;
    padding:0;
    font-family: Georgia, Baskerville;
    font-size: 2em;
    line-height:4em;
    text-align: left;
    margin:0;
}
#personalization {
    font-family: Geneva, Helvetica, Arial, san-serif;
    font-size: 0.8em;
    display:inline;
    margin:0;
}
</style>
</head>
<body>
<div id="header">
<!-- COMPANY NAME and PERSONALIZATION -->
<h1>ACME, Inc.</h1>
<p id="personalization"> Hello, <a href="#">Sign In</a> to get personalized information.
    &nbsp; New Customer? &nbsp;<a href="#">Start Here</a> </p>
</body>
</html>

Structure first and then apply presentation. Never select an element for the way it looks.

CSS doesn’t care how an element looks or behaves because it can be styled to fit whatever it is (apart from form controls of course).

5

Attached is a screen-shot of what I have so far.

The Company Name, Sign-In Message and Top Menu are all in the “header” of my home page, but I originally was trying to use a DIV to lasso the Company Name and Sign-In Message since they are on the same line.

They look is pretty close to what I want, but I’d like more space around the Company Name and Sign-In Message. (Mainly on the top, but possibly on other sides too.)

(The Company Name and Sign-In Message need to remain on the same line.)

but your use of span in the above code is incorrect. It should be a p element.

Don’t let anyone from my last thread hear that, or I’ll get shot!!! :blush: :blush:
(Old habits die hard!)

Here is a little more of my HTML which is stuff you helped me with in the past…


<!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">

<head>
	<title>3 equalising column min-max with sticky footer</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/pagelayout_2col.css">
	<link type="text/css" rel="stylesheet" href="css/dropdown.css">
</head>

<body>
	<div id="wrapper" class="clearfix">
		<div id="inner">
			<div id="header">
				<!-- COMPANY NAME and PERSONALIZATION -->
				<h1>ACME, Inc.</h1>
				<span id="personalization">
					Hello, <a href="#">Sign In</a> to get personalized information.
					&nbsp; New Customer? &nbsp;<a href="#">Start Here</a>
				</span>

				<!-- DROP-DOWN MENU -->
				<ul id="nav">
					<li class="current"><a href="#">News</a>
						<ul>
							<li><a href="#">Breaking</a></li>
							<li><a href="#">Local</a></li>
							<li><a href="#">U.S.</a></li>
							<li><a href="#">World</a></li>
						</ul>
					</li>
					<li><a href="#">Politics</a>
						<ul>

Structure first and then apply presentation. Never select an element for the way it looks.

Okay.

CSS doesn’t care how an element looks or behaves because it can be styled to fit whatever it is (apart from form controls of course).

Okay.

Debbie

6

2D,
it’s amazing how parallel your think was to mine, when I first stated coding. Good mark-up is not about using as few tags as a possible, or as few divs. It’s about writing down the proper structure to represent what you mean ( semantics) then using as FEW ADDITIONAL tags as for CSS hooks, as possible. This means:

  1. the usage of divs is not necessarily bad.
  2. replacing a div with a tag with the wrong meaning is bad
  3. randomly avoiding a specific tag is just as bad as randomly using it
  4. under usage will cause just as many headaches as over usage

since you header structure mimics what I often do I will say this:

think of the usage of H1 has some heavy semantic weight that may not be appropriate for all pages. ( lets say you had a “clients page”… in your site the H1 (since like in highlander there can be only one!) might need to be something like <H1> Our Clients and Satisfied Customers</h1>… So you might end up having to bring back a div.

I cant see the attachment to the post yey, but i would suggest the use of floats for your #header h1 ( or if you could make that a div or … or em … with its own ID), then you can use margins to position and and add distance accordingly.

7

Sounds like a good formula.

I cant see the attachment to the post yet

It is available now.

but i would suggest the use of floats for your #header h1 ( or if you could make that a div or … or em … with its own ID), then you can use margins to position and and add distance accordingly.

Why do you make something a float?

What is the rule-of-thumb?

If I use Floats, then will I have complete control of placement horizontally and vertically?

Should I wrap my “Company Name” and “Welcome Message” in a DIV or can they co-exist with my Top MEnu which is an UL?

Debbie

8

Aside from floating , I suppose you could give it display:inline-block; and the results would be similar. the point is not a rule of thumb when to use float, but the specifics of what is trying to be achieved:

  • Have the element work as inline, yet retain block properties such as height and vertical padding.

There are two things that will readily do this:float and display: inline-block;

at this point then the next requirement is “possitioning” . I put that in quotes, because if your really just wanted “shrink wrapping” and positioning … you could use AP. But then that would take it out of the document flow (you could position ANYWHERE, but it would not affect other elements around it).

Since that’s not what you want… we are back to float or display:inline-block;
after that you have a slew of methods for positioning. using margin, seems the most logical play to start… see?
:slight_smile:

I would wrap a DIV (or a P) think of it as a float container… if you decide to use floats or the bg container if you decide to use display:inline-block; If you use float and our personalization line wraps, for example, it will wrap around the logo… that may be desired …or not. If you use display:inline-block… you could have the personalization line Vertically centered in relation to your logo!!! decision, decisions!

Consider coding like this:


            <div id="header">
                <!-- COMPANY NAME and PERSONALIZATION -->
                <p><strong id="logo">ACME, Inc.</strong>
                    <span id="personalization">Hello, <a href="#">Sign In</a> to get personalized information.
                    &nbsp; New Customer? &nbsp;<a href="#">Start Here</a></span>
</p>
 
                <!-- DROP-DOWN MENU -->
                <ul id="nav">
                    <li class="current"><a href="#">News</a>
                        <ul>
                            <li><a href="#">Breaking</a></li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">U.S.</a></li>
                            <li><a href="#">World</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Politics</a>
                        <ul>





#logo{
    display: inline-block; /* or you can use float:left;*/
    padding: 1em 0;
    font-family: Georgia, Baskerville;
    font-size: 2em;
    text-align: left;
     margin: 0 0 0 0 /* I added this  so you can see how changing the margins affect the position of the logo, experiment with  some #s*/
}
 
#personalization{
    font-family: Geneva, Helvetica, Arial, san-serif;
    font-size: 0.8em;
vertical-align:middle; 
}
9

Dresden_phoenix,

Reading your response and code now…

In the mean time - in your own words - could you please explain to me the difference between: Block Elements, Inline Elements, and Inline-Block Elements??

Thanks,

Debbie

10

dresden_phoenix,

I read up on some on Block Elements vs Inline Elements vs Inline-Block Elements and at least have the basics down, but still have lots of questions and uncertainty!! :-/

Here are the changes I made to my markup…


<body>
	<div id="wrapper" class="clearfix">
		<div id="inner">
			<div id="header">
				<!-- COMPANY NAME and PERSONALIZATION -->
				<h1>ACME, Inc.</h1>
				<p id="personalize">
					Hello, <a href="#">Sign In</a> to get personalized information.
					&nbsp; New Customer? &nbsp;<a href="#">Start Here</a>
				</p>
				<p id="myaccount">
					<a href="#">My Account</a> | <a href="#">Help</a>
				</p>

				<!-- DROP-DOWN MENU -->
				<ul id="nav">
					<li class="current"><a href="#">News</a>
						<ul>
							<li><a href="#">Breaking</a></li>

And here is my style sheet…


html, body{
	margin: 0;
	padding: 0;
}

body{
	background: #333;
}

h1, h2, h3, h4, h5, h6{
	padding: 0.5em 0;
}

p{
	padding: 0em 2em 1em 2em;
}

h1, h2{
	text-align: center;
}

#header h1 {
	display: inline-block;
	padding: 0;
	font-family: Georgia, Baskerville;
	font-size: 2em;
	outline: 1px dotted #FF0000; /**/
}

#personalize {
	display: inline-block;
	padding: 0;
	font-family: Geneva, Helvetica, Arial, san-serif;
	font-size: 0.8em;
	outline: 1px dotted #FF0000; /**/
}

#myaccount {
	display: inline-block;
	padding: 0;
	font-family: Geneva, Helvetica, Arial, san-serif;
	font-size: 0.8em;
	outline: 1px dotted #FF0000; /**/
}

Questions:

1.) Why is there a tiny space below #personalize and #myaccount ??

2.) Is there a way to align #myaccount to the far right page margin without using a float?

3.) If I want to vertically position these three inline-blocks, how do I do that?

4.) If I use

float: right

on #myaccount, how can I position it vertically? (The inline-blocks seem to align on the bottom edge of the containing block and the floats seem to align on the top edge of the containing block?!)

5.) If you grab the browser-window-handle and slowly reduce the width of your window, when you get right to where the horizontal scroll bar appears, you will see that #myaccount wraps around under the H1.

How should I handle this scenario. (My layout was designed to work down to 760px, but I don’t know how the Header should behave, although the Top-Menu is sized for this.)

Thanks,

Debbie

P.S. Please see the 2 attached screen-shots for help!!

11

It depends on what space you mean exactly.

Text is aligned on the baseline and not on the bottom to allow room for descenders (and accents etc). You will see that your large text and the small text all sit on the same baseline together - which is the way that makes most sense as they align in a nice line.

You can change the vertical-alignment to bottom or top but then the descenders may overlap something below. The vertical-align property doesn’t allow for precise pixel alignment cross browsers though.

Also a font-size isn’t just the size of the glyph that is used it may have space around it by default usually there will be some blank space at top and bottom of the font itself (which may be used for accents etc).

Line-height, inline boxes and half leading are very complicated to fully understand. Here’s a slideshow that gives a quick overview (slide 73 onwards deals with line-height).

For more precise positioning I usually apply position:relative to the element and then nudge it up or down by 1px when you don’t want to disturb the flow of the page but need very minor adjustments.

This will line the text up with the bottom content area of the h1.


#personalize,#myaccount{position:relative;top:.3em}

2.) Is there a way to align #myaccount to the far right page margin without using a float?

Why don’t you want to use floats? It’s like trying to tie your shoe laces up with your hands behind your back :).

What you’d need to do is float personalise to the left and my account to the right. (You could float personalise to the left and then set text-align:right on the parent to align my account to the right but that might make things awkward).

3.) If I want to vertically position these three inline-blocks, how do I do that?

Again it depend on context. To align the inline boxes within a single line and in respect to each other you apply the vertical-align:property (the default is vertical-align:baseline).

4.) If I use

float: right

on #myaccount, how can I position it vertically? (The inline-blocks seem to align on the bottom edge of the containing block and the floats seem to align on the top edge of the containing block?!)

If you float the elements then there is no relationship between each element as there was when they were inline because they effectively no longer align on the previous baseline.

For floats you can nudge precisely into position using margins which will give you pixel perfection unlike vertical align on the inline elements which is a little hit and miss. Of coures with floats you then have to take care of clearing issues correctly and as required.

5.) If you grab the browser-window-handle and slowly reduce the width of your window, when you get right to where the horizontal scroll bar appears, you will see that #myaccount wraps around under the H1.

How should I handle this scenario. (My layout was designed to work down to 760px, but I don’t know how the Header should behave, although the Top-Menu is sized for this.)

If you don’t want the items to wrap then either the min-width for the page should be wide enough so that the page never gets that small or wrap the elements in a div with a min-width.

You must have set a min-width smaller than the sum of those elements if you already have this in place.

12

Hi Paul! :wavey:

[quote="“double dee”]
Why is there a tiny space below #personalize and #myaccount ??
[/quote]

[QUOTE=Paul O’B,post:11,topic:79526"]
It depends on what space you mean exactly.

Text is aligned on the baseline and not on the bottom to allow room for descenders (and accents etc). You will see that your large text and the small text all sit on the same baseline together - which is the way that makes most sense as they align in a nice line.
[/quote]

Aha! That makes sense! :slight_smile:

You can change the vertical-alignment to bottom or top but then the descenders may overlap something below.

Good point!

The vertical-align property doesn’t allow for precise pixel alignment cross browsers though.

Also a font-size isn’t just the size of the glyph that is used it may have space around it by default usually there will be some blank space at top and bottom of the font itself (which may be used for accents etc).

Line-height, inline boxes and half leading are very complicated to fully understand. Here’s a slideshow that gives a quick overview (slide 73 onwards deals with line-height).

I’ll check that out later. Thanks for the link!

For more precise positioning I usually apply position:relative to the element and then nudge it up or down by 1px when you don’t want to disturb the flow of the page but need very minor adjustments.

This will line the text up with the bottom content area of the h1.


#personalize,#myaccount{position:relative;top:.3em}

Okay, I’ll try that.

So, do you think I should even worry about that?

Am I wrong for wanting to see the bottom of the containing block of my H1 and #personalize line up (versus the Font Baselines matching up)?

Why don’t you want to use floats? It’s like trying to tie your shoe laces up with your hands behind your back :).

No you know why mom gave me velcro tennies as a child!!! :rofl: :blush: :smiley:

Because floats still scare me and I am a W I M P!!! :o

(Everything made sense in my CSS books, but in retrospect most books give such contrived examples…

I get the float clear thingy (I think) with like your 3-column layout, but when I tried using floats yesterday, I had clearing issues and was too embarrassed and ashamed to ask for help, so I wimped out and went to incline-block!

Sad, but true, I know…)

I liked the way floats worked on my Top Menu. I think the difference is that…

[INDENT]- Since I have different size elements,

  • And different vertical and horizontal alignment needs
  • And maybe different needs in how to address wrapping if it occurs
    [/INDENT]
    using floats seems tricker.

What you’d need to do is float personalise to the left and my account to the right. (You could float personalise to the left and then set text-align:right on the parent to align my account to the right but that might make things awkward).

If I followed how I did things with my Top Menu, I could float left Company Name and #personalize, and then either float left #myaccount and figure out how to force it right (maybe by setting the width and using right align?) or I could float right #myaccount.

[ot]Do you follow what I am trying to do in my Header area?

And do you think the layout looks okay?

I am basically copying what a lot of websites do - specifically Amazon.com (minus all their advertising junk!)[/ot]

Again it depend on context. To align the inline boxes within a single line and in respect to each other you apply the vertical-align:property (the default is vertical-align:baseline).

If you float the elements then there is no relationship between each element as there was when they were inline because they effectively no longer align on the previous baseline.

For floats you can nudge precisely into position using margins which will give you pixel perfection unlike vertical align on the inline elements which is a little hit and miss. Of coures with floats you then have to take care of clearing issues correctly and as required.

It sounds like floats might be better?

What do you think? :-/

If you don’t want the items to wrap then either the min-width for the page should be wide enough so that the page never gets that small or wrap the elements in a div with a min-width.

You must have set a min-width smaller than the sum of those elements if you already have this in place.

Well, if I make #personalize and #myaccount really tiny (e.g. 7px in size) everything fits at 760px, but I am afraid that is too small for some people.

So how do I handle that?

What is more “accessible”?

Larger font with wrapping?

Or Larger Font with horizontal scrolling?

Or shrinking things down to fit in 760px on the Min side?

Thanks,

Debbie

13

First, don’t consider yourself a wimp, and stand up to that nasty code and give it a good slap… by using floats. :smiley:

Though your code is chock full of unnecessary elements and outdated methodologies… let me outline a few of these so you can learn what NOT to be doing.

    <div id="wrapper" class="clearfix">

Clearfix – presentational class polluting the markup for something you could just be declaring on #wrapper in the first place – typically with LESS CSS too. Overflow:hidden and a haslayout trigger, DONE. You probably already HAVE the latter on it.

        <div id="inner">
            <div id="header">

For what I’m seeing so far for appearance, you aren’t doing ANYTHING that warrants either of those elements.


                <!-- COMPANY NAME and PERSONALIZATION -->

pointless comment, anyone with any business lookin into the code should know what the h1 is doing.

                <p id="personalize">
                    Hello, <a href="#">Sign In</a> to get personalized information.
                    &nbsp; New Customer? &nbsp;<a href="#">Start Here</a>
                </p>

that is not a paragraph, it’s barely a sentence – why the P tag?

                <p id="myaccount">
                    <a href="#">My Account</a> | <a href="#">Help</a>
                </p>

That looks like a user account menu that will likely have other elements for like… login, logout? Menu? That’s a list… that is even LESS of a paragraph than the one preceeding it.

                <!-- DROP-DOWN MENU -->

pointless comment if you gave your UL a more meaningful name than “nav” – I hate “nav” as name on a menu, it’s so vague/pointless/meaningless. Why not call it, oh, I don’t know… MainMenu – or “dropDownMenu” – meaning you wouldn’t NEED the comment. Remember that - a meaningful name on something can make you skip wasting code on a comment.

A final suggestion - Don’t “fight” wrapping. If your layout can’t handle something wrapping, you are probably designing it wrong by using fixed height containers – fixed heights on content areas of anything more than a word or two are ALWAYS a miserable /FAIL/ at design, don’t let ANYONE tell you otherwise. If it’s wide enough you’re worrying about the min-width, Design FOR wrapping instead of designing against it.

From what I’m seeing in your preview pics my markup for what you’re trying to do would probably look more like:


<div id="pageWrapper">

	<h1>ACME, Inc.</h1>
	
	<div id="personalize">
		Hello, <a href="#">Sign In</a> to get personalized information.
		New Customer? &nbsp;<a href="#">Start Here</a>
	</div>
	
	<ul id="accountMenu">
		<li><a href="#">My Account</a></li>
		<li class="last"><a href="#">Help</a></li>
	</ul>
	
	<ul id="mainMenu">
		<li class="current"><a href="#">News</a>
			<ul>
				<li><a href="#">Breaking</a></li>

etc, etc… Basically you’ve just got a bunch of DIV for NOTHING.

Oh, and I’d seriously consider putting the account menu BEFORE the center area text and floating it right, you can then just margin the center area to let it auto-adjust to multiple lines as needed. Some ‘tricks’ using SPAN with the ‘white-space:nowrap’ property could also be done to keep sections together if the wrapping looks funny at smaller sizes.

14

All good except for that bit :slight_smile:

A paragraph typically deals with a single thought or topic and can be one or more sentences. The above is two topics and therefore in my opinion two paragraphs.

Besides that I just hate to see divs around bare text - it just doesn’t seem right to me.

15

Or two LI… I hate putting paragraphs around anything outside the content columns – like the header. To me that’s ‘promoting’ the meaning above what it should have. It’s raw CDATA that doesn’t need extra meaning – so the only generic block level tag that does NOT apply extra meaning to it is the best choice – DIV.

But then you know me – I hate slapping P around anything that isn’t a content paragraph which is why as a rule I don’t use P above the menu or in the footer – with EXTREMELY rare exceptions. Seriously, I’d punch myself in the nuts before I’d wrap a P around that second sentence all by itself.

Just because it’s text doesn’t mean slap P around it.

Had a few minutes to spare, so I belted out my approach based on the few images we saw:

http://www.cutcodedown.com/for_others/DoubleDee/take2/template.html

… as with all my examples (wow, I’ve not said that in a while) the directory is unlocked for easy access to the bits and pieces

Index of /for_others/DoubleDee/take2

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the expression to fake min-width (ZERO excuse for invalid markup, but with CSS so long as you know WHY it’s invalid…) tested working 100% fine IE 5.5 through 9 beta, FF 3.6 and 4, and the latest flavors each of Opera, Chrome and Safari.

I broke the center part of the heading into two lines and, uhm… centered it. A little padding and it’s narrow enough to not change appearance when narrow, but not so narrow as to look bad when wide. As Paul suggested those are actually two separate thoughts, which is why I put them on two separate lines.

I put the text-align:justify on the text since that was what the pic had, though I would probably abandon that – justify might be ok for print where the typesetting can sit there playing with it, but for screen media it’s usually a bad idea given how poorly some browsers and font rendering engines (yes Firefox on Freetype like under Linux, I’m looking at you) handle it.

Dynamic fonts where possible, I avoided them on the menu so as to make building the menu easier, hence the fixed width on the child elements in said dropdowns.

I also used the ‘double wrapped content’ method for the columns, as I wasn’t certain what all that wasted white-space in the content area was for in the pic – this method lets a third column easily be added.

The column widths I also did in EM so that large font/120dpi users like myself aren’t stuck with oddball wordwraps, though that REALLY hinges on what’s going into that area…

… which in a way is a indication you are writing code and doing layout at the wrong point – but that’s me. I generally write my complete markup for a page with all it’s content before I even THINK about layout or appearance. You take the content, mark it up semantically, and then bend it over the table and make it your… uhm… “friend with benefits” using CSS when it comes time to turn that content into a layout – that way the content dictates the layout and not the other way around… See why I think the “draw some goof-assed picture” first approach is putting the cart before the horse – how can you make a layout when you don’t even know what’s going in it? That just ends up square peg in the round hole.

EVEN if I’m stuck working from a PSD jockeys meaningless junk, I mark up the ENTIRE page’s content FIRST using semantic markup, and then format it with CSS to look like their meaningless pretty picture (where possible and where their total ignorance of things like the WCAG and the differences between screen and print don’t conflict - and with PSD jockeys sometimes you have to tell them where to shove it)

Hope this helps and you can get something meaningful out of my rambling… If nothing else I hope you can see how you don’t need to be slapping extra containers around EVERYTHING. The simpler you keep the markup, the easier the CSS often is.

… and if nothing else, as I’ve said a billion times CSS is only as good as the markup it’s applied to, and the less code you use, the less there is to break!

Off Topic:

and I have to say these auto-URL’s on the forums are starting to piss me off – bad enough I had to use user .js to neuter the stupid “social networking” garbage to make the pages load in a reasonable amount of time

16

I have to agree with you Jason, 2*li sounds pretty good on that userGreeting div. It makes a lot of sense, so why didn’t you make it so, and leave it as text hanging?

Because I have to agree with Paul, div is a block level, and used only to wrap text, although valid, doesn’t seem to be quite right, semantically.

In case of a “true” inline content, as in different mixed inline element, I may be inclined to agree with div as a wrapper, but for just text (and a few anchors), it doesn’t seems like a right use. That text, along with the accompanying anchors, has a purpose, and the wrapping div’s id attribute alone doesn’t convey any semantic.

17

Yes looks pretty good to me and easier to manage :slight_smile:

I think sometimes you have to change the design a little to make it user friendly because some things just won’t work in the real world.

I had a go at trying to align the text to the bottom and then make it wrap upwards as the page got smaller but didn’t really find anything workable. It was possible using the display:table properties but of course meant that IE7 and under were left out in the cold and once you start hacking it soon spirals out of control.

This is just for interest only and not meant to be a proper example:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    padding: 0.5em 0;
    margin:0;
}
p {
    padding: 0 2em 1em 2em;
    margin:0
}
h1, h2 {
    text-align: center;
    margin:0;
}
#wrapper {
    width:70%;
    margin:auto;
overflow:hidden;
 min-width:580px;
}
#header {
    overflow:hidden;
    display:table;
    width:100%;
    background:#ffc;
}
#header h1 {
    padding: 0 .5em 0 0;
    font-family: Georgia, Baskerville;
    font-size: 2em;
    display:table-cell;
    vertical-align:bottom;
    white-space:nowrap;
    width:1%;
}
#header p {
    padding: 0;
    font-family: Geneva, Helvetica, Arial, san-serif;
    font-size: 0.8em;
    display:table-cell;
    vertical-align:bottom;
    white-space:nowrap;
    text-align:right;
}
#header p.personalise {
    white-space:normal;
    text-align:left;
}
#header p span {
    white-space:nowrap;
    padding:0 5px 0 0;
    float:left;
}
* html #header p {float:right;margin:.5em 0 0}
* html #header p.personalise, * html #header h1 {float:left;width:auto;}
*+html #header p {float:right;margin:.5em 0 0}
*+html #header p.personalise, *+html #header h1 {    float:left;width:auto;}



</style>
</head>
<body>
<div id="wrapper">
    
        <div id="header">
            <h1>ACME, Inc.</h1>
            <p class="personalise"><span>Hello, <a href="#">Sign In</a> to get personalized information.</span> <span>New Customer? <a href="#">Start Here</a></span></p>
            <p><a href="#">My Account</a> | <a href="#">Help</a> </p>
        </div>
   
</div>
</body>
</html>

It’s the sort of thing that tables are good and easy to accomplish but it’s better to compromise and change the design to something that is easier to manage.

Off Topic:

and I have to say these auto-URL’s on the forums are starting to piss me off – bad enough I had to use user .js to neuter the stupid “social networking” garbage to make the pages load in a reasonable amount of time

User stylesheet and hosts file also come in handy.

18

I’ve been lead to believe that using CC to implement the <table> element for IE7 it’s not such a bad idea :wink:

Hold your horses! I’m not suggesting a return to table layouts (though I probably am suggesting A table layout :lol:). This may prove to be the most sensible solution: serve IE7 with tables.

19

You know sometimes I will sneak a table in when everything else is too complicated -but don’t tell anyone. :wink:

20

Stephen brought up the subject of CSS tables layout in his IE7 phasing out thread. For the next years, I do believe this to be the solution that will make layouts approachable from all angles: just serve IE7 with the actual table.