Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image float(?) right on a header

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26348
    sbertrand
    Participant

    Here’s the site URL:
    http://staceybertrand.info/

    What I’d like to do is get an image to be right flush on top of the header. I’m not quite sure where I’m going wrong and I am just starting to learn CSS…so please bear with my ineptitude! I appreciate any and all help, tips and comments. [Please don’t judge my design yet…it’s still a work in progress and this is just a test site until I get used to wp and hard coding everything.]

    Here’s what I’ve got in the header file (well the relevant bit anyways):

    Code:

    And here’s my CSS:

    Code:
    #header {
    margin: 20px 0 20px 0
    }

    h1#logo {
    float:left;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 80px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #header2 {
    margin: 0 0 0 0;
    float: right;
    }

    h1#imageright {
    float: right;
    margin: 0 0 0 0;
    background: url(style/images/upperrightimage.jpg) top right no-repeat;
    width: 433px;
    height: 232px;
    }

    #65049
    sbertrand
    Participant

    I think getting closer…but still not quite there…maybe I’m missing something? Thanks again for all the help – I REALLY appreciate it. I’m a designer at heart and the coding is just seeming to eat me alive.

    URL: http: staceybertrand.info

    Header.php code:

    Code:

     


    */ ?>

    Styles.CSS code: [note-ignore the commented areas, but that’s what I was playing with…just for reference]

    Code:
    /***General Styles***/
    /**rightimage {
    background:url(style/images/rightimage.png) top right no-repeat;
    width: 433px ;
    height: 202px;
    float: right;
    clear: both;
    }
    **/
    body{
    bg-color:#309;
    font-family: Arial, Helvetica, sans-serif;
    background: url(style/images/repeatinghorizontal.png) top repeat-x;
    }

    #wrap {
    width: 960px;
    margin: 0 auto;
    }
    # {
    text-decoration:none;
    }

    /**Header Styles**//**
    #header {
    margin: 00px 0 20px 0
    }

    h1#logo {
    float:left;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 80px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #rightimage {
    float: right;
    background:url(style/images/rightimage.png) top right no-repeat;
    width: 433px;
    height 202px;
    clear: right;
    }

    h1#logo a {
    color:#FFC;
    }
    *//*
    ul#floatright {
    float:right;
    clear:right;
    }
    */
    ul#nav {
    letter-spacing: 1px;
    line-height:260px;
    font-size: 13px;
    color:#FFC
    font-weight:bold;
    }

    ul#nav li {
    float: left;
    display: in-line;
    margin: 0 20px 0 0;
    font-weight:normal;
    }

    ul#nav li a {
    color:#FFC;
    display:in-line;
    margin: 0 20px 0 0;
    text-decoration:none;
    }

    ul#nav li a:hover {
    color:#EEB0C0;
    display: in-line;
    margin: 0 20px 0 0;
    font-weight:normal;
    }

    ul#nav li.current_page_item a{
    font-weight:bold;
    }

    /**Featured Styles**//**
    #featured_section {
    background:transparent url(style/images/rightimage.png) width: 433px height: 202px no-repeat scroll;
    margin: 0 -25 0 0;
    }
    **/

    #header {
    margin: 00px 0 20px 0;
    position:relative;
    }

    #headergraphic1 {
    position:absolute;
    left:0;
    text-transform:lowercase;
    letter-spacing: 1px;
    font-size: 36px;
    margin:0 0px 0 0;
    background: url(style/images/ilovechocolatelogo.jpg) top left no-repeat;
    width:323px;
    height:92px;
    }

    #headergraphic2 {
    position:absolute;
    right:0;
    margin: 0;

    }

    h1#imageright {
    float: right;
    margin: 0 0 0 0;
    background: url(style/images/rightimage.png) top right no-repeat;
    width: 433px;
    height: 232px;
    }

    *** NEW NAV ***

    #nav {
    background: url(style/images/nav_bg.jpg) repeat-x;
    height: 30px;
    text-align:right;
    }

#65065
sbertrand
Participant

Woot woot! It’s working! I don’t know if I coded it the most appropriate way or not, but it’s now working and starting to look the way that I want it to! Thanks so much for the last post. The diagrams totally helped. It strangely enough illustrated how to nest (don’t know if that’s the right phrase or not) everything and I got it working. Thanks thank thanks! :D

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.