How's to design the basics

HTML & CSS
1

I’ve been learning xhtml and CSS3 on my own for a year now… i’m in college. Look at this picture

I noticed something that looked exactly like that page while learning php. Because it’s very basic I recoded it own my own, show me how you would go about it. Would you use division blocks(div) or tables?
Here are options(colors,fonts,images)
-rgb(10,209,255) , light blue
-rgb(255,255,255) , white
-h1

hint* with tables i found i could make the page perfectly aligned. not just guess work

2

Hi,

Nearly every website relies on a grid system. It looks like a centered fixed width layout with two columns.
http://img94.imageshack.us/img94/4259/gridu.gif

This is easily achievable with CSS.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
html, body { margin: 0; padding: 0 }
body {
	background: #0AD0FD;
}
#wrapper {
	width: 800px;
	margin: 0 auto; /* center */
}
#aside {
	width: 190px;
	float: left;
}
#content {
	background: #fff;
	margin-left: 220px; /* gutter for sidebar */
	padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
	<div id="aside">
		<img src="img/logo.png">
	</div>
	<div id="content">
		<h1>Hello world</h1>
	</div>
</div>
</body>
</html>

Hope it helps,

3

oh i did not thinking of adding a padding left. I will post a version of tables to show it can perfectly vertically align the white block, horizontally to the explore picture.

4

simple table, perfectly in the middle point between the height of the picture. can anyone show a way with CSS?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">


<head>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Blah</title>
<link rel="stylesheet" href="css/pagecode.css">

<style type="text/css">
body, html {
	background : #0AD0FD;
	margin: 0;
	padding: 0;
	}
	
table {
	width : 800px;
	padding-left: 230px;
	background : url(images/logo.gif) no-repeat left top;
	margin: 0 auto;
	height: 237px;

 }
	
td {
	vertical-align: middle;

	}
	
h1 {
	margin: 0;
	padding: 0;
	height : 100px;
	background: rgb(255,255,255);    /* would this be considered a hack ? */
	}	
</style>

</head>


<body>

<table cellpadding="0" cellspacing="0">
   <tr>
     <td>
       <h1>Hello World</h1>
     </td>
   </tr>
</table>

</body>

</html>
5

The VERTICAL align DOES NOT happen by default. There are many options, but they depend on what your content is.

One example, you could create a header area…
<div id=“header”>
<div id=“brand”><img src="yourimg.jpg><div><h1>hello world</h1>
<div>
#header {display:table;}
#brand, #header h1{display:table-cell; vertical-align:middle}
ad widths as needed. This method is not legacy IE friendly tho.

alternatively, you could use:
#header div, #header h1, #header div img {display: inline-block; vertical-align: middle; display:-moz-inline-box; }

which, I think, works back to FF2.0 and IE6 (or 7)

6

Here’s a couple of examples of the last method that Dresden mentioned.

example1
example2 (width Firefox2 support)

7

thanks that seems to be a clean way to do it. The only thing i found was

display:-moz-inline-box;

seemed to mess with the height in only firefox. check it out!! if you picky you might noticed i changed the colors… ooops!

with -moz-inline-box

and without,

8

I’d need to see your full css and html as that doesn’t happen in my versions as you can see from the link above.

The -moz-inline-box is only need for ff2 and under support and as we are now on FF8 I don’t think three’s much need to support that far back now.

9

heres the code,

Download html

10

The -moz-inline-box rule (for Firefox 2 and below) must be before the inline-block rule otherwise it overwrites it in newer FF browsers.

e.g. It should be like this:
{
display:-moz-inline-box;
display:inline-block;
}

That of course excludes IE6 and 7 as already mentioned but you can see my examples which will also work in IE6 and 7 but require more code.

11