What's the simplest way of getting my web-site in themiddle

#1 (**permalink**) 08-05-2008, 02:28 PM

Hello

Im currently in the process of updating my web-site.

You can see the bare bones here:

http://www.virtutour.com/new_web_site

Now before I go any further I would like to get the foundations right now and
make it so the whole thing is horizontally in the middle of the page.whatever
screen it is viewed on

Ive looked this up but there are so many ways most of which are beyond my
comprehension.
What is the simplest way that works?

Please find code attached

Please note I am doing this using an old version of dreamweaver and know very
little about direct coding.

Many thanks in advance

Masten

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="00053F">
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:810px;
height:528px; z-index:1"><img src="images/background.gif" width="1000"
height="594"></div>
<div id="Layer2" style="position:absolute; left:138px; top:137px; width:595px;
height:410px; z-index:2"><applet name="ptviewer" archive="ptviewer.jar"
code="ptviewer.class" width=700 height=410 mayscript=true>

<param name=file value="pans/pavilion_larger.jpg">

</applet></div>
</body>
</html>

#2 (**permalink**) 08-05-2008, 03:50 PM

Don't use absolute positioning. If you want your layout to appear in the
center of the screen you can do the following:

<div id="container">
<div="content"></div>
</div>

Then your CSS would look like:

#container {
margin: 0 auto; /* This will do top of the page and center align*/
}

The content wouldn't really need any positioning since it is inside the
container. Unfortunately, there is no way to center the design height-wise on
the screen using CSS like this. I hope this is what you were looking for.

#3 (**permalink**) 08-08-2008, 02:30 PM

Thanks chaps

Please bear with me as I do not usually do direct coding but just use
dreamweaver 3.0's wysywig editor.

I have tried creating a css style sheet using notepad and renaming it to .css
with the content:

#container { width:760px; margin:0 auto; }

But then when I import the sytle sheet dreamweaver doesn't see it?
Don't style sheets have to start with a full stop

Very confused

Masten

#4 (**permalink**) 08-08-2008, 03:18 PM

On Fri, 8 Aug 2008 13:30:49 +0000 (UTC), "virtutour"
<webforumsuser@macromedia.com> wrote:

>
> #container { width:760px; margin:0 auto; }
>
> But then when I import the sytle sheet dreamweaver doesn't see it?
> Don't style sheets have to start with a full stop
>

No - just a normal file name - usually like this main.css

you are thinking of classes which do start with a full stop inside the
style sheet

--

~Malcolm~*...
~*

#5 (**permalink**) 08-08-2008, 08:37 PM

Hi Malcom

"you are thinking of classes which do start with a full stop inside the
style sheet"

what I dont get is where

#container { width:760px; margin:0 auto; }

goes? In the css file? But dreamweaver wont read it.
-----------------------------------
'Be prepared for a long and tedious learning curve, then'

No problem, but the site will be very simple. Just a container for my work
really.
----------------------------------

Can I take this a step at a time. Please see code below which just has the
main image in it.

#6 (**permalink**) 08-08-2008, 09:10 PM

On Fri, 8 Aug 2008 19:37:19 +0000 (UTC), "virtutour"
<webforumsuser@macromedia.com> wrote:

>Hi Malcom
>
> "you are thinking of classes which do start with a full stop inside the
> style sheet"
>
> what I dont get is where
>
> #container { width:760px; margin:0 auto; }
>
> goes? In the css file? But dreamweaver wont read it.

classes - which can be used as many times as you want on a page.

in the style sheet they look like this

..aclass { ..... }

an id which can only be used ONCE in a page

in the style sheet they look lile this

#anID { ....}

note that an ID has a higher significant - and scores higer in
"specificity" - so an ID with the same name as a class will overrule a
class of the same name.

--

~Malcolm~*...
~*

#7 (**permalink**) 08-08-2008, 09:54 PM

On Fri, 8 Aug 2008 16:29:17 -0400, "Murray *ACE*"
<forums@HAHAgreat-web-sights.com> wrote:

>
>Having an ID and a class with the same name sounds like confusion to me.
>Better to say that if both an ID and a class apply to the same element, the
>ID's rule will override any conflicting styles from the class, e.g.,
>
>#this { color:red; }
>.that { color:blue; }
>
>...
>
><p id="this" class="that">This text is red.</p>

I agree - and always try not to use the same name for id's as I do for
classes.

--

~Malcolm~*...
~*

#8 (**permalink**) 08-09-2008, 01:15 AM

OK. Got this to work in netscape 7.. Doesnt work in IE6?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container { width:760px; margin:0 auto; }
</style>

<body bgcolor="00053F">

<div id="container"><img src="images/home_page_background.jpg"></div>

</body>
</html>

#9 (**permalink**) 08-09-2008, 03:23 AM

..oO(virtutour)

>OK. Got this to work in netscape 7.. Doesnt work in IE6?

The DOCTYPE is missing, which will kick IE and most other browsers into
quirks mode.

> <body bgcolor="00053F">

Use CSS for background colors.

Micha

#10 (**permalink**) 08-09-2008, 10:45 AM

Hi Michaal
Sorry havent got a clue what DOCTYPE is, and where does it go in the code?
Thanks
Masten

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode