[ Date Index ] [ Thread Index ] [ <= Previous by date / thread ] [ Next by date / thread => ]
2009/10/30 Simon Waters <simon@xxxxxxxxxxxxxx>:
>
> CSS layout is hard work, but on the otherhand it generally does the right
> thing, and where it doesn't it will in the next version of IE, or will
> probably do something at least legible.
>
No it's not.
<html>
<head>
<title>A website</title>
<style>
body {
}
#wrapper {
margin: 0 auto;
width: 960px;
}
#content {
float: left;
width: 600px;
}
#sidebar {
float: right;
width: 300px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This is my head</h1>
</div>
<div id="content">
<p>This is my content</p>
</div>
<div id="sidebar">
<ul>
<li>Link one</li>
<li>Link two</li>
</ul>
<p>My sidebar has officially ended</p>
</div>
<div id="footer">
<p>This is the site now ended</p>
</div>
</div>
</body>
</html>
The above took me less than 5 minutes to write. Save it as index.html
and load it up in a browser. Very simple and not very spectacular
site.
But start adding styles (the bit in the head between style and /style
and you can start moving things on very rapidly.
e.g. Quite a simple change to make is to add this to change the body
and wrapper tag to this:
body {
background: #8db6b6
url('http://lostwithiel.eu/wp-content/themes/thesis_16/custom/images/bg-ocean.jpg')
50% 0 no-repeat;
}
wrapper {
margin: 0 auto;
width: 960px;
background: #fff;
}
That took less than a minute to do!
If I want to change a font I simply add this:
font-family: arial;
to the body style. I can then style p individually by declaring that
separately so:
p {
font-family: "Times New Roman";
font-size: 0.8em;
}
It really is very simple. I am more than happy to help with developing
any site with css.
--
Kind regards
Rich
http://www.cregy.co.uk
Embracing what God does for you is the best thing you can do for him.
Romans 12 v 1
--
The Mailing List for the Devon & Cornwall LUG
http://mailman.dclug.org.uk/listinfo/list
FAQ: http://www.dcglug.org.uk/linux_adm/list-faq.html