/    Sign up×
Community /Pin to ProfileBookmark

Is there a way to do this

Copy linkTweet thisAlerts:
Jul 21.2006

[ 1 (header)

[______________________________
[

[

[

[ 2 (body)

[

[

[______________________________

This is the layout of my website – is there a way of declaring part (2) so that if i set text to the top, it goes to the top of (2) and NOT to the top of the entire page

How is this done, or what other methods would you use yourself

thanks guys in advance

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYJul 21.2006 — Any links to your current page?
Copy linkTweet thisAlerts:
@oo7mlauthorJul 21.2006 — No, i am just putting it together now. I've only started using CSS, (i used to fully depend on dreamweaver). I just want to put a logo and buttons up at the top and have the content underneath
Copy linkTweet thisAlerts:
@CentauriJul 21.2006 — <div id="header">

header stuff here

</div>

<div id="content">

content stuff here

</div>

you can then style each section with css as you desire

Cheers

Graeme
Copy linkTweet thisAlerts:
@oo7mlauthorJul 21.2006 — I don't really understand that div id, can you explain or let me know where to look for it (apart from google)
Copy linkTweet thisAlerts:
@oo7mlauthorJul 21.2006 — thanks guys, sorry to be annoying

I guess i need to see a the simplist page in the world with this done
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYJul 21.2006 — Ok,

you'll need to know the basics:

What is HTML, what is valid HTML? What is a doctype definition (DTD)?

What is CSS?

You'll need to know HTML 4.01 tags and where, when and how to use them.

Don't be sorry for anything, keep asking questions

It's easier for us if they're specific.

First step:

this is a standard HTML 4.01 template, you can start all of your web documents by using this:

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body>

</body>
</html>
[/code]

Later on you'll place your CSS in the style tags (in the head tags of the document)

The rest of the markup (your header and content) should go in the body tags

Ok, 2nd step is to actually write the markup and the content (for "dummy" test content, you can use [I]lorem ipsum[/I] text: http://lipsum.com as i did here)
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Standard Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>
<body>
<h1><span>Header</span></h1>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nec augue non libero dictum egestas. Nunc tempus. Phasellus viverra magna vel metus. Integer lorem dui, consectetuer vitae, fermentum sed, ultricies at, enim. Suspendisse convallis. Proin elementum, massa ac vestibulum dignissim, eros risus iaculis lorem, et varius lacus dolor eu lorem. Ut convallis tincidunt metus. Ut lacus nisi, imperdiet nec, suscipit ac, mollis vel, lectus. Nunc mauris. Mauris ullamcorper rutrum sapien. Nulla nibh ligula, egestas sed, consectetuer ac, dignissim non, magna.
</p>
<p>
Pellentesque nec risus. Sed ut velit. Vestibulum in elit sit amet velit tristique elementum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id nulla fermentum arcu tempus pulvinar. Vivamus interdum massa eget metus. Pellentesque consectetuer sollicitudin nibh. Phasellus faucibus ultrices dui. Sed faucibus neque sit amet lorem. Aliquam ipsum pede, laoreet ac, pellentesque eu, porttitor mattis, ipsum. Phasellus posuere felis et mauris. Curabitur ac neque. Donec tincidunt, nisl vitae pulvinar aliquet, tortor ligula gravida metus, eget lacinia metus lacus non velit. Cras commodo, tellus et nonummy ornare, justo neque mattis quam, et volutpat tortor eros quis arcu. Nullam euismod tortor eu mauris. Praesent pellentesque lobortis nulla. Donec congue.
</p>
</div>
</body>
</html>
[/code]

3rd step, now you can style it, example:
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Standard Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color: #ece9d8;
font-family: tahoma, sans-serif;
}

h1{
text-align: center;
font-family: 'trebuchet MS', serif;
font-style: italic;
}

div#content{
width: 25%;
margin: 0 auto;
border: 1px solid black;
padding: 1em;
background-color: #fffff0;
}

p:first-letter{
font-weight: bold;
font-size: xx-large;
font-style: italic;
padding-right: 0.5em;
}
</style>
</head>
<body>
<h1><span>Header</span></h1>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nec augue non libero dictum egestas. Nunc tempus. Phasellus viverra magna vel metus. Integer lorem dui, consectetuer vitae, fermentum sed, ultricies at, enim. Suspendisse convallis. Proin elementum, massa ac vestibulum dignissim, eros risus iaculis lorem, et varius lacus dolor eu lorem. Ut convallis tincidunt metus. Ut lacus nisi, imperdiet nec, suscipit ac, mollis vel, lectus. Nunc mauris. Mauris ullamcorper rutrum sapien. Nulla nibh ligula, egestas sed, consectetuer ac, dignissim non, magna.
</p>
<p>
Pellentesque nec risus. Sed ut velit. Vestibulum in elit sit amet velit tristique elementum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id nulla fermentum arcu tempus pulvinar. Vivamus interdum massa eget metus. Pellentesque consectetuer sollicitudin nibh. Phasellus faucibus ultrices dui. Sed faucibus neque sit amet lorem. Aliquam ipsum pede, laoreet ac, pellentesque eu, porttitor mattis, ipsum. Phasellus posuere felis et mauris. Curabitur ac neque. Donec tincidunt, nisl vitae pulvinar aliquet, tortor ligula gravida metus, eget lacinia metus lacus non velit. Cras commodo, tellus et nonummy ornare, justo neque mattis quam, et volutpat tortor eros quis arcu. Nullam euismod tortor eu mauris. Praesent pellentesque lobortis nulla. Donec congue.
</p>
</div>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@oo7mlauthorJul 21.2006 — thanks man
Copy linkTweet thisAlerts:
@LiLcRaZyFuZzYJul 21.2006 — You're welcome ?
×

Success!

Help @oo7ml spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...