Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I'm a bit frustrated.
I'm trying to do the "right" thing and attempt my designs using CSS. But I'm new to it and am having difficulty in how to approach a fully CSS layout. What was one easy using tables (alignment, spacing, etc.) has proven more difficult using just CSS.
How do you first approach implementing a design?
My approach thus far has been to try and break down the design into sections. I have my main layout down which, from another post of mine, contains a header, footer, sidebar, and main content. My first goal is to fill in the header div:
I have text centered at the top of the page -- kind of a banner. All of the rest is positioned below the banner. There is a bottom left aligned background image, and a right aligned section that contains your standard search form & submit and a bottom right aligned image. Pretty straight forward.
So when I broke this apart, I created a seperate div for the banner text, since it is above what I called my header div. I don't quite agree with this, as the banner is contained in the header section of the site (and so I think it should be coded w/ similar logic.) I have a background image applied to the header div, so that takes care of the bottom left aligned background image. From there, I used float: right to position my search div to the right of the screen and used a background image aligned bottom right.
The problem I see is twofold. First, I need to be able to use the bottom left aligned image as a link, so having it set as a background won't work. I added a seperate <img> tag and after moving it from above the search <div> to below it the image aligned correctly. But also, minimzing the window completely destroys the layout. For instance, the right aligned search area eventually pushes the right aligned image out of the way and ends up on top.
Anyhow, I'll keep at this, but a little guidance or tips would be great. -
Do you have an image of what you are trying to achieve? It may help in trying to asses what exactly you are trying to do.
-
Unfortunately it's a page on our intranet that I am trying to redesign using CSS. I'll see about getting a screenshot or recreating a quick mockup in PS.
-
-
So my question EricM is, do you want the header and footer to always appear and content move in the middle, or will it move with the with the document in the browser window.
-
Below is some markup and CSS to get close to what you want, I didn't have a lot of time to really bulletproof it because I am at work. Also please note this code is flawed in IE6. The code is valid Xhtml1.0 Transitional and valid CSS.
HTML
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Company Intranet</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="header">
<p>Some Text Here</p>
</div>
<div id="search">
SEARCH:
<input type="text" name="search" />
<input type="button" name="search" value="GO" />
</div>
<div id="subHeader">
<div id="image1"></div>
<div id="image2"></div>
</div>
<div id="mainContent"></div>
<div id="footer">
<div id="copyright">
<p> © Your Company Name 2008</p>
</div>
<div id="footerText">
<p>Some Header Here</p>
</div>
<div id="contactUs">
<a href="#">Contact Us</a>
<a href="#">Link ABC</a>
<a href="#">Link XYZ</a>
</div>
</div>
</body>
</html>
CSS
body {
font-family: arial, helvetica, sans-serif;
font-size: 62.5%;
margin: 0px;
padding: 0px;
background: #000;
}
#header {
position: relative;
float: left;
width: 100%;
color: #fff;
background-color: #000;
font-size: 1.2em;
}
#header p {
text-align: center;
}
#search {
float: right;
margin: 0px 5px 0px 0px;
background: #000;
color: #666;
font-size: 1.2em;
font-weight: bold;
}
#subHeader {
position: relative;
float: left;
width: 100%;
height: 10em;
background: #000;
font-size: 1.2em;
}
#image1 {
position: absolute;
left: 0px;
bottom: 0px;
width: 30em;
height: 10em;
background: #ccc;
}
#image2 {
position: absolute;
right: 0px;
bottom: 0px;
width: 5.0em;
height: 2.5em;
background: #ccc;
}
#mainContent {
position: relative;
float: left;
width: 100%;
height: 50em;
background: #fff;
color: #000;
font-size: 1.2em;
}
#footer {
clear: both;
background: #000;
color: #fff;
width: 100%;
background: #ccc;
text-align: center;
font-size: 1.2em;
}
#copyright, #contactUs {
position: relative;
float: left;
width: 25%;
background: #222;
line-height: 10em;
}
#footerText {
position: relative;
float: left;
width: 50%;
line-height: 10em;
background: #333;
}
#contactUs a {
float: left;
line-height: 10em;
height: 10em;
width: 8.5em;
color: #ccc;
}
#contactUs a:hover {
background-color: #cba;
color: #666;
}
1 to 6 of 6