positioning

evropa · evropa

im trying to move a div tag to the right side, ive tried using "float" but it
doesnt work the way i want it to. i tried setting its position as absolute and
its working pretty well, but i was wondering if theres anything else i can do
to move it onto the other side.
i didnt explain that too well, im hoping the code below will show you what im
talking about.
<head>
<title>BG Underground</title>
<style type="text/css">

</style>
</head>

<body>
<div class="downloads" id="downloads">LATEST & GREATEST DOWNLOADS </div>
<div class="main" id="main"><br />
</div>
<div class="section" id="section">
<div align="center">CHOOSE A SECTION </div>
</div>
<p> </p>
</body>
</html>

Murray *TMM* · Murray *TMM*

What do you want, and where do you want it?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"evropa" <webforumsuser@macromedia.com> wrote in message
news:djct7v$p19$1@forums.macromedia.com...

> im trying to move a div tag to the right side, ive tried using "float" but
> it
> doesnt work the way i want it to. i tried setting its position as absolute
> and
> its working pretty well, but i was wondering if theres anything else i can
> do
> to move it onto the other side.
> i didnt explain that too well, im hoping the code below will show you what
> im
> talking about.
> <head>
> <title>BG Underground</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div class="downloads" id="downloads">LATEST & GREATEST DOWNLOADS
> </div>
> <div class="main" id="main"><br />
> </div>
> <div class="section" id="section">
> <div align="center">CHOOSE A SECTION </div>
> </div>
> <p> </p>
> </body>
> </html>
>

evropa · evropa

i actually got that figured out, but i have another problem. my layout looks
out of place in dreamweaver, but when previewed in a browser it looks fine.

could my body bg be causing a problem?

dreamweaver view - [url]http://img451.imageshack.us/img451/1421/hm0uc.png[/url]
ie view - [url]http://img451.imageshack.us/img451/4041/hm28ot.png[/url]
--
i also tried it with firefox & opera. it looks perfect in firefox, but in
opera its should be more to the left as you can see below. how would i would i
able to fix ths?
[url]http://img471.imageshack.us/img471/6716/hm39ur.png[/url]

thank you!

Murray *TMM* · Murray *TMM*

Which DW?

Show me your code again, please.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"evropa" <webforumsuser@macromedia.com> wrote in message
news:djeui7$9kd$1@forums.macromedia.com...

>i actually got that figured out, but i have another problem. my layout
>looks
> out of place in dreamweaver, but when previewed in a browser it looks
> fine.
>
> could my body bg be causing a problem?
>
> dreamweaver view - [url]http://img451.imageshack.us/img451/1421/hm0uc.png[/url]
> ie view - [url]http://img451.imageshack.us/img451/4041/hm28ot.png[/url]
> --
> i also tried it with firefox & opera. it looks perfect in firefox, but in
> opera its should be more to the left as you can see below. how would i
> would i
> able to fix ths?
> [url]http://img471.imageshack.us/img471/6716/hm39ur.png[/url]
>
> thank you!
>

evropa · evropa

im using dreamweaver 8

if its easier for you i will zip up the folder in which the files are in and
upload it.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="file:///C|/Documents and Settings/Owner/My Documents/my
pictures/bglayout/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div class="heading" id="heading">bgunderground.net</div>
</div>
<div class="hwelcome" id="welcome">
<div>
<div align="left">welcome to bgunderground.net </div>
</div>
</div>
<div class="bgu" id="sections"><a href="www.bgunderground.net">home</a><span
class="space">g</span> <a
href="http://www.bgunderground.net/subdream">forums</a><span
class="space">g</span> <a href="www.bgunderground.net">download</a> <span
class="space">g</span> <a href="www.bgunderground.net/about">about us</a></div>
<div id="newsupdates"></div>
<div id="about">welcome ralitza this is your 4th time visiting </div>
<p> </p>
</body>
</html>
---------
CSS
body {
background-attachment: fixed;
background-image: url(images/bodybg.png);
background-repeat: no-repeat;
background-position: center center;
background-color: #FFFFFF;
}

#main {
background-color: #333333;
position: absolute;
left: 60px;
top: 4px;
width: 680px;
height: 124px;
}

#welcome {
background-color: #00CC33;
position: absolute;
left: 60px;
top: 132px;
width: 363px;
height: 27px;
}
#sections {
position: absolute;
left: 429px;
top: 132px;
width: 303px;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
background-color: #00CC33;
}
#welcome div {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
padding-top: 3.5px;
padding-left: 3px;
}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333333;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333333;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #333333;
text-decoration: none;
}

.bgu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
padding-top: 7px;
padding-left: 8px;
}
.space {
color: #66CC33;
}

#newsupdates {
color: #333333;
position: absolute;
left: 61px;
top: 180px;
background-color: #F9F9EC;
width: 362px;
height: 241px;
}
.date {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
left: -101px;
top: 17px;
padding-top: 5px;
padding-right: 3px;
margin-top: 2px;
}
#about {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
position: absolute;
left: 61px;
top: 162px;
width: 362px;
height: 14px;
}

.heading {
font-family: Eurostile;
font-size: 36px;
color: #FFFFFF;
top: 3px;
padding-top: 43px;
padding-left: 10px;
font-weight: bold;
}
#downloads {
background-color: #EBF9E3;
position: absolute;
left: 428px;
top: 164px;
width: 312px;
height: 229px;
}
.hdownloads {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
padding-top: 4px;
padding-left: 4px;
padding-bottom: 6px;
font-weight: bold;
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
letter-spacing: .6em;
background-color: #CCEEBB;
height: 30px;
width: 50px;
}
.dlistcolor {
background-color: #CCEEBB;
height: 20px;
width: 308px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #333333;
padding-top: 4px;
padding-left: 4px;
}
.dlistcolor2 {
height: 20px;
width: 308px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #333333;
padding-top: 4px;
padding-left: 4px;
}

Murray *TMM* · Murray *TMM*

First off, this link is broken and cannot work on the web -

<link href="file:///C|/Documents and Settings/Owner/My Documents/my
pictures/bglayout/css.css" rel="stylesheet" type="text/css" />

Second, your use of absolutely positioned divs (Layers) to position
everything on the page is a very poor layout method - it will bite you big
time when visitors resize their text in the browser and your page becomes an
unreadable overlapping mess.

Third, your pseudo-class definitions are probably in the wrong order - with
your order:

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333333;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #333333;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #333333;
text-decoration: none;
}

You will only see a hover on unvisited links. Is that what you want? If it
is not, change that to this -

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
a:visited, a:active, a:hover {
color: #333333;
}

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"evropa" <webforumsuser@macromedia.com> wrote in message
news:djgqod$jso$1@forums.macromedia.com...

> im using dreamweaver 8
>
> if its easier for you i will zip up the folder in which the files are in
> and
> upload it.
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <link href="file:///C|/Documents and Settings/Owner/My Documents/my
> pictures/bglayout/css.css" rel="stylesheet" type="text/css" />
> </head>
>
> <body>
> <div id="main">
> <div class="heading" id="heading">bgunderground.net</div>
> </div>
> <div class="hwelcome" id="welcome">
> <div>
> <div align="left">welcome to bgunderground.net </div>
> </div>
> </div>
> <div class="bgu" id="sections"><a
> href="www.bgunderground.net">home</a><span
> class="space">g</span> <a
> href="http://www.bgunderground.net/subdream">forums</a><span
> class="space">g</span> <a href="www.bgunderground.net">download</a> <span
> class="space">g</span> <a href="www.bgunderground.net/about">about
> us</a></div>
> <div id="newsupdates"></div>
> <div id="about">welcome ralitza this is your 4th time visiting </div>
> <p> </p>
> </body>
> </html>
> ---------
> CSS
> body {
> background-attachment: fixed;
> background-image: url(images/bodybg.png);
> background-repeat: no-repeat;
> background-position: center center;
> background-color: #FFFFFF;
> }
>
>
> #main {
> background-color: #333333;
> position: absolute;
> left: 60px;
> top: 4px;
> width: 680px;
> height: 124px;
> }
>
>
> #welcome {
> background-color: #00CC33;
> position: absolute;
> left: 60px;
> top: 132px;
> width: 363px;
> height: 27px;
> }
> #sections {
> position: absolute;
> left: 429px;
> top: 132px;
> width: 303px;
> height: 20px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> font-weight: normal;
> color: #FFFFFF;
> background-color: #00CC33;
> }
> #welcome div {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> color: #FFFFFF;
> font-weight: bold;
> padding-top: 3.5px;
> padding-left: 3px;
> }
>
> a:link {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: normal;
> color: #FFFFFF;
> text-decoration: none;
> }
> a:hover {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: normal;
> color: #333333;
> }
> a:active {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: normal;
> color: #333333;
> text-decoration: underline;
> }
> a:visited {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-weight: normal;
> color: #333333;
> text-decoration: none;
> }
>
> .bgu {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> font-weight: bold;
> color: #FFFFFF;
> padding-top: 7px;
> padding-left: 8px;
> }
> .space {
> color: #66CC33;
> }
>
> #newsupdates {
> color: #333333;
> position: absolute;
> left: 61px;
> top: 180px;
> background-color: #F9F9EC;
> width: 362px;
> height: 241px;
> }
> .date {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> color: #333333;
> left: -101px;
> top: 17px;
> padding-top: 5px;
> padding-right: 3px;
> margin-top: 2px;
> }
> #about {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> color: #333333;
> position: absolute;
> left: 61px;
> top: 162px;
> width: 362px;
> height: 14px;
> }
>
>
> .heading {
> font-family: Eurostile;
> font-size: 36px;
> color: #FFFFFF;
> top: 3px;
> padding-top: 43px;
> padding-left: 10px;
> font-weight: bold;
> }
> #downloads {
> background-color: #EBF9E3;
> position: absolute;
> left: 428px;
> top: 164px;
> width: 312px;
> height: 229px;
> }
> .hdownloads {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> color: #333333;
> padding-top: 4px;
> padding-left: 4px;
> padding-bottom: 6px;
> font-weight: bold;
> }
>
>
> .quote {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 14px;
> color: #FFFFFF;
> letter-spacing: .6em;
> background-color: #CCEEBB;
> height: 30px;
> width: 50px;
> }
> .dlistcolor {
> background-color: #CCEEBB;
> height: 20px;
> width: 308px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> font-style: normal;
> font-weight: normal;
> color: #333333;
> padding-top: 4px;
> padding-left: 4px;
> }
> .dlistcolor2 {
> height: 20px;
> width: 308px;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 11px;
> font-style: normal;
> font-weight: normal;
> color: #333333;
> padding-top: 4px;
> padding-left: 4px;
> }
>
>

evropa · evropa

what should i use to position the layers? should i get rid of "absolute" and
just set their position manually? why does it matter what order pseudo-class
definitions are in? wouldnt it do the same job whether if its the first or last
one? thanks for you help

Murray *TMM* · Murray *TMM*

> what should i use to position the layers?

You don't use positioning at all on most of the page's containers, allowing
them to place on the page with the normal flow of the code. For those where
this is not good enough, you can float them or margin them into shape. It's
the rare case where you would really need to use position:absolute for
anything.

> why does it matter what order pseudo-class
> definitions are in?

It matters because of the 'cascade' of the rules into the page. When two
confllict (i.e., when a link is both visited and hovered), then the browser
will always give priority to the one closest to the element being styled.
Thus, if you have a:hover defined *before* a:visited, you will never see the
hover style on the visited link (unless they do not conflict).

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"evropa" <webforumsuser@macromedia.com> wrote in message
news:djh8ns$71t$1@forums.macromedia.com...

> what should i use to position the layers? should i get rid of "absolute"
> and
> just set their position manually? why does it matter what order
> pseudo-class
> definitions are in? wouldnt it do the same job whether if its the first or
> last
> one? thanks for you help
>

evropa · evropa

what do you mean the natural flow of the code? ive tried using margins &
padding to put the layers into place, it looks fine in dw then in a browser it
looks horrible. it also happend vice versa(looks bad in dw then looks okay in
firefox) im not getting this whole thing with dw it goes back to my other
question what is causing it too look out of place in dw but in preview it shows
up fine.

Murray *TMM* · Murray *TMM*

The normal flow of the code is the way the browser renders the page from top
to bottom (i.e., from <html> to </html>), and places elements as they are
encountered in this parsing of the page. When you understand how this works
(it's not rocket science), and when you understand how block tags and inline
tags differ as they are placed on the page, then you will understand that
positioning is only needed rarely.

> ive tried using margins &
> padding to put the layers into place,

A layer is an absolutely positioned page element (and *only* an absolutely
positioned page element, as far as DW is concerned). Margins only can
affect the placement of the layer itself, not the placement of other
elements around it - that's one of the huge disadvantages of using absolute
positioning at all - and padding only affects the placement of elements
within the positioned container, not the container itself. In general
combining margins with absolute positioning is not a good way to layout a
page.

> question what is causing it too look out of place in dw but in preview it
> shows
> up fine.

Browsers are much more tolerant of coding mistakes than is DW. If you are
seeing such things, I guarantee you it's because of abnormalities in your
coding.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"evropa" <webforumsuser@macromedia.com> wrote in message
news:djhi86$ido$1@forums.macromedia.com...

> what do you mean the natural flow of the code? ive tried using margins &
> padding to put the layers into place, it looks fine in dw then in a
> browser it
> looks horrible. it also happend vice versa(looks bad in dw then looks okay
> in
> firefox) im not getting this whole thing with dw it goes back to my other
> question what is causing it too look out of place in dw but in preview it
> shows
> up fine.
>

Marvin Lex · Marvin Lex

ccc

MAARVIN · MAARVIN

sorry.

positioning

Thread Tools

Display

positioning

Similar Questions and Discussions

CSS Content Box Positioning - Help Please

Positioning of content

Layer positioning

CSS Div Positioning

sundomains and positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Re: positioning

Posting Permissions