Jump to content

How do i do this in CSS?

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1
kentona

kentona

    Newbie

  • Members
  • PipPip
  • 19 posts
Hi the image that you see below is the top bar i have created for my website. As you can see it doesn't fit the very top of the screen and the width doesn't reach both ends.

http://img535.images...4/csstopbar.png

Here is the css code for the top bar below.


/* top */


#top {

	background: url(images/top.jpg); height: 45px; font-size: 14px; color: #FFFFFF; width: 100%; display: block; text-align: left; border-bottom: 5px #FFFFFF solid;

	}

#top ul {

	margin: 0px 0px 0px 20px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; 

	}

#top ul li {

	float: left; display: inline; list-style-type: none; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif;

	}

#top ul li.top_text {

	padding-top: 15px; font-size: 14px;

	}

#top ul li.top_form {

	padding-top: 10px;

	}

#top ul li.top_input {

	padding-top: 14px; vertical-align: middle;

	}

#top form {

	margin: 0px; padding: 0px;

	}

#top ul li.top_text_right {

	padding-top: 15px; float: right; margin-right: 20px; font-size: 14px;

	}

#top ul li.t {

	padding-left: 20px;

	}

#top ul li img {

	vertical-align: middle;

	}

#top a {

	color: #FFFFFF; font-weight: bold;

	}

#top ul li.top_line, #top ul li.top_line_right {

	background-image: url(images/top_line.jpg); width: 4px; height: 45px; background-repeat: no-repeat; margin: 0px 10px;

	}

#top ul li.top_line_right {

	float: right;

	}

#top ul li.top_select {

	float: right; padding: 13px 20px 0px 0px;

	}

#top select {

	border: 1px solid #b5c7c9; padding: 1px; text-align: left; font-size: 12px; color: #125a84; height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;

	}

#top input.text {

	border: 1px solid #000000; width: 150px; padding: 0px; text-align: left; vertical-align: middle;

	}


Can anyone tell me how to do this, what code i have to put in? Thankyou.

#2
Guest_johnny.dacu_*

Guest_johnny.dacu_*
  • Guests
First: if you want to fit the bar on top at your page then use a reset declaration. A simple one is: *{margin:0; padding:0} (check Eric Meyer's reset code if you want a more adv technique).
Second: why do you use entire image? Slice it 2-3px width and repeat it along x axe like:
#top{
background: url("img.png") top left repeat-x;
}