Advice on creating single XHTML page

Spyhop

Spyhop

Spyhop

Soldato
Joined
16 May 2005
Posts
6,509
Location
Cold waters
Advice on creating single XHTML page [solved]

Hi - I have no meaningful experience with HTML/XHTML and would like to create a single page as shown below.

I can hack together text and hyperlinks but have no idea how to do any layout - i.e. create the black box, give it a white border, offset it from the top left of the page, then get all the text inside it.

Could a kind person tell me how to properly reproduce this?

p.s. this isn't any sort of homework or job related exercise :)

pageeg7.png
 
Last edited:
A one off landing page to link to files/other sites. Not for school or work as I mentioned.

Perhaps the right way to phrase it is "what's the correct way to make an offset box with a border?" :)
 
Last edited:
I'm bored, so did a very rough one. If you have a quick read of some css tuts @ w3schools or htmldog you'll realise how easy it is. The below css give you something like this.

EDIT: here's the same page with a nice bg (just add background: url{img.gif) repeat; to the body css)

Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css" media="screen">
<!--
body {
    padding: 0;
    margin-left: 5%;
    background-color: #FF00FF;
    color: #000;
}
#YourContentHere {
    margin-top: 10px;
    margin-left: 10px;
    width: 300px;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: 5px solid #fff;
    float:left;
}
#YourContentHere p {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    text-align: center;
}
h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}    
-->
</style>

</head>

<body>
    <div id="YourContentHere">
        <h1>Header</h1>
            <p>Menu</p>
            <p>Menu</p>
            <p>Menu</p>
            <p>Menu</p>
            <p>Menu</p>
    </div>
</body>

</html>
 
Last edited:
Excellent. Cheers suarve - you're a gent. I see how the CSS works in your example, and presumably why it's called cascading :)

336859324gr9.png
 
Last edited:
If you're only sitting one box in the page and it's going to have a margin you don't need to set a margin in both the body and a class.

You don't even need classes for a single page, just regular HTML with a small amount of CSS or without will suffice.

Also as it's a single page it would be wise to consider how different browsers interpret the code.

IE for example assumes default padding and margins in some cases with particular tags, where as firefox does not....

So when you do....

margin-left:5px;

You also need to define the other sides or you'll get a different appearance across browsers.

Easiest way would be to use shorthand like so...

margin:0 0 0 5px;

Try this instead (no offense suarve).

Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PUT YOUR TITLE HERE</title>
<style type="text/css">
<!--
body {
margin:0;padding:0;
background: #900 url ('pathtoimage/example.jpg') repeat;
}
div {
margin:50px;padding:5px;width:300px;
background:#000;border:3px solid #fff;
}
ul {padding:0;margin:0;text-align:center;color:#fff;list-style:none;font-size:22px}
li {font-size:13px;padding:3px}
li:hover {list-style:square;background:#fff;color:#000}
-->
</style>
</head>
<body>
<div>
<ul>
Header 
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</body>
</html>

No classes needed, just simple HTML with minor CSS, your basic menu also has a hover effect to.

W3Schools can help you with changing the list style if you prefer not to have the square. I'm sure you'll manage with the colours and adding the image line.
 
You must log in or register to reply here.
Back
Top Bottom