...

View Full Version : Putting two elements beside an image



subnet_rx
10-31-2006, 10:33 PM
I'm trying to put two header elements beside an image, but can only get one beside it and one below in (in IE). Can someone help?



<div id="header">
<a href="/drupal/" title="Index Page"><img src="/drupal/files/logo.jpg" alt="Logo" /></a>
<h1 id="site-name">SITE-NAME</h1>
<h2 id="site-slogan">INSTITUTE OF HIGHER WEB LEARNING</h2>
<ul id="navlist">
<li><a href="/drupal/?q=/node" title="">Home</a></li>
<li><a href="http://www.usm.edu/pr/web/wiki/" title="Web World Wiki">Wiki</a></li>
<li><a href="/drupal/?q=/sitemap" title="">Site Map</a></li>
<li><a href="/drupal/?q=node/2" title="" class="active">Guidelines</a></li>
<li><a href="/drupal/?q=/contact" title="">Contact Us</a></li>
</ul>
</div>
<hr class="hide" />

<div id="sec-navigation">
<ul id="nav-secondary">
<li><a href="/drupal/?q=node/3" title="">Navigation</a></li>
<li><a href="/drupal/?q=node/4" title="">Test</a></li>
</ul>
</div>




#header
{
height:80px;
margin-top:5px;
font-family: georgia, times, serif;
}
#site-name
{
font-size: large;
color:#fff;
font-weight:normal;
display:inline;
border-bottom:2px solid #FDC737;
}
#header img
{
padding: 5px;
padding-bottom:15px;
width:73px;
float: left;
}
#site-slogan
{
display:block;
padding-top:5px;
font-size:large;
font-weight:bold;
}
#navlist
{
float:right;
}

#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited
{
float: left;
text-decoration: none;
background-color: #FDC737;
color: #000;
padding:0px 10px 0px 10px;
line-height: 25px;
margin-left:5px;
background:url(images/tab.jpg) repeat-x;
}

#navlist a:hover
{
text-decoration:underline;
}
#sec-navigation
{
width:100%;
background:url(images/tab2.jpg) repeat-x;
height: 20px;
color: #000;
text-align:right;
line-height:20px;
}
#nav-secondary ul, #nav-secondary li
{
text-align:right;
display:inline;
list-style-type:none;
}

#nav-secondary a:link, #nav-secondary a:visited
{
text-decoration: none;
color: #000;
padding:0px 10px 0px 10px;
line-height: 20px;
margin-left:5px;
font-weight:bold;
}

#nav-secondary a:hover
{
text-decoration:underline;
}

Arbitrator
11-01-2006, 12:53 AM
Is that all of the HTML? How is anyone supposed to know if your page is displaying in standard-compliance or quirks mode? What about the version of Internet Explorer?

subnet_rx
11-01-2006, 03:26 AM
No, that's not all of it. I posted the relevant parts of both the HTML and CSS. I can post the rest tomorrow if you'd like to see it. I'm just trying to figure out how to align two elements beside a floated image.

Arbitrator
11-01-2006, 04:29 AM
Float the two elements in the same direction as the image. The reason I mentioned quirks mode is that Internet Explorer uses a different box model in that mode, so boxes are different sizes than in other browsers. IE6 and 7 have significant rendering differences.

subnet_rx
11-01-2006, 02:45 PM
Floating both elements lines them up beside the image.

subnet_rx
11-01-2006, 04:13 PM
I've changed the layout so that the logo and two elements are now one image. My new problem is that the header has two floats. One is this image, and the other is the tabbed menu. I'd like the menu to be at the bottom of the div obviously, but in FF, it puts it at the top. In IE, it puts it at the bottom. No vertical alignment, padding, or margin that I've tried will position this float in FF.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum