Menu
In need of a CSS pro. I am somewhat of a newbie at CSS. I created my layout in photoshop — and then attempted to group it to slice for CSS. However my html looks logical as far as grouping goes — but I think I butchered the css because the layout has been modified.
–
I sliced the psd into 7 images (not using all of them) — is that a good start or should I redo?
How do you get links to view vertically instead of horizontal?
The ‘shop categories’ sidebar (containing links) isn’t working with the css I created…? Should I place the sidebar outside of the content (currently it is within the main content)?
The main content is supposed to be below the large image of women/jewelry — how do I accomplish this?
I have attached a jpg of the layout I am trying to achieve with CSS.
Here is an attached link of what I am trying to achieve [URL=”http://s215038318.onlinehome.us/brand_site.html”]http://s215038318.onlinehome.us/brand_site.html
[B]HTML:
[code=html]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Brand Title</title>
</head>
<body>
<div id=”wrapper”>
<div id=”header1″>
<ul id=”nav1″>
<li><a href=””>Shopping Cart</a></li>
<li><a href=””>Assistance</a></li>
<li><a href=””>Find A Store</a></li>
</ul>
</div>
<div id=”header2″>
</div>
<div id=”mainmenu”>
</div>
<div id=”logo”>
</div>
<div id=”promoimage”>
</div>
<div id=”content”>
<h2>Content Here</h2>
<div id=”sidebar”>
<h2>shop categories</h2>
<ul>
<li><a href=””>bracelets</a></li>
<li><a href=””>charms</a></li>
<li><a href=””>earrings</a></li>
<li><a href=””>necklaces</a></li>
<li><a href=””>rings</a></li>
<li><a href=””>pendants</a></li>
<li><a href=””>watches</a></li>
<li><a href=””>gifts</a></li>
</ul>
</div>
<!– sidebar –>
<div id=”padder”></div>
</div>
</div>
<div id=”footer”>
<p>Copyright 2008 © Brand Name. All rights reserved.</p>
<ul>
<li><a href=””>About Us</a></li>
<li><a href=””>Security + Privacy</a></li>
<li><a href=””>Store Policies</a></li>
<li><a href=””>Terms of Use</a></li>
</ul>
</div>
</div>
</body>
</html>
[B]CSS
[CODE]
* html #wrapper {
height: 100%;
}
#header1 {
height: 36px;
background: #000000;
}
#header2 {
height: 146px;
background-image:url(css%20images/header_bg.jpg);
background-repeat:repeat-x;
}
#nav1 {
height: 23px;
position: absolute;
top: 30px;
right: 20px;
background: #FFFFFF;
}
#nav li {
list-style: none;
float: right;
padding-right: 7px;
}
#mainmenu {
height: 26px;
background-color:#333333;
}
#logo {
float: left;
background: #CCCCCC;
}
#content {
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
height: 42px;
padding: 10px;
overflow: hidden;
margin-top: 10px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}
* html #content {
overflow: visible;
height: 1%;
}
#promoimage{
width: 562px;
height: 332px;
background-image: url(images/ads/lux_slices_05.gif);
font-size: 1px;
color: #333333;
float: right;
position: fixed;
z-index: 1;
}
#sidebar{
width: 187px;
margin-left: -187px;
background: #000000;
float: left;
position: fixed;
z-index: 2;
}
#padder {
height: 48px;
}
#footer {
font-size: 80%;
font: kartika;
color: #FFFFFF;
text-align: center;
padding-top: 10px;
width: 750px;
height: 48px;
margin: -48px auto 0;
background-color: #333333;
}
#footer ul {
}
#footer li {
font: kartika;
list-style: none;
display: inline;
}
#footer .last {
border: 0;
}
#footer a {
color: #FFFFFF;
padding: 0 0.5em;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
}