New class? or how to float right?

Discussion in 'CSS' started by Colbyt, Mar 18, 2006.

0
  1. #1
    I am not good at thread names.

    I am using snews for the article section of my new site. I have overcome everything except this. I want to insert an adsense image ad in the upper right part of the header.


    The CSS looks like this:
    <CSS>
    .header {
    height: 67px;
    padding: 0px 0px 0px 1em;
    margin:0;
    background: #A0B1F9;
    color: #FFF;
    }


    .hmenu {
    float: right;
    padding: 5px;
    }

    .hmenu ul {
    margin: 0;
    padding : 0;
    list-style : none;
    border: none;
    }

    .hmenu li {
    display: inline;

    }

    .hmenu li a {
    color: #FFF;
    background: inherit;
    font-weight: bold;
    margin: 0 0 0 8px;
    }
    </css>

    And the current html for the header section looks like this:

    <html>

    <body>
    <div class="content">
    <div class="header">
    <img src="images/IG_logo_sm.jpg">
    <div class="hmenu">
    </html>


    The logo is appearing on the the left hand side of the header as I would like it to do. The horizontal menu is perfect. I just want an adsense image ad to appear above the menu and to the right side of the screen.


    Colbyt
     
    Colbyt, Mar 18, 2006 IP
  2. AyeZee

    AyeZee Guest

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi
    One way to do this is to put the left and right header bits in a wrapping div, float one left and the other right. There are other ways, no doubt, but this works for me.
    The css would look like this:
    #headerwrap {
width: 100%;
} /* BTW there's no reason why you can't make this a class, 
but a proper div is probably the way to go
for an integral part of any containing element layout in CSS-P */
.header { 
height: 67px; 
width: 50%; /* or whatever width fits the design */
float: left;
padding: 0px 0px 0px 1em; 
margin:0; 
background: #A0B1F9;
color: #FFF; 
}
.adsense {
height: 67px; /* that's what it should be, but if the image is higher it will 
break the left header while that bit stays at 67px */
float: right;
}
    Code (markup):
    And the html:
    <html>
<body>
<div class="content">
<div id="headerwrap">
<div class="header">
<img src="images/IG_logo_sm.jpg" />
</div><!-- end header -->
<div class="adsense">
<img src= "wherever_the_image_is.jpg" />
</div><!-- end adsense -->
</div><!-- end headerwrap -->
<div class="hmenu">
</html>
    Code (markup):
    Clearly, you will need to do a bit of tweaking to cater for the left padding of 1em on .header. Also keep your eye on adsense - it has an uncanny knack of messing up designs :mad:
    I hope that helps.
     
    AyeZee, Mar 19, 2006 IP
  3. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #3
    You way looks like it should work. I am very new to CSS. I think it is great and I do plan to learn more.

    I''ll try this out and see what it does.
     
    Colbyt, Mar 19, 2006 IP