This is what my website is supposed to look like:

 

 

but this is what I get with Opera:

 

 

I'm using CSS for layout. Can anyone help me?

Hi, We really need to see your code to help you or even better is this site live?if so whats the address? Thanks

Hi, We really need to see your code to help you or even better is this site live?if so whats the address? Thanks

 

 

It's not connected to the index page yet, but the link to the page I've sent is:

 

http://www.adverbdesigns.com/portfolio.html

The div id "left" doesn't have a width to it so, quite rightly, Opera is placing the image with the normal document flow.

 

I suggest wrapping your header in it's own div to give you a bit more control, something like ...

 

<div id="header">

<!-- LOGO -->
<img src="images/adverblogo.png" width="265" height="120" class="logo" />

<!-- GLOBAL NAVIGATION -->
<div id="globalmenu">
<a href="mailto:mhughes@adverbdesigns.com">Email Me</a> | <a href="portfolio.html">Portfolio</a> | <a href="pricing.html">Pricing</a>
</div>

</div>


#header {
float: left;
width: 100%;
}
.logo {
float: left;
margin: 0 10px 0 0;
}

The div id "left" doesn't have a width to it so, quite rightly, Opera is placing the image with the normal document flow.

 

I suggest wrapping your header in it's own div to give you a bit more control, something like ...

 

<div id="header">

<!-- LOGO -->
<img src="images/adverblogo.png" width="265" height="120" class="logo" />

<!-- GLOBAL NAVIGATION -->
<div id="globalmenu">
<a href="mailto:mhughes@adverbdesigns.com">Email Me</a> | <a href="portfolio.html">Portfolio</a> | <a href="pricing.html">Pricing</a>
</div>

</div>
#header {
float: left;
width: 100%;
}
.logo {
float: left;
margin: 0 10px 0 0;
}

 

Awesome! I'll try that! Thank you.

The div id "left" doesn't have a width to it so, quite rightly, Opera is placing the image with the normal document flow.

 

I suggest wrapping your header in it's own div to give you a bit more control, something like ...

 

<div id="header">

<!-- LOGO -->
<img src="images/adverblogo.png" width="265" height="120" class="logo" />

<!-- GLOBAL NAVIGATION -->
<div id="globalmenu">
<a href="mailto:mhughes@adverbdesigns.com">Email Me</a> | <a href="portfolio.html">Portfolio</a> | <a href="pricing.html">Pricing</a>
</div>

</div>
#header {
float: left;
width: 100%;
}
.logo {
float: left;
margin: 0 10px 0 0;
}

 

 

That made my image stay within the frame on Opera, but now my links are not where I want them. What now?

You probably need to define a width and float to #globalmenu - you can set the width to whatever you like.

 

#globalmenu {
float: left;
width: auto;
text-align:center; 
font-size:1.5em; 
font-family:bank gothic, arial, sans-serif; 
height:120px;
}

You probably need to define a width and float to #globalmenu - you can set the width to whatever you like.

 

#globalmenu {
float: left;
width: auto;
text-align:center; 
font-size:1.5em; 
font-family:bank gothic, arial, sans-serif; 
height:120px;
}

 

 

Ok, not sure what happened, but I went ahead and started from scratch, since I didn't have that much, and somehow I resolved the problem. I think I just hadn't divided my page right. Thanks so much for your help. BTW, if you visit the link it will still look the same I'm still in the process of updating. But thank you for your help!

No problem, once you have the "eureka" moment it will all seem much clearer!