Newsletter header

**rguy84** · Mar 21, 2011 10:34

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

Code HTML4Strict:

<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:

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

My CSS

Code 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%;
}

**Paul O'B** · Mar 21, 2011 11:17

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

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.

**rguy84** · Mar 21, 2011 12:09

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.

**Paul O'B** · Mar 21, 2011 13:26

I suppose something like this is close.

Code:

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

**rguy84** · Mar 22, 2011 10:13

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

**Paul O'B** · Mar 22, 2011 11:10

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.

**rguy84** · Mar 22, 2011 11:35

That's what I thought.Now faux-colum fun

**rguy84** · Mar 23, 2011 09:11

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

Code css:

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.

**Paul O'B** · Mar 23, 2011 15:13

Originally Posted by rguy84

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

Code css:

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.

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

User Tag List

Thread: Newsletter header

Thread Tools

Display

Newsletter header

Bookmarks

Bookmarks

Posting Permissions