RSS iconTwitter iconFacebook icon

The Trek BBS title image

The Trek BBS statistics

Threads: 137,799
Posts: 5,325,804
Members: 24,548
Currently online: 527
Newest member: wrestlefreak36

TrekToday headlines

Seven of Nine Bobble Head
By: T'Bonz on Jul 9

Pegg The Prankster
By: T'Bonz on Jul 9

More Trek Stars Join Unbelievable!!!!!
By: T'Bonz on Jul 8

Star Trek #35 Preview
By: T'Bonz on Jul 8

New ThinkGeek Trek Apparel
By: T'Bonz on Jul 7

Star Trek Movie Prop Auction
By: T'Bonz on Jul 7

Drexler: NX Engineering Room Construction
By: T'Bonz on Jul 7

New Trek Home Fashions
By: T'Bonz on Jul 4

Star Trek Pop-Ups Book Preview
By: T'Bonz on Jul 3

Cho: More On Selfie
By: T'Bonz on Jul 3


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
Robert Maxwell
Respect the Beef
 
Robert Maxwell's Avatar
 
Location: Right behind you!
View Robert Maxwell's Twitter Profile Send a message via ICQ to Robert Maxwell Send a message via AIM to Robert Maxwell Send a message via Windows Live Messenger to Robert Maxwell Send a message via Yahoo to 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.
__________________
"Holy shit! It's Beef Supreme!"
The Journeyman - Buy it now! Maybe?
My world simulation project!
My blog
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 online now   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 09:45 AM.

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