CSS - Coding This In Css

i am new to css and want to use a background image for my navigation/link lists....

i have been working on this ALL DAY and have changed so much of the code i really have screwed everything up...

i want the RESOURCE title to move up more toward the top of the graphic....

and my lists are totally messed up -- i want them all to be UL not OL... and none of the link attributes are working at all...

please check my code and tell me what is WRONG- i am sure there are alot of mistakes...

I had things perfect in the ARTWORK part of the code and then worked on the RESCOURCES and somehow EVERYTHING got majorly messed up--
i am now totally confused and am about to tear my hair out .....or worse

i am desperate!!!!

thanks so much for any help that can be provided....i really appreciate it



graphic

here is the entire code--

#linkList {
background-color: transparent;
background-image: url(IMAGES/navbar2a.jpg);
height: 364px;
width: 185px;
background-repeat: no-repeat;
position: absolute;
margin: 100px;
top: 100px;
}


#linkList h3 { THIS IS "ARTWORK"
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
height: 10px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 1px;
width: 151px;
color: yellow;

}

#lresources { THIS IS "RESOURCES"

font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: yellow;
margin-left: 20px;
padding-bottom: 10px;
padding-left: 29px;
padding-right: 29px;
padding-top: 10px;



#linkList li {
background-color: transparent;
display: block;
color: yellow;
line-height: 3em;

margin-left: 5px;
padding-bottom: 2px;
padding-left: 50px;
padding-right: 50px;
padding-top: 1px;
}


#linkList2 {
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 10px;
color: lime;
margin-bottom: 48px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding: 0px;
}


NONE OF THESE ARE WORKING
#linkList li a:link {
background-color: transparent;
color: lime;
list-style-type: none;
}

#linkList li a:visited {
background-color: transparent;
color: white;
}


#linkList LI A:hover, #linkList A:active {
background-color: fuchsia;
color: yellow;

}

Hello dev,

I just want to build a website for our store. I am a novice in the world of HTML and CSS coding and i am willing to learn. I already have a layout. If it is okay to ask a lot of question here until we complete the website?

I am following this tutorials http://hv-designs.co.uk/2008/05/20/psd-htmlcss/.

I want the header to look like this.
http://i618.photobucket.com/albums/tt264/raddai/header.gif

but it ended like this

http://i618.photobucket.com/albums/tt264/raddai/headers.gif

how do i move the menu into the header?

here is my css and html code.

Code:

/********************************************
HTML ELEMENTS
********************************************/
/* top elements */
* { margin: 0; padding: 0; outline: 0; } /*sets no padding or margin around the body of our document*/

body {
background-color: #15181c; /*website background color (white)*/
background-image: url(images/bg.gif); /*sets the background image, in our case the stripey background*/
background-repeat: repeat; /*repeats our background over and over*/
color: #ffffff; /*sets our text color for our website*/
margin: 15px 0; /*sets no padding and a 15px margin around the body of our document*/
font-family: Helvetica Neue LT Com, Verdana, Tahoma, arial, sans-serif; /*sets the font family for our website*/
font-size: 70%; /*sets the font size in %, you can also use 12px or 14px etc... px stands for pixels*/
line-height: 1.5em; /*sets the height between each line of text.*/
}
/********************************************
WEBSITE LAYOUT
********************************************/
#wrap {
width: 1024px; /*width of our wrap*/
background: #CCC url(images/content.jpg) repeat-y center top; /*sets our background color to white and uses our content.jpg as a background, the background is also repeated along the Y axis*/
margin: 0 auto; /*center our margin to auto will center our website*/
text-align: left; /*aligns our text to the left*/
}
#content-wrap {
clear: both; /*The clear property sets the sides of an element where other floating elements are not allowed.*/
width: 1024px; /*width of our wrap*/
margin: 5px auto; /*sets our top margin at 5 pixels and the rest to auto*/
padding: 0; /*sets 0 padding*/
}
#header {
position: relative; /*An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position*/
height: 190px; /*sets our header height, this should be the same as our header image*/
background: #15181c url(images/header.gif) no-repeat left top; /*sets a background behind our header and sets our header image onto the page*/
padding: 0; /*no padding is needed*/
}
/********************************************
WEBSITE NAVIAGTION
********************************************/
#menu {
clear: both; /*No floating elements allowed on either the left or the right side*/
margin: 0 auto; /*Margins*/
padding: 10; /*Padding*/
background: #15181c url(images/menu.gif) no-repeat; /*Our menu background*/
height: 48px; /*The height of the menu */
width: 567px; /*The width of the menu */
font-family: Verdana, Arial, Helvetica, sans-serif; /*The font family*/
font-size: 18px; /*The font size*/
line-height: 40px; /*The line-height property sets the distance between lines.*/
}
#menu ul {
float: left; /*Floats our menu to the left*/
list-style: none;
margin:0; padding: 0 0 0 20px;
}
#menu ul li {
display: inline; /*The element will be displayed as an inline element, with no line break before or after the element*/
}
#menu ul li a {
display: block;
float: left;
padding: 0 15px;
color: #fffff /*Font color*/
text-decoration: none;
}
#menu ul li a:hover {
color: #E00000; /*Mouseover hover color*/
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
  
<meta name="Description" content="PhiLour Sign, Engraving &amp;amp; media" />  
<meta name="Keywords" content="your, keywords" />  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<meta name="Distribution" content="Global" />  
<meta name="Author" content="" />  
<meta name="Robots" content="index,follow" />  
  
<link rel="stylesheet" href="css_styles.css" mce_href="css_styles.css" type="text/css" />  
  
<title>PhiLour Sign | </title>  
  
</head>
<body>  
<!-- wrap starts here -->  
<div id="wrap">  
<div id="header">  
<!--HEADER INFO WILL GO HERE -->  
</div>  
<div id="menu">  
<!--NAVIGATION HERE -->  
<!-- navigation -->
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Catalog</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>  
  
<!-- content-wrap starts here -->  
<div id="content-wrap">  
<div id="main">  
<!--MAIN CONTENT HERE -->  
</div>  
<div id="sidebar">  
<!--SIDE BAR LINKS HERE -->  
</div>  
  
<!-- content-wrap ends here -->  
</div>  
<div id="footer">  
<!--FOOTER HERE -->  
</div>  
  
<!-- wrap ends here -->  
</div>  
  
</body>  
</html>  

i hope everybody help me thank you.

Hello, Im having a particular problem with my website (freemyblackberry).

I need to add adsense to my site but have had issues with editing the CSS form.

I wish to add 2 120X600 tiles directly beside the main body (on opposite sides of the main body), though when I do so and resize the browser, the ads go under the main body or go to the outside edges. I need to them to stay stationary in regards to the body. Are you able to help me?

A copy of the CSS is pasted below:


@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #282828 url(images/main_bg.gif) top center no-repeat;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.main1 { margin:0 auto; padding:121012012;}
/********** header **********/
.header_resize {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:490px;}
.header_resize2 {background: #110f0b url(images/header_bg1.gif) top center no-repeat; margin:0; padding:0; height:200px;}
.header { width:960px; padding:0; margin:0 auto; }
.header h2 { font: bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:25px 0 0 0; margin:0; width:370px; float:left;}
.header p { width:320px; float:right; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:25px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:148px; float:left;}
.logo_text { text-align:right; width:700px; float:right; padding:20px 0 14px 0; margin:0; font: italic 11px Arial, Helvetica, sans-serif; color:#815e67;}
.logo_text a { text-decoration:none; color:#815e67;}
/*menu*/
.menu_resize {width:410px; background:url(images/menu_bg.gif) top no-repeat; float:right;}
.menu { padding:0; margin:0 auto; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:12px 9px; background:none;}
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left;}
/* body */
.body_resize { background: url(images/body_bg.gif) top repeat-y; padding:0; width:963px; margin:0 auto;}
.body_resize_top { background: url(images/body_top_bg.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.body_resize_top_resize { margin:10px auto; padding:0 10px;}
.body_resize_bottom { height:13px; margin:0; padding:0; width:963px; background:url(images/body_bottom_bg.gif) bottom no-repeat;}
.body { padding:20px 0; margin:0 auto; background:#e6e6e6; border-top:1px solid #f5f5f5; border-bottom:1px solid #ececec;}
.body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#000; padding:10px 5px; margin:0;}
.body h3 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#000; line-height:1.8em; padding:5px 5px; margin:0;}
.body p span { color:#5e5e5e; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
.body p strong { color:#974960;}
.body p.small { text-transform:uppercase; font: normal 12px Arial, Helvetica, sans-serif; color:#868686; line-height:1.8em; padding:0 0 0 80px; margin:0;}
.body a { color:#141414; text-decoration:none; font: bold 11px Arial, Helvetica, sans-serif;}
.body img { float:left; margin:5px 15px 5px 5px; padding:0;}
.body img.floated { float:right; margin:5px 20px; padding:0;}
.right { width:325px; margin:10px 8px 10px 0; padding:0 10px; float:right;}
.left {width:560px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.left_blog {width:250px; margin:10px 8px 10px 0; padding:0 10px; float:left;}
.port { background: url(images/port_bg.gif) top repeat-y; padding:0; width:259px; margin:10px 10px 10px 20px; float:left;}
.port_top { background: url(images/port_bg_top.gif) top no-repeat; margin:0px auto; padding:10px 0px;}
.port_bottom { height:11px; margin:0; padding:0; width:259px; background: url(images/port_bg_bottom.gif) bottom no-repeat;}
/* FBG */
.FBG_resize { background: #dcdcdc; margin:0; padding:0; border-top:1px solid #d0d0d0;}
.FBG { margin:0 auto; padding:20px 0; width:960px;}
.FBG h2 { font:bold 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 5px; margin:0; text-transform:uppercase;}
.FBG p { font:normal 11px Arial, Helvetica, sans-serif; color:#5f5f5f; line-height:1.8em; padding:5px 5px; margin:0;}
.FBG img { float:left; margin:5px 10px 15px 5px; padding:0;}
.FBG .blog { width:290px; float:left; margin:10px 0 10px 15px; padding:5px;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#2a2a2a; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:150px; display:block; padding:10px 0; color:#2a2a2a; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:5px 2px; height:16px; background:#f9f9f9; float:right; }
#contactform textarea { width:380px; border:1px solid #d8d8d8; margin:2px 0; padding:2px; background:#f9f9f9; float:right; }
#contactform li.buttons input { padding:3px 0 3px 460px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:10px 0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#737373;}
.footer a { font:normal 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;}
.footer p.leftt { text-align:left; width:50%; margin:0; padding:10px 0 0 20px; float:left;}
.footer p.rightt { text-align:right; width:30%; margin:0; padding:15px 20px 0 0; float:right;}
.footer {padding:0; margin:0 auto; background:#1c1c1c; border-top:1px solid #2a2a2a; }

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider { width:960px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 318px; }
.slider-item { width: 100% !important; height: 318px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; background:url(images/pag_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:23px;}
#slider_controls ul { margin:0 auto; padding:2px 0; width:54px;}
#slider_controls ul li { margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('images/tabs_2.gif') no-repeat center center; display: block; float: left; padding:2px; margin:2px !important; margin:1px 1px; outline: none; }
#slider_controls ul li a:focus { outline: none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { background:url('images/tabs_1.gif') no-repeat center center; }


#leftcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
left:300px;
background-color:#eee;
padding:10px;
width:120px;
}

#rightcontent {
position:absolute;
margin: 30px auto;
width:120px;
top:200px;
right:300px;
background-color:#eee;
padding:10px;
width:120px;
}

I know how to do html or java for an alert pop-up window. But, I don't know how to do that in CSS format.

I'm trying to add the alert pop-up window IN my myspace layout which is CSS coded already.

I just need the CSS code for it. Can anyone help?

I know that nobody uses frames any more and I'm not in favour of them myself but as part of a programming assignment I have to create a page with frames. I want to have no frame borders visible but I can't for the life of me get the correct syntax. I can make the frames seamless using inline commands like frameborder="no" Border="0" and framespacing="0" but I'd like to put these into a css.

This threads over with.

With my limited knowledge of css, html, etc.
I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.).

I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further.

id post code here, but the site wont allow it due to external links.
so please check it out here and let me know

http://needaputer.com
css is at same url just located at .com /css/styles.css

my goal:
-- auto center content on page horizontally - (based on screen size - cross browser compatible)
-- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible)
-- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size)