Cant get my banner in the content area

HTML & CSS
1

Hi,

I have a JQuery banner which I am experimenting with.

I cant get the banner to sit inside my logo div inside the container.

I tried adding margins and such but it doesnt seem to move it in line.

Can anyone tell me why please?

http://mgdesign.hostultra.com/layout/index_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
 
 
 <head>
                   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      
      
        <title>Home Page</title>
     
<link rel="stylesheet" href="style.css" type="text/css" />

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.innerfade.js"></script>
		
		<script type="text/javascript">
	   $(document).ready(
				function(){
					$('#news').innerfade({
						animationtype: 'slide',
						speed: 750,
						timeout: 2000,
						type: 'random',
						containerheight: '1em'
					});
					
					$('ul#portfolio').innerfade({
						speed: 1000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '250px'
					});
					
					$('.fade').innerfade({
						speed: 1000,
						timeout: 6000,
						type: 'random_start',
						containerheight: '1.5em'
					});
					
					$('.adi').innerfade({
						speed: 'slow',
						timeout: 5000,
						type: 'random',
						containerheight: '250px'
					});

			});
  	</script>

		<link rel="stylesheet" href="css/reset.css"  type="text/css" media="all" />


</head>



 <body id="top">
                
<div id="container">                
               
     <div id="logo">
     
     				<ul id="portfolio">					
					<li>
						<img src="images/1.jpg" alt="Banner 4" />
					</li>
					<li>
						<img src="images/2.jpg" alt="Banner 4" />
					</li>					
					<li>
						<img src="images/3.jpg" alt="Banner 4" />
					</li>					
					<li>
						<img src="images/4.jpg" alt="Banner 4" />
					</li>		
								
				</ul>

    
	</div>
  
  
           
<div class="menu">
        
        <ul>            
             
    <li><a href="" title="" class="active">Home</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="" >Link</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>
    <li><a href="" title="">Link</a></li>
            
        </ul>

</div>
              
                                                               
<div id="content">
                                
<h1 class="underline">Title</h1>
                                
        
<p class="headliner">Blah blah.</p>
              
<p class="headliner_2">Blah blah..</p>
                
<br />
                
<h2 class="underline">Info</h2>
             
<p>Content</p>


</div>
                 
      

                        
<div id="content_right">
<h2 class="grey">Side Feature</h2>

<p> Content area.</p>
</div>


<div id="content_right">
<h2 class="grey">More content room.</h2>

<p> .</p>
</div>
       
            
                   
<div id="footer">
    
    

     <div id="section1">
	
    <h4>Disclaimer / Site Map / Extra Space </h4>
               
               
               </div>



<div id="section2">  <a href="#top"><img src="images/top.gif" width="100" height="22" alt="Back To Top button" /></a>
  <p>footer notes </p></div>
 


 </div>
 
 
 </div>
 
 


</body>
</html>

Style.css

@charset "utf-8";
/* CSS Document */

    body {
		text-align:center;
		font-family:Arial, Helvetica, sans-serif;
		margin-top:0px;
		margin-bottom:0px;
		font-size:.82em;
		background-color:#012646;
		 }	



/* -----------------LOGO & BANNER------------------- */

#logo
{
	width:930px;
	height:250px;
	background-repeat:no-repeat;
	margin-right:100px;
}



/* -----------------CONTAINER------------------- */


#container {
width:930px;
background-color:#fff;
margin-left: auto;
margin-right: auto;
margin-top:0px;
border:#000 solid 1px;
padding:10px;
text-align: left;
}


/* -----------------MAIN CONTENT------------------- */



#content

{
	width:580px;
	background-color:#fff;
	padding: 10px, 10px, 10px, 10px;
	margin-right:40px;
	margin-bottom:100px;
	min-height:600px;
	padding:5px;
	float:left;
}






/* -----------------MENU---------------------------- */

.menu{
	border:none;
	width:920px;
	border:0px;
	margin-bottom:20px;
	margin-top:10px;
	padding:0px;
	font-family:Tahoma, Geneva, sans-serif;
	text-transform:uppercase;
	font-weight:bold;
	}
	
	
.menu ul{
	background:#2a2a2a;
	height:35px;
	list-style:none;
	width:930px;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
		
		
	.menu li a{
		background:#2a2a2a url("images/seperator.gif") bottom right no-repeat;
		color:#fff;
		display:block;
		line-height:35px;
		font-size:10px;
		margin:0px;
		padding:0px 20px;
		text-align:center;
		text-decoration:none;
		}
		
		
	.menu li ul{
		background:#2a2a2a;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		position:absolute;
		width:240px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
		
		
	
		/* -----------------MAIN MENU CHANGE STATES------------------- */
		
		
	.menu li a:hover,.menu li a.active, .menu ul li:hover a{
    background: #e3e0d5 url("images/hover2.gif") bottom center no-repeat;
    color:#000;
    text-decoration:none;
}
			
			



/* -----------------CONTENT RIGHT------------------- */


#content_right

{
	width:280px;
	float:right;
	text-align:left;
	margin-top:5px;
	padding:5px;
}

#content_right2

{
	width:280px;
	float:right;
	margin-bottom:150px;
	text-align:left;
	padding:5px;

}





/* -----------------TEXT STYLING------------------- */


p
{
	color:#3d4b54;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.6em;
	font-size:1.1em;
	
}

p.portfolio
{
	line-height:1.4em;
}

p.headliner
{
	font-size:1.4em;
	font-family:Tahoma, Geneva, sans-serif;
	line-height:1.3em;
}

p.headliner_2
{
	font-size:1.2em;
	font-family:Tahoma, Geneva, sans-serif;
	line-height:1.3em;
}





h1,h2
{
	color:#002f53;
	margin-top:10px;
	_margin-top:20px;
}

h1
{
	font-size:2em;
}

h2
{
	font-size:1.6em;
}

h3
{
	color:#666;
	font-size:1.3em;
}

strong.1
{
	color:#2a2a2a;
}

h2.grey
{
	color:#002f53;
	border-bottom:1px dashed #ccc;
	padding:1px;
}

h3.underline
{
	border-bottom:1px solid #ccc;
	color:#002f53;
}

h3.blue
{
	color:#0176c3;
}

h1.underline
{
	color:#002f53;
	border-bottom:1px dashed #ccc;	
}


h4
{
	color:#0079c1;
	font-size:1.3em;
	
}

h2.underline
{
	padding:1px;
	border-bottom:1px dashed #ccc;
	
}


hr {border: none 0;
border-top: 1px dashed #454242;
margin-top:60px;
margin-bottom:60px;
height: 1px;
} 

hr.side {border: none 0;
border-top: 1px dashed #cccccc;
margin-top:15px;
margin-bottom:15px;
height: 1px;
} 


span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}



label {
color: #002f53;
font-weight: bold;
display: block;
float: left;
}

/* ----------------- LISTS ------------------- */




ul
{
	margin-bottom:10px;
	margin-top:10px;
}

ol
{
	margin-bottom:10px;
	margin-top:10px;
}

ol.li
{
	color:#06F;
}
	





li.steps
{
	margin-bottom:15px;
	font-size:1.25em;

}



/* ----------------- LINKS ------------------- */

a.link
{
	color:#fff;
	background:#09f;
	padding:3px;
	text-decoration:none;
	
}

a.link:hover
{
	color:#fff;
	background-color:#000;
	text-decoration:none;
	padding:3px;
}



/* -----------------IMAGE STYLING------------------- */


img.left
{
	float:left;
	padding:5px;
}

img.left_clear
{
	float:left;
	padding:15px;
	margin-bottom:45px;
}

a img {border:1px solid #999;}


img.a
{
	border:1px solid #999;
}




/* -----------------FOOTER------------------- */



#footer
{
	background-color:#2a2a2a;
	width:930px;
	clear:both;
	height:200px;
	color:#FFF;
}



#footer a
{
	color:#FFF;
}



#footer a:hover
{
	color:#09F;
}


#footer p
{
	color:#CCC;
	text-align:right;
}

#section1

{
	padding:5px 5px 0 0px;
	font-family:Tahoma, Geneva, sans-serif;
	width:380px;
	height:100px;
	float:left;
}

#section1 a.active

{
	color:#0CF;
}

#section1 ul li{
	font-size:11px;
	color:#666666;
	list-style:square;
	display:inline;
	padding-bottom:2px;
}

#section1 h4
{
	margin-left:20px;
	color:#FFF;
}


#section2

{
	padding:5px 15px 0 0px;
	width:340px;
	text-align:right;
	margin-top:120px;
	float:right;

}

#section2 p
{
	margin-left:11px;
}





.form_left
{
margin:0px 0px 0px 0px;
width:120px;
float:left;
}

.form_right

{
	margin:0px 0px 0px 0px;
	float:right;
	width:260px;
	}



#level
{
	width:510px;
	height:50px;
	clear:both;
	margin-bottom:15px;
}


#level2
{
	width:510px;
	height:50px;
	margin-bottom:15px;
	clear:both;
}


#level3
{
	width:530px;
	margin-bottom:75px;
	clear:both;
}

Reset.css

ol,ul {list-style:none;}

ul.portfolio{
	border:0px;
}

li.img
{
	margin-left:30px;
}
2

I tried that, didnt work.

:S

3 
ul#portfolio {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

Including that in the CSS makes the banner line up correctly for me in FF, IE6/7/8, Chrome and Opera (all tested on win7 x64).

Only in IE6 the page is too wide, but I think that’s a separate issue.

4

Ah sir, you are a gentleman, thank you!

:slight_smile:

I never thought to try it with the #

I was writing the changes into ul.portfolio

the class and not the ID.

Lesson learned.

Much obliged!

5

You should set the margin-left of ul#portfolio to 0 :slight_smile:

Edit:

Scratch that, I mean set padding-left to 0 :slight_smile: