hello im trying to get my div layer to align so that it centers on the browser so it doesnt matter about the size of somones browser it will always be centered on the page. i have tried
<div align="center" class="style1" id="Layer1">but this doesnt seem to work when i view it in my browser and make the browser page smaller. i am doing this in dreamweavers test browser, could this be the problem? any help would be very much apreciated
align=center doesn't work on divs.
try this:
body {
text-align: center;
}
.style1 {
margin: auto auto;
}thanks but i have tried that and this way but it still doesnt work for some reason
#Layer1 {
position:absolute;
width:800px;
height:800px;
margin-right:auto;
margin-right:auto;
}is it the position absolute that i need to delete? might try that now
nope not the position absolute either:rolleyes:
indeed, it won't work with absolute positioning
use
margin: auto auto;don't use
margin-right: auto;
margin-right: auto;and don't forget
body {
text-align: center;
}aha thanks your a star! do you know how i keep the divs inside this div from moving?
i.e there left and top attributes?
ive got the main layer to staycentral thanks. but how do i keep the layers on top of this in the same position on that layer when the browser size changes?
this is how i have set the layers over another layer
<div class="style1" id="Layer1"><img src="dmlayer1.png" width="800" height="800" />
<div id="Layer7"></div>
<div id="Layer6"></div>
<div id="Layer5">
<div align="left"> </div>
</div>
<div id="Layer4">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="501" height="115">
<param name="movie" value="dmtitle.swf" />
<param name="quality" value="high" /><param name="LOOP" value="false" />
<embed src="dmtitle.swf" width="501" height="115" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="Layer2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="150" height="150">
<param name="movie" value="fruitdm.swf" />
<param name="quality" value="high" />
<embed src="fruitdm.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="150"></embed>
</object>
</div>
</div>and this is how one of the layers is currently set out in css
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: 314px;
top: 32px;
background-color: #FFFFFF;
}In all of this discussion, "doctype" hasn't been mentioned. It is impossible to tell you what HTML/CSS code to use if we don't know which version of HTML/CSS you're using.
i think this is what you mean. not certain as still learning
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />No. "Doctype" is short for "Document Type", and specifies to the browser the HTML/XHTML version your page is using. Until you know about doctypes and the various underlying DOMs they represent, you'll be shooting in the dark.
hmm is this it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Yes. Ok, so you're using XHTML. Tell me again (so I don't have to re-read the entire thread), what you're trying to achieve? There is no "center" attribute in XHTML. To do horizontal centering, you have to set the left and right margins to "auto". The CSS attributes are:
margin-left: auto; margin-right: autoVertical centering is another issue entirely, and it depends on whether you're working with elements of known vs. unknown height.
Study this source of this page for an example.
Also, this page gives a complete discussion of CSS centering techniques.
Thanks.
well i have the main div layer on margin: auto auto and this comes out fine on the browser.
now i need all the layers i have included on top of this layer or inside to move with this layer in the same position when the browser size changes.
here is how i have the layers
<div class="style1" id="Layer1"><img src="dmlayer1.png" width="800" height="800" />
<div id="Layer7"></div>
<div id="Layer6"></div>
<div id="Layer5">
<div align="left"> </div>
</div>
<div id="Layer4">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="501" height="115">
<param name="movie" value="dmtitle.swf" />
<param name="quality" value="high" /><param name="LOOP" value="false" />
<embed src="dmtitle.swf" width="501" height="115" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="Layer2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="150" height="150">
<param name="movie" value="fruitdm.swf" />
<param name="quality" value="high" />
<embed src="fruitdm.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="150"></embed>
</object>
</div>
</div>i just need to know how to set up the css for the layers inside?
thanks in advance
baz
You don't have to do anything special to any "contained" block-level elements (divs). They will automatically adjust to changes to the containing element. You can't assign an "align" property to a DIV element. There is no such thing in XHTML.
when i add a layer in the tags it automatically assigns a css style to the individual layer in dreamweaver.
this is how it shows
#Layer6 {
position:absolute;
width:501px;
height:417px;
z-index:4;
left: 356px;
top: 183px;
background-color: #FFFFFF;
}do i delete this or just adjust it?
Sorry, I don't use/know Dreamweaver. I code all my HTML, CSS, and JavaScript in a text editor. Note that the term "layer" refers to an older, proprietary Netscape-only tag/element. There is no such thing as a layer in standard HTML. I recommend you get in the habit of referring to elements by their proper names. We're dealing with DIV elements, not layers.
That aside, yes, the approach I'd take is to delete all CSS and styles until you get to the bare minimum. Then, build back up as needed.
in css you can assign divs to layers by numbers and is standard xhtml.
<div id="Layer2"></div>if anyone uses dreamweaver i could sure do with some help?
it works fine if i dont have margin: auto auto but im trying to get all the <div> tags to move in sequence with the browser size.
when i have <div> tags inside each other i cannot work it out:?:
in css you can assign divs to layers by numbers and is standard xhtml.
No, you cannot, as there is no such thing as "layers" in HTML, or XHTML. Plus, CSS cannot assign "divs" to anything at all. A DIV is an element, and CSS can apply styles to a DIV, but it cannot "apply" a DIV to anything. I think you need to go back to fundamentals. Drop Dreamweaver, learn the basic building blocks, and get your terminology down.
As I've explained, if you style your main container DIV properly, then DIVs defined inside of it will fall into place naturally. Start with a simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>Now, create a CSS class, and assign it to the DIV.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
.container
{
width: 200px;
margin: auto auto;
}
</style>
</head>
<body>
<div id="container" class="container">
<p>Some content to flesh out the div.</p>
</div>
</body>
</html>Add more CSS declarations to the class until it appears as you wish. Frankly, there is rarely a need to do any vertical centering. Users expect pages to start at the top of the browser, just as they expect words to appear at the top of book page. I would stick with simplistic, basic CSS.
Then, you simply add child DIVs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
.container
{
width: 200px;
margin: auto auto;
}
</style>
</head>
<body>
<div id="container">
<div id="child1"><p>A child div</p></div>
<div id="child2"><p>Another child</p></div>
</div>
</body>
</html>You can see if you copy my source code, that the child DIV elements automatically center, because of the relationship they have with the parent DIV.
its an id value so css can relate to it. I could put anyname if i wanted to. its just dreamweaver makes it simple and quicker as it is automatic with different numbers when a new div tag is added
<div id="Layer2"></div>it could be anything
<div id="anything"></div>
your example is all good thanks. but it doesnt really help. im trying to position child divs in certain positions on the container.
i want to try and have five or six div tags spread out in different positions. eg a long strip running down left side with hyper links and a header on the top with top distance from the container div tag of about ten pixels
what i need to do is add a left:250px; right:250px; in relation to the container div tag. must be a way. haha il get there in the end
Again, start simple, as I've shown. Then add styles, as needed. All positions follow the box model, and cascade (Thus "Cascading" Style Sheets).
Continuing my example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
.container
{
width: 200px;
margin: auto auto;
}
.child
{
position: relative;
left: 40px;
}
</style>
</head>
<body class="container">
<div id="container" class="container">
<p>Some content to flesh out the div.</p>
<div id="child1" class="child"><p>A child div</p></div>
<div id="child2"><p>Another child</p></div>
</div>
</body>
</html>Now you can see that one of the child DIV elements is positioned 40px to the left, relative to the parent DIV. Or, put another way, the position of the child element is determined by
1) The automatic margin of the parent DIV, which cascades down into the child divs, and
2) The "left" setting, 40px
I explain CSS Positioning in the linked article.
You seem oddly unwilling either to learn or to accept the help being offered, so this will be my last post in this thread. Soldier on.
okay people so i've sort of got there by
#Layer2 {
position:relative;
z-index:1;
left:300px;
top:-600px;
}I had to put a - on the top pixels so that it would move up into the position on the main div tag instead of automatically going under the main div tag.
One problem still though!
Every time i add a div tag it creates a space under the main tag, with the height of the child div tag on the browser. So if i had six child div tags on the main div tag, on the browser it would show an awful lot of space at the bottom which is unused.
Strange this but i might have to settle for it.
hahhahahhahahaha i've done it. I'm so chuffed!
i added overflow:hidden; to the main div tag and it has got ridden of the blank space.
Long way to go but ill master this web development even if it kills me
Centering a div layer is a relatively simple thing to do, its just not very intuitive. The div tag is affected by the text-align property. The problem is the text-align propery only affects child div objects, not the div object itself, so formatting must be done to the whole body tag and the formatting of all the other inline elements must be reset. Also, due to a display issue in Mozilla, the min-width property has so be set so it looks alright when the page is resized.
So here's what the code looks like:
<style type="text/css">
body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}
</style>After the code is inserted, the margin css property int the div tag needs to be set to auto and the width and the height of div element needs to be set to desired values.
I've tested this in Internet Explorer 7, Mozilla 2, and Netscape 8.
mine seems to be working fine with this css code
<style type="text/css">
<!--
#Layer1 {
width:800px;
height:800px;
margin:auto auto;
overflow: hidden;
}
#Layer2 {
position:relative;
width:501px;
height:115px;
z-index:1;
left:280px;
bottom:780px;
background-color: #FFFFFF;
}
#Layer3 {
position:relative;
width:250px;
height:115px;
z-index:2;
left:20px;
bottom:895px;
background-color:#FFFFFF;
}
-->
</style>however im not sure how it will look in mozilla firefox so will download that now.
it would be nice if there was just one browser!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.