Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Putting two elements beside an image

    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?

    Code:
    <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>
    Code:
    #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;
    }

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    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?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Floating both elements lines them up beside the image.

  • #6
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •