XHTML block item inside and inline item

Discussion in 'HTML' started by tj.tzavaras@gmail.com, Apr 28, 2005.

  1. Guest

    Ok, I've been working on this site (www.glassrock.net/weblog) for a
    little while now. Everything works perfectly except one peice of code.
    I would like to have everything XHTML 1.0 Transitional however I have
    an <h2> outside a <div>. I have tried putting the <h2> inside the
    <div> however the resulting formatting looks a bit funny. This
    particular peice of code is for a blank image with 4 links to the right
    of it.

    Here is the peice of code with some long urls removed so it is
    readable:
    ------------------
    <div id="right">
    <div class="sidebar">

    <h2 style="text-align: left;">
    <div class="link-note">
    <img src="about.jpg" alt="about.jpg" />
    &nbsp;&nbsp;&nbsp;&nbsp;[<a href="about.html">&nbsp;About&nbsp;</a>]<br
    />

    &nbsp;&nbsp;&nbsp;&nbsp;[<a
    href="contact.html">&nbsp;Contact&nbsp;</a>]<br />
    &nbsp;&nbsp;&nbsp;&nbsp;[<a href="faq.html">&nbsp;FAQ&nbsp;</a>]<br
    /><br />
    &nbsp;&nbsp;&nbsp;&nbsp;[<a
    href=""><strike>&nbsp;Pictures&nbsp;</strike></a>]<br /><br />
    </div></h2>
    ------------------
    This works, but as you can see I have an <h2> ouside a <div> which is a
    no-no.

    The relevant peices of CSS are as follows:
    ------------------
    body {
    margin: 0px 0px 0px 0px;
    background: #6f0100
    }
    #outer{
    background: url(http://www.glassrock.net/weblog/w_images/border.jpg)
    repeat-y center;
    width: 740px;
    padding: 0px;
    }
    #container {
    line-height: 140%;
    text-align: left;
    padding: 0px;
    width: 700px;
    background-color: #FFFFFF;
    }
    #right {
    float: left;
    width: 200px;
    background-color: #FFFFFF;
    overflow: hidden;
    }
    ..sidebar {
    padding: 15px;
    }
    ..sidebar h2 {
    color: #666666;
    font-family: Verdana, Arial, sans-serif;
    font-size: x-small;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    }
    ..link-note {
    font-family: Verdana, Arial, sans-serif;
    font-size: x-small;
    line-height: 150%;
    text-align: left;
    padding: 2px;
    margin-bottom: 15px;
    margin-top: 0px;
    letter-spacing: 0px;
    vertical-align: middle;
    }
    ------------------
    You can see how I'd like it to look on the website,
    www.glassrock.net/weblog. It's the black image with text floating to
    the right. When I put the <h2> inside the <div> the links become
    centered (in the space they have next to the picture) and the last link
    ends up below the picture. I've tried just about everything I can
    think of and have nearly given up. I nearly gave up when trying to
    make it look the same in IE and Firefox, that took a while. Any help
    you can give me would be fabulous.

    PS - I have the same error on the sidebar in the donate section but If
    I can have some help fixing the first one I'm sure I can manage to fix
    the second one on my own.

    Thanks!
     
    , Apr 28, 2005
    #1
    1. Advertising

  2. Oli Filth Guest

    wrote:
    > Ok, I've been working on this site (www.glassrock.net/weblog) for a
    > little while now. Everything works perfectly except one peice of code.
    > I would like to have everything XHTML 1.0 Transitional however I have
    > an <h2> outside a <div>. I have tried putting the <h2> inside the
    > <div> however the resulting formatting looks a bit funny. This
    > particular peice of code is for a blank image with 4 links to the right
    > of it.
    >

    <SNIP CODE>
    > You can see how I'd like it to look on the website,
    > www.glassrock.net/weblog. It's the black image with text floating to
    > the right. When I put the <h2> inside the <div> the links become
    > centered (in the space they have next to the picture) and the last link
    > ends up below the picture. I've tried just about everything I can
    > think of and have nearly given up. I nearly gave up when trying to
    > make it look the same in IE and Firefox, that took a while. Any help
    > you can give me would be fabulous.
    >


    Why do you want any of that to be an <h2>? As far as I can see, they're
    links, not headings. Why not just remove the <h2> tagging?

    Also, why are you using &nbsp; all over your page to position things?
    Thats' what CSS is for (margins and padding, etc.)


    (Oh, one other thing. If you're going to make your page Transitional
    rather than Strict, you have no excuse not to make it validate!)


    --
    Oli
     
    Oli Filth, Apr 28, 2005
    #2
    1. Advertising

  3. teej Guest

    Your criticism inspired me to change. And change fixed my problem.
    Thanks!
     
    teej, Apr 28, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Abhi
    Replies:
    2
    Views:
    742
    E. Robert Tisdale
    Jul 3, 2003
  2. Alvin
    Replies:
    7
    Views:
    480
    E. Robert Tisdale
    May 6, 2005
  3. morrell
    Replies:
    1
    Views:
    966
    roy axenov
    Oct 10, 2006
  4. Sean
    Replies:
    4
    Views:
    670
    Rolf Magnus
    Apr 30, 2006
  5. Rahul
    Replies:
    3
    Views:
    457
    James Kanze
    Feb 28, 2008
Loading...

Share This Page