Anyone good with HTML + CSS?

Tanax · 02-23-2009, 11:56 AM

Hi!

I'm trying to create a website layout. Right now I've just used different background colors to distinguish the different elements and the positioning of them.

Anyhow, the "problem" is:

1. I want margins between the logo and the header, but I can't seem to get any margins cause of the float: left; I've done on the logo.

2. I want the same margin between the left menu(products) and the menu-bar, and also the content.

3. This CSS doesn't seem really good, seeing as if I try to use padding on the header, cause of the h1 element, it get's pushed down really weird.

4. I tried to do the links in the menu-bar like a ul list, and I got rid of the list "dots", but they still were on different rows, how would I solve that?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link rel="stylesheet" type="text/css" href="style.css" />
		
		<title>Eldobado</title>
		
	</head>
	
	<body>
	
		<div id="container">
			
			<div id="logo">&nbsp</div>
			
			<div id="header"><h1>Eldobado</h1></div>
			
			<div id="left-menu">Products</div>
			
			<div id="menu-bar">
				
				Link 1

			</div>
			
			<div id="content"><h1>Content</h1></div>
		
		</div>
	
	</body>
</html>

Code:

body {
	
	margin: 0;
	padding: 0;
	padding-left: 30px;	
	padding-right: 30px;

}

#container {

	background-color: #E0EEEE;
	padding: 10px;

}

#logo {

	background-color: #838B8B;
	width: 200px;
	height: 170px;
	float: left;

}

#header {

	background-color: #2F4F4F;
	height: 170px;
	text-align: center;

}

#header h1 {

	margin: 0;
	padding: 0;
	
}

#left-menu {
	
	margin-top: 10px;
	background-color: #00C78C;
	width: 200px;
	float: left;
	height: 600px;

}

#menu-bar {

	background-color: #00C957;
	margin-top: 10px;

}

#content {

	height: 570px;
	text-align: center;
	background-color: #98FB98;
	margin-top: 10px;

}

#content h1 {

	margin: 0;
	padding: 0;

}

I'm a complete newbie at CSS so any help will be appriciated!
Thanks

sidisinsane · 02-23-2009, 12:55 PM

I can't really see what exactly you want to achieve, so here are just some very basic tips for creating (tableless) layouts with CSS.

1. Create your (semantic) HTML
2. Plan your layout (on paper)
3. Add styling so that it works in modern browsers (FF, Safari, perhaps Opera)
4. Look how it works in the various IEs and create extra styling for them (i.e. using conditional comments)

But first inform yourself about browser-specific behaviours, especially when you are using floats ("clearing floats") and when you are using paddings ("box model"). There are many more "bugs" or irregularities to name and you'll definitely meet upon several of them.

If you aren't planning on really getting into layouting or you're too lazy to be bothered, then start off with one of the many CSS-Grid-Frameworks (Blueprint, YAML, 960, etc.) or grab a template that meets your needs at CSS Zen Garden i.e.

Last but not least, put up a demo page and post the link if you want help with a layout. Makes things much easier and less time consuming. Hope this doesn't add to your confusion, because its not meant to do so.

Tanax · 02-23-2009, 04:25 PM

Thank you!
Those were good tips, and yes, sorry for not uploading a demo website. I planned to do that, but didn't have time.

Anyhow, here's some screenshots explaining what I want:

http://img13.imageshack.us/img13/5108/margins.jpg

http://img13.imageshack.us/img13/4615/linksq.jpg

So the first issue, is about the margins, I want margins seperating the parts, but because I used float, it just doesn't work for some reason.

The second issue, is not really an issue, but more of a comfortability question. I want the links menu to be a ul list, but if I place it in a ul list, it get's list dots, and on seperate lines. I could remove the dots on the list, but I couldn't get them on the same line.
Right now, I just posted

HTML Code:

Link 1 &nbsp&nbsp&nbsp Link 2

not really good code. I want it like this:

HTML Code:

<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>

but looking exactly like it looks on the screenshot! How would I do that?

Hope this explains more what I'm looking for

hello-world · 02-23-2009, 04:40 PM

why don't you use Border instead of margin ? And select the matching color.

Quote:

#logo {

background-color: #838B8B;
width: 200px;
height: 170px;
position:absolute;

border-right:10px solid;

}

Quote:

#left-menu {

margin-top: 10px;
background-color: #00C78C;
width: 200px;
float: left;
height: 600px;
border-right:10px solid;

}

I just saw your 2nd post after posting my.
You can use list-style:none.

And don't forget to download

Quote:

http://www.topshareware.com/Colour-T...load-19618.htm

sketchMedia · 02-23-2009, 04:42 PM

The reason the margin wont have any effect is because you have floated it, i.e. pulled it out of the normal flow, thus its on a different level to the header div. In order for it to have an effect you must also float the header.

as for the menu, something like this:

Code:

        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>

Code:

ul { 
    list-style: none;
}
ul li {
    display: inline
}

Tanax · 02-23-2009, 05:03 PM

Quote:

Originally Posted by hello-world

why don't you use Border instead of margin ? And select the matching color.

You can use list-style:none.

Because I don't really wanna use borders.
Yes, that's what I've done, but that won't place the list in a single line, the list items will still be on different lines.

Thanks for the link! I'll download it

Quote:

Originally Posted by sketchMedia

The reason the margin wont have any effect is because you have floated it, i.e. pulled it out of the normal flow, thus its on a different level to the header div. In order for it to have an effect you must also float the header.

as for the menu, something like this:

Code:

        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>

Code:

ul { 
    list-style: none;
}
ul li {
    display: inline
}

Yea, that's what I suspected, but I had no clue how to solve it.
But if I float the header aswell, the menu's below will appear on the right side of the header, instead of below it?

http://img187.imageshack.us/img187/420/margins2.jpg

Code:

#header {

	background-color: #2F4F4F;
	height: 150px;
	text-align: center;
	padding-top: 20px;
	float: left;
	margin-left: 10px;

}

Sure enough, I got the margins alright, but the rest of the site got fucked up xD

The list worked like I wanted though, thanks!

hello-world · 02-23-2009, 09:22 PM

That is also simple.You need to nest it in some [div] tag.

Here is it.
I checked it in firefox.

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>{$title}</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="container" >

<div id="header">
<div id="logo">f</div>
<div id="head">head</div>
</div>
<div id="list">LIst list list </div>
<div id="contents">
<div id="bar">sadfsdfs</div>
<div id="main">sfsdf</div>
</div>
<table>

</div></body>
</html>

Quote:

@CHARSET "ISO-8859-1";
body{
margin:0;
padding:0;

}
#container{
width:760px;
margin:auto;
background:#8CC6FF;
padding:15px;
}

#contents{
border:1px solid;
height:500px;
top:150px;
}

#header{
top:15px;
//background:green;
height:150px;
margin-bottom:15px;

}
#logo{
background:blue;
width:150px;
height:150px;
padding-left:15px;
position:absolute;

}
#head{
background:green;

height:150px;
float:right;
padding-left:15px;
width:565px;
}
#list
{
background:gold;
margin-bottom:15px;
}
#bar{
background:blue;
width:150px;

padding-left:15px;
position:absolute;
}
#main{
background:blue;;
height:150px;
float:right;
padding-left:15px;
width:565px;
}

Tanax · 02-24-2009, 10:45 AM

Yea, that looks great with the margins!
The only problem with that, is that if I write more content in the "main" div(as a test I just set the height to a larger amount), the #contents div doesn't expand, which could be problematic when you're dealing with dynamic content loaded from a database.

Any ideas how to solve the expanding thing?
THanks alot!

Tanax · 02-24-2009, 11:11 AM

Actually, nevermind, I kinda solved it. Here's the finished CSS:

Code:

body {

	margin: 0;
	padding: 0;

}

#container {

	background-color: #8CC6FF;
	padding: 15px;
	margin-left: 20px;
	margin-right: 20px;

}

#header {

	top: 15px;
	height: 200px;
	margin-bottom: 15px;

}

#logo {

	background-color: blue;
	height: 170px;
	width: 200px;
	padding: 15px;
	position: relative;

}

#head {

	background-color: green;
	height: 200px;
	float: right;
	padding-left: 15px;
	width: 1065px;

}

#top-menu {

	background-color: orange;
	margin-bottom: 10px;
	position: relative;
	margin-left: 180px;
	font-size: 17px;
	text-align: center;

}

#top-menu ul {

	list-style: none;
	margin: 0;
	padding: 0;

}

#top-menu ul li {

	display: inline;
	margin-right: 40px;

}

#left-menu {

	background-color: blue;
	width: 165px;
	float: left;
	position: relative;

}

#left-menu #title {

	text-align: center;
	border-bottom: 1px dotted #000;
	padding: 5px;

}

#left-menu ul {

	list-style: none;

}

#left-menu ul li {

	margin-bottom: 5px;

}

#main {

	background-color: blue;
	position: relative;
	margin-left: 180px;
	padding: 30px;

} 

#main #title {

	font-size: 24px;
	font-weight: bold;
	text-align: center;

}

And the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Eldobado</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>

	<div id="container" >

		<div id="header">

			<div id="head">head</div>
			<div id="logo">f</div>

		</div>

		<div id="contents">

			<div id="left-menu">

				<div id="title">Produkter</div>

				<ul>
					<li>Kaminer</li>
					<li>Skorstenar</li>
					<li>Solpaneler</li>
					<li>Uterum</li>
					<li>Fönster</li>
					<li>Garageportar</li>
					<li>Spabad</li>
				</ul>

			</div>
			
			<div id="top-menu">

				<ul>
					<li>Nyheter</li>
					<li>Erbjudanden</li>
					<li>Köpvillkor</li>
					<li>Rådgivning</li>
					<li>Kontakt</li>
					<li>Öppettider</li>
				</ul>

			</div>

			<div id="main">

				<div id="title">Lorem ipsum</div>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere, nulla sed tempor imperdiet, dolor tortor aliquet arcu, 
				et fermentum justo elit id leo. Nullam libero. Integer condimentum ipsum sit amet dui. Vivamus bibendum lectus. Praesent aliquam arcu 
				nec libero. Etiam eget sem in ante interdum fringilla. Vivamus sem risus, placerat sit amet, tempus sit amet, hendrerit nec, sem. Ut lectus. 
				Aenean pede. Suspendisse ac neque in risus mattis cursus. Nam in justo a augue commodo malesuada. Fusce vitae ipsum in nisi aliquet 
				pharetra. Etiam dignissim, ligula vel tincidunt placerat, lorem neque aliquam augue, vel mattis ligula augue sit amet justo. Cras pulvinar, 
				ligula non rhoncus adipiscing, turpis dolor rutrum odio, ac tempor diam arcu quis dolor. Fusce varius purus. Phasellus mattis, leo quis suscipit 
				sollicitudin, dolor ante placerat mi, vitae blandit arcu mi id eros.</p>

				<p>Nam adipiscing laoreet odio. Phasellus sapien elit, euismod vel, pellentesque ut, fermentum sit amet, elit. Mauris interdum dapibus libero. 
				Ut dignissim orci. Nulla aliquam convallis lectus. Vivamus libero ipsum, ultricies in, pulvinar non, suscipit vel, ante. Mauris justo. 
				Mauris aliquet pede in lectus. Etiam tempus magna et elit. Nulla facilisi.</p>

			</div>

		</div>

	</div>

</body>
</html>

Looks okay? Any errors you see?
I removed the #contents from the CSS completely, but kept it in the HTML, and then the container got fluid and expanded when the #main div expanded.

I also reversed the float, so the "bar" div is floated left, and the links and main divs are positioned relative.

hello-world · 02-25-2009, 10:03 PM

That looks good.By the way are you trying to code a social Networking site ? If yes then hope to see a Tutorial about that.

Tanax · 02-26-2009, 01:12 PM

Great!

No sorry, this is for a clients company/store.
But when I get time I could probably code a SN site, shouldn't be that hard.

allworknoplay · 02-26-2009, 01:35 PM

Quote:

Originally Posted by Tanax

Great!

No sorry, this is for a clients company/store.
But when I get time I could probably code a SN site, shouldn't be that hard.

The one thing about SN is that I have never been able to figure out the code for your friends list. Just like how myspace/facebook does it....

I guess I just never really worked out the algorithm for it...I'm sure everyone knows it but me!!

Tanax · 02-26-2009, 05:32 PM

I'm not sure, but I would probably just do a table in db like:

friendships
fs_id
fs_user1
fs_user2
fs_type(like on vB you can have "contact" or "friend")

so when fetching someone's friendslist:

Code:

"SELECT * FROM `friendships` where `fs_user1` = '".$userid."' OR `fs_user2` = '".$userid."'";

allworknoplay · 02-26-2009, 05:50 PM

Quote:

Originally Posted by Tanax

I'm not sure, but I would probably just do a table in db like:

friendships
fs_id
fs_user1
fs_user2
fs_type(like on vB you can have "contact" or "friend")

so when fetching someone's friendslist:

Code:

"SELECT * FROM `friendships` where `fs_user1` = '".$userid."' OR `fs_user2` = '".$userid."'";

yeah, do you know how one would show the number of possible friends on the list? what I mean by that is when your friends with someone, you are part of that network, but not necessarily friends with the 1,000's of other people in that network...

It's easy to count how many friends you have in your group, but I guess I never really figured out how to count the other possible groups....I think Friendster is the method that I am thinking about most, i don't think facebook does it the same way as friendster...

BTW: Has your $3 matrix system worked out yet?

Tanax · 02-26-2009, 08:43 PM

We're going pretty offtopic right now. But I don't really know how to check that, cause I haven't really thought about it more in-depth. But if I would begin on a project like SN, I could definitly write a tutorial about it(or atleast write some sort of progress-updates).

Haven't heard of friendster, and I don't know what it is..