Image float(?) right on a header

[sbertrand]

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

[sbertrand]

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

[sbertrand]

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

[Author]

Posts