asp.net - Moving CSS Header Logo Closer to Edge of Layout -
i'm helping friend fix few small things on website , have few questions css issue i'm having. before tells me read css book before try move logo closer edge of screen - understand i'm android/java developer (primarily) , i'm pretty sure can handle simple task.
it's acting bit funny , need quick hand...
i have our header logo: img src="img/logo.png
which appearing bit far left edge.
i've taken @ image it's self , it's cropped appropriately.
how might move logo bit left? (every time attempt change #header-inner value entire header collapses strange reason.)
screenshot:
css source:
/*====header =======================================================*/ #header { border-top: 1px solid #525252; border-bottom: 1px solid #525252; -webkit-box-shadow: 0 5px 0 #1e1e1e; -moz-box-shadow: 0 5px 0 #1e1e1e; box-shadow: 0 5px 0 #1e1e1e; margin-bottom: 42px; } #header-inner { width: 930px; margin: 0 auto; background: url(../img/back-light-1.png) no-repeat left center; padding: 20px 0; } #title { float: left; } #logo h1 { font-family: bebas, arial, sans-serif; color: #f7f7f7; padding-top: 10px; margin-bottom: 3px; font-size: 30px; text-shadow: 1px 1px 1px #262626; letter-spacing: 1px; font-weight: normal; } #logo h1 { color: #f7f7f7; text-decoration: none; } #logo h1 a:hover { text-decoration: none; } #logo p { font-size: 10px; text-transform: uppercase; margin-bottom: 0; color: #f7f7f7; } #logo img { float: left; margin-right: 10px; } /*====navigation =======================================================*/ #navigation { float: right; margin-top: 2px; position: relative; z-index: 1200; } #navigation li { display: block; float: left; position: relative; margin-left: 10px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-transition: background-color .2s linear; -moz-transition: background-color .2s linear; -o-transition: background-color .2s linear; -ms-transition: background-color .2s linear; transition: background-color .2s linear; } #navigation li:hover { background-color: #121212; text-shadow: none; } #navigation li { font-family: bebas, arial, sans-serif; font-size: 18px; color: #f7f7f7; text-decoration: none; padding: 10px; display: inline-block; margin-bottom: 0px; } #navigation li span { font-family: arial, sans-serif; text-transform: uppercase; font-size: 9px; display: block; line-height: 14px; } #navigation li .active-nav, #navigation li .active-nav:hover { background-color: #8eaf2a; text-shadow: 1px 1px 0px #333; border-top-right-radius: 8px; border-bottom-left-radius: 8px; } #navigation li.dropdown { border-bottom-left-radius: 0; } #navigation li.dropdown .active-nav { border-bottom-left-radius: 0; } html source:
<!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> <title>company name - ny</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!--imports main css file--> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> <!--imports prettyphoto css file--> <link rel="stylesheet" type="text/css" media="screen" href="css/prettyphoto.css" /> <!--imports jquery--> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--imports twitter feed plugin--> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!--imports easing plugin--> <script type="text/javascript" src="js/easing.js"></script> <!--imports prettyphoto plugin--> <script type="text/javascript" src="js/jquery.prettyphoto.js"></script> <!--imports jquery tools plugin--> <script type="text/javascript" src="js/jquery.tools.min.js"></script> <!--imports jquery superfish plugin--> <script type="text/javascript" src="js/superfish.js"></script> <!--imports jquery jflickrfeed plugin--> <script type="text/javascript" src="js/jflickrfeed.min.js"></script> <!--imports jquery asyncslider plugin--> <script type="text/javascript" src="js/jquery.asyncslider.min.js"></script> <!--imports custom javascript code--> <script type="text/javascript" src="js/custom.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { // setup slider $("#async-slider").asyncslider({ keyboardnavigate: true, easing: 'easeinoutexpo', mintime: 600, maxtime: 1500, autoswitch: 4800, centerprevnextnav: false, slidesnav: false }); }); </script> <!--[if ie 7]><link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> <!--[if ie 8]><link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" /> <![endif]--> </head> <body> <div id="header" class="pattern-1"> <div id="header-inner"> <div id="logo"> <img src="img/logo.png" alt="image description"/> <div id="title"> <h1><a href="index.asp">company name - ny</a></h1> <p></p> </div><!-- end title --> </div><!-- end logo --> <ul id="navigation"> <li> <a class="active-nav" href="index.asp">home </a> </li> <li> <a href="about.asp">about </a> </li> <li> <a href="#">energy partnership program </a> </li> <li> <a href="#">products </a> </li> <li> <a href="#">contact </a></li> <li> <a href="#">affiliates </a> </li> </ul><!-- end navigation --> <div class="clear"></div><!-- end clearfix --> </div><!-- end header-inner --> </div><!-- end header --> <!-- begin async slider --> <div id="content-slider"> <ul id="async-slider"> <li class="slide"> <div class="three-fifth fl-left" style="width: 425px; height: 242px"> <h2>company name - ny</h2> <h3><i>"a not profit company!"</i></h3> <p>...</a> </div> <img class="fl-right" src="img/sliders/async/1.png" alt="image" width="468" height="329" /> </li> <li class="slide"> <div class="three-fifth fl-left"> <h2>energy efficient lighting products fit needs</h2> <h3><i>t8, t12, e27, outdoor lighting, etc</i></h3> <p>...</a> </div> <img class="fl-right" src="img/sliders/async/2transparent.png" alt="image" width="347" height="305" /> </li> <li class="slide"> <div class="three-fifth fl-left"> <h2>tax credits , grants available qualify</h2> <h3><i>federal, state , local tax incentives available</i></h3> <p>...</a> </div> <img class="fl-right" src="img/sliders/async/3.gif" alt="image" /> </li> <li class="slide"> <img class="fl-left" src="img/sliders/async/4transparent.png" alt="image" width="347" height="305" /> <div class="three-fifth last fl-right"> <h2>create comprehensive energy profile</h2> <h3><i>calculate energy savings in real time!</i></h3> <p>...</a> </div> </li> </ul> <div class="clear"></div><!-- end clearfix --> </div><!-- end content-slider --> <!-- end async slider --> <div class="container pattern-1"> <div class="tagline"> <div class="tagline-text"> <h2>welcome company name - ny</span> </h2> <p><i>"a not profit company!"</i></p> </div><!-- end tagline-text --> <div class="tagline-btn"> <a href="#"><span class="main">"calculate energy savings now!"</span><span class="arrow-btn"></span></a> </div><!-- end tagline-btn --> <div class="clear"></div> </div><!-- end tagline --> </div><!-- end container --> <div id="wrapper"> <div class="one-half"> <div class="box-title"> <h3>ep program</h3> <span class="box-subtitle">energy partnership</span> </div><!-- end box-title --> <p>today, emphasis on greener energy, products , way of life….....the economic climate has businesses looking type of edge can utilize maximize earnings potential of every dollar earned. requires proactive, concieved, structured , customized new approach rectify of same issues have plagued companies regardless of size or industry. how able cut spending?? lower monthly expenses?? increase productivity (thus creating growth in revenue , potential earnings)?? while not sacrificing employees or level of quality of products or services offered.even generate revenue expense, while improving workplace environment. our epp or energy partnership program takes fctors of day- to-day operations considertaton when examine current energy consumption patterns. ....we analyze data collected, focus on specific (customized) needs. @ point strategize multiple options can used save 40-75% on next electric bill. offer several different ways within “ep program” implement customized plan designed attain these lofty goals.</p> <a class="button" href="about.asp">continue reading</a> </div><!-- end one-half --> <div class="one-half last services"> <div class="box-title"> <h3>services</h3> <span class="box-subtitle">company name - ny</span> </div><!-- end box-title --> <div class="one-fourth"> <div class="box-title"> <h4>energy resources:</h4> <img src="img/icons/spanner.png" alt="image" /> </div><!-- end box-title --> <p>information , resources energy , energy savings.</p> </div><!-- end one-fourth --> <div class="one-fourth last"> <div class="box-title"> <h4>educational resources:</h4> <img src="img/icons/pencil.png" alt="image" /> </div><!-- end box-title --> <p>your one-stop source energy efficiency knowledge.</p> </div><!-- end one-fourth --> <div class="one-fourth"> <div class="box-title"> <h4>create energy profile:</h4> <img src="img/icons/gear.png" alt="image" /> </div><!-- end box-title --> <p>create , analyze comprehensive energy profile free!</p> </div><!-- end one-fourth --> <div class="one-fourth last"> <div class="box-title"> <h4>tax counseling:</h4> <img src="img/icons/phone.png" alt="image" /> </div><!-- end box-title --> <p>find out federal, state , local tax breaks may qualify for.</p> </div><!-- end one-fourth --> </div><!-- end one-half --> <div class="clear"></div> <div class="separator"></div> <div class="title-col"> <h2>our latest projects</h2> <p>"coming soon"</p> <a class="button" href="#">view portfolio </a> </div><!-- end main-col --> <div class="gallery-thumbs-caption"> <div class="one-fourth"> <div class="gallery-overlay"> <a class="zoom" href="img/portfolio/large/001.jpg" rel="prettyphoto"> <img class="box-img" src="img/box-img-1.jpg" alt="description" width="200" height="122" /> </a> </div> <div class="img-caption"> <h4>project title one</h4> <p>fusce scelerisque pellentue mi. suspen disse elementellus lorem ipsum.</p> </div><!-- end img-caption --> </div><!-- end one-fourth --> <div class="one-fourth"> <div class="gallery-overlay"> <a class="play" href="http://vimeo.com/7449107" rel="prettyphoto"> <img class="box-img" src="img/box-img-2.jpg" alt="description" width="200" height="122" /> </a> </div> <div class="img-caption"> <h4>project title two</h4> <p>fusce scelerisque pellentue mi. suspen disse elementellus lorem ipsum.</p> </div><!-- end img-caption --> </div><!-- end one-fourth --> <div class="one-fourth last"> <div class="gallery-overlay"> <a class="link" href="http://www.themeforest.net?iframe=true&width=70%&height=60%" title="themeforest.net" rel="prettyphoto"> <img class="box-img" src="img/box-img-3.jpg" alt="description" width="200" height="122" /> </a> </div> <div class="img-caption"> <h4>project title three</h4> <p>fusce scelerisque pellentue mi. suspen disse elementellus lorem ipsum.</p> </div><!-- end img-caption --> </div><!-- end one-fourth --> <div class="clear"></div> </div><!-- end gallery-thumbs-caption --> <div class="separator"></div> <div class="title-col"> <h2>latest news</h2> <p>"coming soon"</p> <a class="button" href="#">continue reading </a> </div><!-- end main-col --> <div class="news"> <div class="one-fourth"> <h4>comunion , 2 oracles</h4> <span class="news-meta">by john doe on mar 22, 2012</span> <p>praesent lobortis, turpis sit amet dignissim sagittis. fusce scelerisque pellentesque mi... <a href="#">read more</a></p> </div><!-- end one-fourth --> <div class="one-fourth"> <h4>orion hunter</h4> <span class="news-meta">by john doe on mar 22, 2012</span> <p>praesent lobortis, turpis sit amet dignissim sagittis. fusce scelerisque pellentesque mi... <a href="#">read more</a></p> </div><!-- end one-fourth --> <div class="one-fourth last"> <h4>through looking glass</h4> <span class="news-meta">by john doe on mar 22, 2012</span> <p>praesent lobortis, turpis sit amet dignissim sagittis. fusce scelerisque pellentesque mi... <a href="#">read more</a></p> </div><!-- end one-fourth --> <div class="clear"></div> </div><!-- end news --> </div><!-- end wrapper --> <!--#include file="footer.asp" -->
this depends if padding value set on #header-inner, reduce left padding value move #logo closer left.
if want move logo left without changing padding. can use negative left margin or left value. require add position: relative #logo element ( in case of using left) or when using negative left margin (it not need set relative positioning).
Comments
Post a Comment