•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 426,641 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 1,538 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 16466 | Replies: 28
 |
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation: 
Rep Power: 7
Solved Threads: 35
•
•
•
•
Originally Posted by bazmanblue 
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:
[html]<!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>
[/html]
Now, create a CSS class, and assign it to the DIV.
[html]<!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>
[/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.
[html]<!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>
[/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.
Last edited by tgreer : Nov 2nd, 2006 at 5:36 pm.
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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
[HTML]
<div id="Layer2"></div>[/HTML]
it could be anything
<div id="anything"></div>
[HTML]
<div id="Layer2"></div>[/HTML]
it could be anything
<div id="anything"></div>
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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
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
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 35
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:
[html]<!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>[/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.
Continuing my example:
[html]<!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>[/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.
Last edited by tgreer : Nov 2nd, 2006 at 6:23 pm.
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
okay people so i've sort of got there by[HTML]#Layer2 {
position:relative;
z-index:1;
left:300px;
top:-600px;
}[/HTML]
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.
position:relative;
z-index:1;
left:300px;
top:-600px;
}[/HTML]
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.
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
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
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
•
•
Join Date: Oct 2006
Location: Idaho
Posts: 44
Reputation:
Rep Power: 2
Solved Threads: 3
Light Poster
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:
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.
So here's what the code looks like:
html Syntax (Toggle Plain Text)
I've tested this in Internet Explorer 7, Mozilla 2, and Netscape 8.
•
•
Join Date: Aug 2006
Location: braintree
Posts: 57
Reputation:
Rep Power: 3
Solved Threads: 0
Junior Poster in Training
mine seems to be working fine with this css code
[HTML]<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>[/HTML]
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!
[HTML]<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>[/HTML]
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!
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
ajax apple asp beta bluray bon browser css developer development div dual dvd echo email encryption firefox format hd home html internet javascript layer microsoft mobile mozilla msdn news nintendo office opera pda privacy safari security site software sony spoof sql symantec tables testing url war web webmail wii windows
- Previous Thread: Is my code wrong or is Opera?
- Next Thread: Content Breaking thru Borders
