SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Newsletter header

    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%;
    }
    Ryan B | My Blog | Twitter

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images
    Ryan B | My Blog | Twitter

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Perfect Paul. I made a few tweaks, mainly just color. Is there anything that major I missed?
    Ryan B | My Blog | Twitter

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    That's what I thought.Now faux-colum fun
    Ryan B | My Blog | Twitter

  8. #8
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ryan B | My Blog | Twitter

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rguy84 View Post
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •