RSS iconTwitter iconFacebook icon

The Trek BBS title image

The Trek BBS statistics

Threads: 140,223
Posts: 5,438,058
Members: 24,957
Currently online: 526
Newest member: zanejc

TrekToday headlines

Cumberbatch In Wax
By: T'Bonz on Oct 24

Trek Screenwriter Washington D.C. Appearance
By: T'Bonz on Oct 23

Two Official Starships Collection Ships
By: T'Bonz on Oct 22

Pine In New Skit
By: T'Bonz on Oct 21

Stewart In Holiday Film
By: T'Bonz on Oct 21

The Red Shirt Diaries #8
By: T'Bonz on Oct 20

IDW Publishing January Comics
By: T'Bonz on Oct 20

Retro Review: Chrysalis
By: Michelle on Oct 18

The Next Generation Season Seven Blu-ray Details
By: T'Bonz on Oct 17

CBS Launches Streaming Service
By: T'Bonz on Oct 17


Welcome! The Trek BBS is the number one place to chat about Star Trek with like-minded fans. Please login to see our full range of forums as well as the ability to send and receive private messages, track your favourite topics and of course join in the discussions.

If you are a new visitor, join us for free. If you are an existing member please login below. Note: for members who joined under our old messageboard system, please login with your display name not your login name.


Go Back   The Trek BBS > Entertainment & Interests > Web Sites/Design

Web Sites/Design Talk about your websites here!

Reply
 
Thread Tools
Old July 23 2009, 05:43 AM   #1
That Weirdo In The Corner
Commander
 
That Weirdo In The Corner's Avatar
 
Location: Scotland
Basic website CSS help

I am very new to making my own website. As you can see from the code below I don't really know what I'm doing, but that's where you start on the learning process.

A problem I had was that after I created #left frame the #main frame was stuck below the #left frame, the only way I found to move it to the right place, next to the #left frame was this kludge. What is the right way of doing it?

oh and I added #page as part of that kludge but i think i can remove it and nothig would change.

<!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>
<title>Untitled 1</title>

<style type="text/css" >
#page {
postition: absolute; top: 0px; left: 0px; width: 800px; height: 1200px;
}
#photo_header {
postition: absolute; top: 10px; margin-left: 20px; width: 90%; height: 180px;
border-style: double; text-align:center

}

#textheader {
postition: absolute; margin-top: 10px; margin-left: 20px; width: 90%; height: 30px;
border-style: double; text-align:center
}

#left {
postition: absolute; margin-top: 50px; margin-left: 20px; width: 20%; height: 700px;
border-style: double; text-align:center

}


#main {
postition: absolute; margin-top: -20px; margin-left: 220px; width: 315%; height: 700px;
border-style: double; text-align:center
}

#footer {
postition: absolute; margin-top: 40px; margin-left: 0px; width: 450%; height: 50px;
border-style: double; text-align:center
}

</style>
<script>
</script>
</head>

<body>
<div id="page">
<div id="photo_header">Linlithgow photo header goes here</div>
<div id="textheader">Linlithgow text header goes here</div>
<div id="left">navigation menu goes here
<div id="main">main text goes here</div>
<div id="footer">footer goes here</div></div></div>

</body>
</html>





Thank You
__________________
"Freedom is the right of all sentient beings" Optimus Prime
That Weirdo In The Corner is offline   Reply With Quote
Old July 23 2009, 03:04 PM   #2
THE Robert Maxwell
Reports of my death...
 
THE Robert Maxwell's Avatar
 
Location: Robert Maxwell
View THE Robert Maxwell's Twitter Profile Send a message via ICQ to THE Robert Maxwell Send a message via AIM to THE Robert Maxwell Send a message via Windows Live Messenger to THE Robert Maxwell Send a message via Yahoo to THE Robert Maxwell
Re: Basic website CSS help

You're right, #page is not needed.

The reason each layer is positioned vertically below the previous one is that it's just how CSS works, unless you use the CSS "table" directive.

See this page for details: http://www.quirksmode.org/css/display.html

It shows you what directives have what affect on your page layout.
__________________
Publishing all the news that's not fit to print, FROM BEYOND THE GRAVE!!!!
I has a blag.
THE Robert Maxwell is offline   Reply With Quote
Old July 23 2009, 03:31 PM   #3
kv1at3485
Commodore
 
Re: Basic website CSS help

Try something like:
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>
<title>Untitled 1</title>
    <style type="text/css" >
        #page {
            margin:10px auto 0 auto;
            width: 90%;
            min-width:760px;
        }
        #photo_header {
            border-style: double;
            text-align:center
        }
        #textheader {
            margin-top: 10px;
            border-style: double;
            text-align:center
        }
        #left {
            margin-top:10px;
            margin-right:10px;
            margin-bottom:10px;
            float: left;
            padding-left:10px;
            width:20%;
            border-style: double;
            text-align:center;
        }
        #main {
            margin-top:10px;
            margin-bottom:10px;
            overflow: hidden;
            border-style: double;
            text-align:center;
        }
        #footer {
            clear:left;
            border-style: double;
            text-align:center
        }
    </style>
</head>
<body>
<div id="page">
    <div id="photo_header">Linlithgow photo header goes here</div>
    <div id="textheader">Linlithgow text header goes here</div>
    <div id="left">
        <ul>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
            <li>Stuff</li>
        </ul>
    </div>
    <div id="main">main text goes here</div>
    <div id="footer">footer goes here</div>
</div>
</body>
</html>
And there's probably no need to use XHTML 1.0 Trans. May as well just use HTML 4.01 Strict.
kv1at3485 is offline   Reply With Quote
Old July 23 2009, 03:39 PM   #4
Deckerd
Fleet Arse
 
Deckerd's Avatar
 
Location: the Frozen Wastes
Re: Basic website CSS help

Yes, use float left/right to put divisions side by side.
__________________
They couldn't hit an elephant at this distance.
Deckerd is offline   Reply With Quote
Reply

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump



All times are GMT +1. The time now is 04:21 PM.

Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
FireFox 2+ or Internet Explorer 7+ highly recommended.