Newsletter header

HTML & CSS
1

I am trying to convert a newsletter header to css, and the positioning is killing me.


<div id="wrapper">
<div id="header">
  <h1>Name Of Newsletter<span>Quarterly Newsletter</span></h1>
  <span id="issue">Issue ### Month 2010</span>
  <h2>In This Issue:</h2>
    <ul>
    	<li>text</li>
    	<li>text</li>
    	<li>text</li>
    </ul>
 </div>
</div>

Some things:

[list]
[]The h1, and issue number is on the right.
[]the span in the h1 should appear over the Name, so on screen it looks like

Quarterly N
Name Name

[]The issue # is in the top right corner - above the name
[]The h2 & ul are on the left[/list]
My CSS


#header {
	background: #FC3;
	color: #006;
	padding: 30px 0 0 10px;
	clear: both;
}
#header span#issue {
	display: inline-block;
	background: #006;
	color: #FC3;
	width: 100%;
	text-align: right;
	width: 50%;
	float:right;
	font-size: x-large;
}
#header h1 {
	margin: 0;
	text-align: right;
	font-size: 3.5em;
	position: relative;
	right: 0;
	top: 0;
	width: 50%;
	float: right;
}
#header h1 span {
	font-size: .5em;
}
#header h2 {
	text-decoration: underline;
	margin: 0;
}
#header ul {
	padding: 0 0 0 20px;
	margin: 10px 0 0 0;
	width: 25%;
}
2

Hi Ryan,

Do you have a picture of what it should look like?

And is the html to remain in that order? I’m having a hard time trying to visualise how it all should look :slight_smile:

As an aside the span#issue is semantically incorrect and should be a block level element such as a p element.

Display:inline-block and float are mutually exclusive and float wins out.

3

Attached is a rough layout.

The HTML should stay in that order. I guess the issue number could be below the titlle. I am just trying to emulate what the header looks like now. reading the title first then the issue number makes the most sense.

4

I suppose something like this is close.


<!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 {
    background: #FC3;
    color: #006;
    padding: 2em 0 0 0;
    clear: both;
    position:relative;
    overflow:hidden;
    zoom:1.0;
}
#header #issue {
    background: #006;
    color: #FC3;
    width: 100%;
    text-align: right;
    position:absolute;
    top:0;
    left:0;
    font-size: x-large;
    margin:0;
}
#header h1 {
    margin: 0;
    font-size: 3.5em;
    position: relative;
    float: right;
    padding:.7em 10px 0 0;
}
#header h1 span {
    font-size: .5em;
    white-space:nowrap;
    position:absolute;
    top:0;
    left:0;
}
#header h2 {
    text-decoration: underline;
    margin: 0 0 0 10px;
}
#header ul {
    padding: 0 0 0 30px;
    margin: 10px 0 0 0;
    width: 25%;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Name Of Newsletter<span>Quarterly Newsletter</span></h1>
        <p id="issue">Issue ### Month 2010</p>
        <h2>In This Issue:</h2>
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </div>
</div>
</body>
</html>

It’s a little awkward without changing the html so the above is bout as close as I can get.

5

Perfect Paul. I made a few tweaks, mainly just color. Is there anything that major I missed?

6

It was just a matter of absolutely positioning some elements into the padding above to reverse the order of the text. It’s ok in small doses and for single lines but not for content that will wrap.:wink:

7

That’s what I thought.Now faux-colum fun :bouncy2:

8

Paul Does :focus sometimes not work in IE8? I was working on this last night, focus was working fine today, nada. Ripped out all CSS, did a simple


a{ background: #000;}
a:hover, a:focus { background: #fff;}

nothing happens when tabbed to. Change it active vs focus it works. Make a new ppage and only define a:focus it works.

9

Focus works ok for me in IE8 ok. You weren’t in quirks mode were you?