did this but it just put the logo's on top of my header which is not what I want...want them to the left of it and cannot get my CSS to do this?
<div id="my_banner">
<img id="logo" href="http://www.facebook.com"><img src="http://www.stevencrossphotos.com/photos/767905590_btivB-O.png"></>
<img id="logo" href="http://www.twitter.com/Steven_Cross"><img src="http://www.stevencrossphotos.com/photos/767905598_VzK5Z-O.png"></>
<img id="logo" href="http://www.google.com"><img src="http://www.stevencrossphotos.com/photos/768569871_BrXzP-O.png"></>
<img id="logo" href="http://www.youtube.com"><img src="http://www.stevencrossphotos.com/photos
/768569882_6B8GC-O.png"></>
</div> The only design that I could find that made sense was something like this as there simply isn't room for four logos in a single row and a centered banner unless you have a 1600px wide screen (which is not that common).
http://content.screencast.com/users/jfriend/folders/Jing/media/224b0aa3-207c-4c32-8aa9-2ab08a93cf66/2010-01-19_1428.png
To get that, we put your whole header in a container, make that container wider than it is now and then put both the logos and your existing banner in that header. If we set the widths right, the banner can still be centered. To get this, change the first part of your custom header to this:
<div id="myBannerContainer">
<div id="myLogoContainer">
<a class="my_logo" href="http://www.facebook.com"><img src="http://www.stevencrossphotos.com/photos/767905590_btivB-O.png"></a>
<a class="my_logo" href="http://www.twitter.com/Steven_Cross"><img src="http://www.stevencrossphotos.com/photos/767905598_VzK5Z-O.png"></a>
<a class="my_logo" href="http://www.google.com"><img src="http://www.stevencrossphotos.com/photos/768569871_BrXzP-O.png"></a>
<a class="my_logo" href="http://www.youtube.com"><img src="http://www.stevencrossphotos.com/photos/768569882_6B8GC-O.png"></a>
</div>
<div id="my_banner">
</div>
</div>
and all your CSS to this:
#myLogoContainer {float:left; height: 100px; width: 125px;}
#my_banner {float:left;}
#myBannerContainer {display: none; margin: 0 auto; width: 1000px; margin-top: 5px;}
#my_banner {
width: 750px;
height: 150px;
xmargin: 0 auto;
background: url(http://www.stevencrossphotos.com/photos/690861652_2oU9o-O.gif)
no-repeat;
border: 1px solid #000;
}
.homepage #myBannerContainer {
display: block;
}
body { background-color: #474745 !important;
background-image: url(http://www.stevencrossphotos.com/photos/764823003_y5WaR-O.jpg) !important; background-repeat: repeat !important;
background-position: center !important;
color: #FFFFFF; font-family: verdana !important; }
.nav, .nav .title, a.nav, a.nav:visited, a.nav:active, a.nav:hover, .pageNav, a.down, a.down:active, a.down:hover, a.down:visited, .nav a.down { color: #FFFFFF !important; font-family: arial !important; }
.title,
#userHome.title { font-family: arial !important; color: #FFFFFF !important; }
.boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active,
#albumDescription a, #albumDescription a:hover, #albumDescription a:visited, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited, #displayPhoto a:active {color: #A1A5A9; font-family: arial !important; }
.description { color: #FFFFFF !important;font-family: verdana !important; }
.foreground { color: #FFFFFF; font-family: verdana !important; }
.updated { color: #FFFFFF !important; font-family: verdana !important; }
.boxBottom,
#photos { background-color: #000000 !important; background-image: none !important; }
.alert, a.alert { color: #FFFFFF; font-family: verdana !important; }
#userName, #userHome { display: none; }
.cartlink_footer { display: none; }
.helplink_footer { display: none; }
/** END: EZC CSS **/
/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */
/* CSS Section */
/* style the outer div to give it width */
.menu {
margin: auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
width:750px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family: skia;
text-decoration:none;
color:black;
width:auto; /* Defines the main box dimensions. */
height:35px; /*How tall your cells are*/
border:1px solid #000;
background:#69e;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:100px;
w\idth:100px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:yellow;
border: 1px solid #000;
width: 100px;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#b2ab9b;
}
.menu ul ul :hover > a.drop {
background:blue;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:yellow;
border: 1px solid #000;
width: 100px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:blue;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
z-index:99;
visibility:hidden;
position:absolute;
height:0;
top:35px;
left:0;
width:100px; /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}
/* position the third level flyout menu */
.menu ul ul ul{
left:125px;
top:0;
width:100px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:yellow;
color:blue;
height:auto;
line-height:1em;
padding:7px 12px;
width:100px;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a{
width:100px;
w\idth:100px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:green;
background:blue;
}
.menu :hover > a, .menu ul ul :hover > a {
color:white;
background:blue;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
/* End Navbar Code */
#userBio {
width: 550px;
display: inline;
float: left;
position: relative;
color: white;
}
#bioBox .boxTop {
display: block !important;
}
#albumDescription {
color: white;
background-color: black;
}
#customFooter {
width: 750px;
height: 30px;
background-color: black;
color: #69e;
text-align: center;
margin: 0 auto;
}
#bioBox{
background-color: black;
}
#popularPhotos{
background-color: black;
}
#galleriesBox{
background-color: black;
}
#comment{
background-color: black;
}
#albumNav_top{
background-color: black;
}
#journal_entries{
background-color: black;
}
#breadCrumbTrail{
background-color: black;
display: none;
}
.popularGallery #cartButtonsWrapper {
display: none;}
.boxTop {
background-color: black;
}
#cobrand_footer.nav{
width: 750px;
background-color: black;
}
/* START gallery 10883336*/
.gallery_10883336 #albumDescription {
margin-top: 30px; /* gap from navbar at top */
margin-bottom: 4px;
background: black; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
}
.gallery_10883336 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */
.gallery_10883336 .myPhoto img {
border: 4px ridge #46e; /* add border around photo */
}
.gallery_10883336 .myTitle {
font-size: 150%;
color: #ff0;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}
.gallery_10883336 .myText {
font-size: 100%;
color: white;
font-weight: normal;
text-align: justify;
}
.gallery_10883336 .nophotos h3 {
display: none;
}
.gallery_10883336 .journal_entry {
display: none;
}
.gallery_10883336 #albumNav_top {
display: none;
}
.gallery_10883336 #albumNav_bottom {
display: none;
}
.gallery_10883336 #breadcrumb {
display: none;
}