...

View Full Version : Positioning a image



myameego
02-01-2012, 01:56 PM
Hi guys,

I want a position a new DIV with a image between logo at the top, and the search bar.

Here is the site im working on: http://whnpf.perdu.servertrust.com

Everytime I create a new DIV and try to code it, it seems to move my menu over and completely ruin the page.

Really stuck on this one, here is the current code for the HTML and CSS

HTML


<div id="page">



<!-- #################### HEADER #################### -->
<div id="header">
<div id="display_homepage_title"></div>

<div id="headerTop">
<a href="Config_FullStoreURL">Home</a> | <a href="Config_FullStoreURLaboutus.asp">About Us</a> | <a href="Config_FullStoreURLmyaccount.asp">My Account</a> | <a href="Config_FullStoreURLmyaccount.asp"><b>Wholesale Login</b></a> | <a href="Config_FullStoreURLshoppingcart.asp">View Cart</a> | <a href="Config_FullStoreURLhelp.asp">Help</a>
</div>



<!-- #################### SEARCH BOX -->
<div id="display_search">
<form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm">
<input type="text" name="Search" id="search_input" value="" />
<input type="submit" name="Submit" id="search_submit" value="Search"/>
</form>
</div>
</div>

#


CSS


/* ############################### PAGE ############################### */
#page{
margin:0 auto;
text-align:left;
width:950px;
}

/* ############################### HEADER ############################### */
#header{
background:url(../images/template/header_bg.jpg) no-repeat 0 45px;
min-height:150px;
position:relative;
}

/* ############################### LOGO IMAGE AND TEXT */
#display_homepage_title{
left:15px;
position:absolute;
top:60px;
}
#display_homepage_title a{
display:block;
height:75px;
overflow:hidden;
text-align:left;
text-indent:-9999px;
width:10px;
}
a#homepage_title{
background:none;
color:#f89c2f;
font-size:30px;
height:75px;
line-height:36px;
padding-top:0;
text-indent:0;
}

#headerTop{
color:#050505;
font-size:14px;
line-height:24px;
margin-right:10px;
position:absolute;
right:10px;
text-align:right;
top:14px;
width:940px;
}
#headerTop a{
color:#050505;
margin:0 10px;
}


/* ############################### SEARCH BOX */
#display_search{
background:url(../images/template/searchBg.gif) no-repeat 0 0;
height:31px;
position:absolute;
right:18px;
top:84px;
width:297px;
}
#display_search form{
height:100%;
margin:0;
padding:0;
width:100%;
}
#search_input{
background:none;
border:none;
color:#999999;
float:left;
font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:2px 0 0 1px;
padding:3px 10px 1px;
text-align:left;
width:187px;
}
#search_submit{
background:none;
border:none;
color:#c0bfbb;
cursor:pointer;
float:right;
font-size:0;
height:24px;
margin:1px 7px 0 0;
padding:0;
text-align:right;
text-indent:-9999px;
width:70px;
}


Any feedback would be appreciate, thanks!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum