My First CSS layout...

[JustinStudios]

Ok, I am redesigning the Beyond 2000 website in CSS per request of you's guys. I told you I would be posting here and finally I am. Here is the address of the site in question. http://www.justudios.com/B2k/ Now as you can see it looks horrid now, the menu bars are broken up, there is spaces in places that I don't want space, and my footer is floating up beside my content instead of below it. I have been working for several hours with no posotive changes so I decided it was time to post on the forumz.

Here is my stylesheet:

Code: Select all

body {
 background-image: url(images/background.jpg); 
 background-repeat: repeat-x; 
 background-color: #5a677c;}
A:Link {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 14px; 
 display: block;
 padding: 3px 35px 3px 35px; 
 text-decoration: none;}
A:Hover {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 14px; 
 display: block; 
 padding: 3px 35px 3px 35px;
 text-decoration: none;}
A:Visited {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 14px; 
 display: block;
 padding: 3px 35px 3px 35px; 
 text-decoration: none;}
p { 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 text-indent: 15px;
 margin: 5px 15px 15px 15px;}
h1 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #000000;
 margin: 0px;}
h2 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 color: #000000;
 margin: 0px;}
 
.norm, .norm:Link, .norm:Hover, .norm:Visited { 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 text-decoration: underline;
 text-indent: 15px;
 color: #0000CC;
 display: inline;
 padding: 0;}
* {
    margin: 0;
    padding: 0;}
.wrapper {
    width: 770px;
    margin: 0;}
.content {
 background-image: url(images/main-content.jpg);
 background-repeat: repeat-y;
    width: 550px;
 position: absolute;
    left: 150px;}
.nav {
    width: 270px;
    float: left;}
.footer {
    clear: both;}
.Navtop {
 list-style: none;
 width: 270px;
 height: 27px;
 background-image: url(images/nav-top.jpg);
 background-repeat: no-repeat;
 }
.button {
 list-style: none;
 width: 270px;
 height: 21px;
 background-image: url(images/nav-.jpg);
 background-repeat: no-repeat;}
.button:Hover {
 margin-left: 1px;
 list-style: none;
 width: 270px;
 height: 21px;
 background-image: url(images/nav-over.jpg);
 background-repeat: no-repeat;}
.contentTopper {
 background-image:url(images/ContentTop.jpg);
 background-repeat: no-repeat;
 z-index: 1;
 position: absolute;
 width: 550px;
 left: 150px;
 top: 152px;}

please View Source on the page to view its source, It's all html.

[karinne]

Remove all the positioning (position: absolute; left: ...) and start using floats (float: left; or float: right)

There is no rule about the use of classed vs id apart from the fact that one can be used multiples times (class) in a document and the other only once (id). However, there is a common theme that you should using idea for sites' main areas like wrapper, header, sidebar, content and footer. The rest is less meaningful and should use classes.

One more thing, you need to clear floats.

[JustinStudios]

Ok, I'm going to use more floats if I can make it work. But one thing I don't understand. How do I make floats work (left) (right) when I have several different positions to post them.

FE:

Code: Select all

|||||||||||||||||||
xxxxxEEEEEEEEEEEE
xxxxxBBBBBBBBBBBB
xxxxxBBBBBBBBBBBB
      BBBBBBBBBBBB
      BBBBBBBBBBBB
      TTTTTTTTTTT
**************

That's my layout right? Each letter or symbol represents its own float. So how do I stack floats like this without using positioning?

[JustinStudios]

I don't know how to use floats to display this layout. I see how to on 5 part layouts (header, Left, Mid, Right, Bottom) but mine has 2 extra pieces that make no sense or maybe i'm just not doing this right. Please help me Karinne, your my only hope!

[karinne]

You have to columns in there right? So ... I would do

Code: Select all

<!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" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html, body, div { margin: 0; padding: 0; }
    
    #header, #container, #footer {
        width: 780px;
    }
    
    #container {
        overflow: auto;
    }
    
    #menu {
        width: 200px;
        float: left;
        background-color: #900
    }
    
    #content {
        width: 570px;
        margin-left: 10px;
        float: right;
        background-color: #090;
    }
    
    #footer {
        background-color: #009;
        color: #fff;
    }
    </style>
    
</head>

<body>

<div id="header"><h1>some header stuff here</h1></div>

<div id="container">

    <div id="menu">menu here<br /><br /><br />all the way!    </div>
    
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
        
        <p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
        
        <p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
    </div>

</div>

<div id="footer">and some copyright bla bla here</div>

</body>
</html>

That's a basic 2-column layout with some text and color so you see what's happening with everything. Jjust copy/paste the whole thing and open it a browser.

So in this situation, you would have EEE, BBB and TTT in #content

[Ryan Fait]

Just to show you shorthand, this does exactly the same as your CSS that you posted in the thread topic (unless I made a careless mistake ).

Code: Select all

* {
	margin: 0;
	padding: 0;
}
body {
	color: #000;
	font: 14px verdana,arial,sans-serif;
	background: #5a677c url(images/background.jpg) repeat-x;
}
a {
	padding: 3px 35px; 
	text-decoration: none;
	display: block;
}
p { 
	margin: 5px 15px;
	font-size: 12px;
	text-indent: 15px;
}
h1 {
	font: bold 18px verdana,arial,sans-serif;
}
h2 {
	font-weight: bold;
}	
.norm, a.norm { 
	color: #00c;
	font-size: 12px;
	text-decoration: underline;
	text-indent: 15px;
	display: inline;
}
.wrapper {
	width: 770px;
}
.content {
	position: absolute;
	left: 150px;
	width: 550px;
	background: url(images/main-content.jpg) repeat-y;
}
.nav {
	width: 270px;
	float: left;
}
.footer {
	clear: both;
}
.Navtop {
	width: 270px;
	height: 27px;
	background: url(images/nav-top.jpg) no-repeat;
	list-style: none;
}
.button {
	width: 270px;
	height: 21px;
	list-style: none;
	background: url(images/nav-.jpg) no-repeat;
}
.button:hover {
	margin: 0 0 0 1px;
	background: url(images/nav-over.jpg) no-repeat;
}
.contentTopper {
	position: absolute;
	left: 150px;
	top: 152px;
	width: 550px;
	background: url(images/ContentTop.jpg) no-repeat;
	z-index: 1;
}

[karinne]

Do you have an updated link with the new code?

[JustinStudios]

Yes I have a link. Its what I have been working on and you can see it here: http://www.beyond2000software.com/karrine.htm . Notice its the code you put up for a basic layout and that I haven't actually styled anything except for the layout because I want to get that done first. Basically, my menu went stupid when i put list-style: none; and I can't imagine why it did that. Also, I am having wierd spacing issues in Internet Explorer and in Firefox, but they are completely different spacing issues...

If I can get 1 CSS Layout to work then maybe everything will come together; I am learning a lot of the syntax, but I don't know it all yet.

[pa007]

You haven't closed your ul - you're missing the '/'. Also you're using extra markup just give the ul an id and get rid of that menu div. Also remove all of those classes and apply the nav-top.gif to the ul and the nav.gif to the ul#menu li a (the actual links). Save a lot of messing around.

Pete.

[karinne]

Ok ... here we go.

HTML

Code: Select all

<!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" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    
</head>

<body>

<div id="header">
    <h1>some header stuff here</h1>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="700" height="149">
        <param name="movie" value="http://www.justudios.com/B2k/top.swf" />
        <param name="quality" value="high" />
        <embed src="http://www.justudios.com/B2k/top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="700" height="149"></embed>
    </object>
</div>

<div id="container">

    <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Parts</a></li>
            <li><a href="#">Sales</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Marina</a></li>
            <li><a href="#">Accounting</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Links</a></li>
        <ul>
    </div>
    
    <div id="content">
        
        <h1>Marine Management Software</h1>
        
        <p>Beyond 2000 is an affordable Marine management software solution. Beyond 2000 can be used by all types and sizes of dealers, marinas, and boatyards at an affordable price.</p>
        
        <h2>Why Beyond 2000?</h2>
        
        <p>Smith Software (creaters of Beyond 2000) has more than 30 years of Software Development Experience. Not only do we have the experience, but we also have the customer support to stand behind our product. After all, what good is a software package that you are unable to use?</p>
        
        <p>Beyond 2000 is packed with features that marina's need to do great business. We take pride in our software and that is the Beyond 2000 difference. We have gone on-site and found out what our customers needs were. We have designed the Beyond 2000 software package around this.</p>
        
        <p>Beyond 2000 is a customizable solution to make it most affordable for you and your business. No matter what your marina needs are we have a solution for you. To learn more about the different solutions we offer visit our products page.</p>
        
        <h2>Why Smith Software?</h2>
        
        <p>It is well documented that the key factor in successful software projects is the talent of individual team members. Our "product" is intelligent, creative, and problem-solving. Our success hinges on having very talented programmers.</p>
        
        <p>Smith Software offers the finest and most advanced technology and infrastructure, standing behind each and every development project with a 100% satisfaction and delivery deadline guarantee. Discover that we do design, development, training, maintainence and support .</p>
        
        <p>Visit the rest of our site and view the products we have for your Marine Management needs.</p>

    </div>

</div>

<div id="footer">and some copyright bla bla here</div>

</body>
</html>

css/styles.css

Code: Select all

html, body, div, #menu ul, #menu ul li { 
    margin: 0; padding: 0;
}

body {
    background: #5a677c url(http://www.justudios.com/B2k/images/background.jpg) repeat-x 0 0;
    font: 12px Verdana, Geneva, sans-serif;
}

/*-------------- common elements ----------------------- */

#header h1 {
    display: none;
}

/*-------------- main separations ----------------------- */
    
#header, #container, #footer {
    width: 700px;
}

#header {
    background: url(../images/top-border.jpg) no-repeat 0 100%;
    height: 154px;
}
    
#container {
    overflow: auto;
}
    
#menu {
    width: 148px;
    float: left;
}
    
#content {
    width: 532px;
    float: right;
    padding: 0 10px 10px;
    background: #fff url(http://www.justudios.com/B2k/images/main-content.jpg) repeat-y 0 0;
}

#footer {
    background-color: #009;
    color: #fff;
}

/*-------------- menu styles ------------------------------ */

#menu ul  {
    list-style: none;
    background: transparent url(http://www.justudios.com/B2k/images/nav-top.jpg) no-repeat 0 0;
}

#menu li a {
    background: url(../images/nav.jpg) no-repeat 0 0;
    display: block;
    height: 18px;
    padding: 3px 0 0 15px;
    color: #fff;
}

#menu li a:hover {
    background-position: 0 -21px;
}

+ 2 images to be put in images/ directory

nav.jpg top-border.jpg

[pa007]

Sorry to butt in here, but I would move the sidebar (#menu) so it comes after the main content (#content) in the html, especially with this design. It can then be easily repositioned using css.

It does make things just a little more complex but it's worth doing this way in my opinion.

Pete.

[karinne]

For sure ... it depends if he wants screen readers to see content first or menu first. Either way, the CSS I gave him presents the HTML on the screen with the menu on the left no matter where in the #container div he places it

[pa007]

So it will, yeah. I should read post more closely really. Oops!

I just think it'd be better for seo, to display the main content first. Though if the html is clean it shouldn't make too much difference. But every little helps when it comes to seo, as I have been learning recently.

Pete.

[JustinStudios]

Karinne is awesome! Thank you soooo much! Yes, I can play around with it a good bit and I still have to style the text and everything, but the layout works and looks wonderful. I am confused somewhat as how you did some of the things you did, but they work well. For Example : the one image for highlight navigation, never seen that before, but it works like a charm!

Ok, guys, I have to work on this for a little while, but once I get the content (and my XHTML tags fixed) then I will repost the site all prettied up with special links to Karinne and Bruno89 for all their help! Thanks also to Ryan and Pete who have shown me many things as well!

[karinne]

Originally Posted by NoobSmith

I am confused somewhat as how you did some of the things you did, but they work well.

Stuff you don't understand just ask.

Originally Posted by NoobSmith

For Example : the one image for highlight navigation, never seen that before, but it works like a charm!

Pure CSS rollovers without Javascript

[JustinStudios]

Well as far as SEO goes for this site, with my current Tables coded Non-valid Code I am ranked #5 in search Engines... When I took the job they were currently ranked #175,000 so it has increased pretty well! But I want to get #1 so thats why I am going as far as to do the coding right, because I was told that would help tremendously!

[pa007]

Give it a little while and you'll be wondering what all the fuss was about. It's just a nack and you'll pick it up in no time.

*whispers* I don't really like telling people this but it's actually that hard this css lark. Just don't let anyone know.

Pete.

[moojoo]

http://www.newguyinennis.com/samples/layouts/

[JustinStudios]

Wow, where were you 2 weeks ago Moojoo when I needed you? lol one of those layouts is mine exactly . But anyways, Karrine got me up and running! you can see the put together site at www.beyond2000software.com and I placed a link on there to Karrine's tutorials.

[moojoo]

Originally Posted by NoobSmith

Wow, where were you 2 weeks ago Moojoo when I needed you?

Ahh the story of my life.