How to make Logo Push Little Down?

hi friends

can someone tell me? how i can make my logo little down! and Search box placement after the logo,

Currently Search Engine is on top left

www.toptensthings.com

thanks, waiting

Hey there,

Remove the height on the header and use padding to space it out.


#header {
    background-color: #FFFFFF;
    [B]padding: 30px 0;[/B] /* 30px above and below */

}

Because the h1 is floated left you should be able to stick #searchform after it floated left as well.

i did the for logo,

can you explain plz about search box , could not able to understand

i need one more favour, if you can see toptensthings.com navigation, its in white color , i want to change navigation background to black, and text in White , and when mouse over to navigation, its shows light blue color; which matched color of logo.

thanks


#nav2, #nav2 ul li a {background: black;}
#nav2 a {color: #fff;}
#nav2 li a:hover {background: #00afef;}

sir when i mouse over to navigation, it is still showing me REd color, i want a blue color, thanks waiting , toptensthings.com

You haven’t used the code I gave you!

sir check now i did, main navigation , you can see yourself :frowning:

You still have the old styles in default.css, and they are overriding the new styles:


#nav2 {
  background-color: #FFFFFF;
  border-bottom: 3px solid #CC0000;
}

#nav2 li a:hover {
  background: none repeat scroll 0 0 #CC0000;
  color: #FFFFFF;
}

Remove those from default.css.

[QUOTE=ralph.m;5059387]You still have the old styles in default.css, and they are overriding the new styles:

sir i replaced code with your last one i guess, now text and background is fine

text black , and background white

now , only mouse over, red to blue

No, you still have those styles I posted above in default.css. Take them out.

default.css:


[s]#nav2 {
  background-color: #FFFFFF;
  border-bottom: 3px solid #CC0000;
}

#nav2 li a:hover {
  background: none repeat scroll 0 0 #CC0000;
  color: #FFFFFF;
}[/s]

sir i deleted the code, now what to do, what code, should i insert

Go into default.css

Go to where it gives the hover for #CC0000. It’s on rule #nav2 li a:hover{}. REMOVE IT.

It’s overriding the blue color style. That’s why it’s red :).

No you didn’t.

Find the file called default.css.

Go to lines 51-55 (or thereabouts).

Delete (that is, cut out, get rid of) this code:


#nav2 {
  background-color: #FFFFFF;
  border-bottom: 3px solid #CC0000;
}

#nav2 li a:hover {
  background: none repeat scroll 0 0 #CC0000;
  color: #FFFFFF;
}

Then save default.css.

Then upload default.css to your server (if you were changing the version stored on your computer).

sir i deleted the lines in editor default.css at cpanel , as you recommended me steps, now tell me, the code, where i ve to put :slight_smile:

Yay! Now just refresh your browser. It is working. :slight_smile:

O, now it’s changed again! Jeesh. Make sure you still have these styles somewhere:


#nav2, #nav2 ul li a {background: black;}
#nav2 a {color: #fff;}
#nav2 li a:hover {background: #00afef;}

thanks sir :slight_smile: sir you can see the “home” button above top menu, why it is coming there, and more thing, which editor you guys see the CSS code :smiley:

You have this in your HTML:


<div id="nav-left">
  <ul id="nav1">
    <li class="current_page_item"><a href="http://www.toptensthings.com/">Home</a></li>
  </ul>
</div>

which editor you guys see the CSS code :smiley:

Not an editor, but a browser. I use Firefox, with Firebug add-on. But in Chrome, just right click on any element > inspect element, and it shows you all the HTML and CSS that applies to the element. :slight_smile:

[QUOTE=ralph.m;5059433]You have this in your HTML:

thanks sir, very your kind time :slight_smile: i also learning web development, its really takes a lot of practice

Yes, it does! But feel free to ask as many questions as you need to. I still have a lot to learn too. :slight_smile:

If you can’t get that Home link out of your HTML, you could hide it. Just change this


#nav-left {
  display: [COLOR="#0000FF"]inline[/COLOR];
  float: left;
  width: 600px;
}

to this


#nav-left {
  display: [COLOR="#ff0000"]none[/COLOR];
  float: left;
  width: 600px;
}

in style.css, line 117.