PDA

View Full Version : DIV tags - how do you place one inside another?


tommisauce
05-17-2007, 06:10 PM
Hi there,
for you Guru's this is probably going to be a relatively easy question.

I'm trying to design using CSS rather than tables, however I've run into a problem. I'm creating a site and have created a DIV for the Header, a DIV for the Content and a DIV for the Footer. I am trying place three boxes within the #Content DIV tag, however no matter how I place the tags, lets call them #Box 1, #Box 2, #Box 3 using the DIV tag pop up box the boxes don't take on the properties of the #Content DIV tag - i.e. I've made the boxes a height of 300px however the #Content DIV tag doesn't extend to show the the boxes sit inside the tag itself and the boxes show 'over hang'. I've tried a few variations but nothing is working. I've even checked other code on a CSS site with a three column layout - however I cannot get mine to work. Have you any ideas? And can you shed some light and let me know where I am going wrong? I've hunted this problem on the net but couldn't find a 'definitive' answer for I would seek the help of you guys.

I want to be a 'good boy' and do web design in CSS and not return to tables so forgive me if this is 'one of those' questions.

Many thanks.

Andromeda
05-18-2007, 01:46 AM
Hi tommisauce

Can you show us some code please.

Hi there,
I want to be a 'good boy' and do web design in CSS and not return to tables so forgive me if this is 'one of those' questions.

LOL! I know exactly what you mean! I'm in the process of designing my first site without tables - scary! :shock:

tommisauce
05-18-2007, 10:37 AM
Well here's the code: I tried messing around again this morning but no joy. I'm still only on 'test' stage now - so just want to make sure it works before I progress - hence the limited code.

<body>
<div id="Header">Header
</div>
<div id="Content">Content
<div id="Box1">Box One</div>
</div>
<div id="Box2">Box Two</div>
</body>

edbr
05-18-2007, 10:52 AM
a good idea is to comment end of divisions. It will save a lot of headaches if you get into this habit first. especially when nesting diivisions

<div id="Header">Header
</div><!--end divHeader>

post your division styles

tommisauce
05-18-2007, 11:03 AM
Cheers for the info - I wil start getting in the habit of that - as previously mentioned I want to be doing this correctly from the get go.

Here's the styles:
#Header {
width: 800px;
margin-left: auto;
height: 100px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 0px;
}
#Content {
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 0px;
background-color: #FFFF66;
}
#Box1 {
padding: 10px;
float: left;
height: 300px;
width: 250px;
margin-top: 10px;
}
#Box2 {
background-color: #CCFF00;
float: left;
height: 300px;
width: 250px;
padding-left: 10px;
margin-top: 10px;
margin-left: 10px;
}

davidj
05-18-2007, 04:10 PM
i too want to know how to do this

this is driving me up the wall

fwr1000
05-18-2007, 04:25 PM
I don't see a </div> tag closing your #content div. Try adding a closing div tag just before your body close tag.

Fred

fwr1000
05-18-2007, 04:30 PM
also just noticed that you have a closing div tag after #box1 closing div. This is closing the #content div before the #box2 div. Try this

<body>
<div id="Header">Header
</div>
<div id="Content">Content
<div id="Box1">Box One</div>

<div id="Box2">Box Two</div>
</div>
</body>

Now both boxes are withing the opening and closing tags for the #content div.

domedia
05-18-2007, 05:28 PM
DJ:
Since everything inside the box is floated you just needs to clear the floats in the CSS for your parent div:

#nameofyourparentdiv {
height: 1%;
overflow: hidden;
}

It should work, let me know.

Meeguk
05-19-2007, 12:54 AM
Seems to me that there are so many 'glitches' in DW, that one needs to know HTML any way. No?

davidj
05-19-2007, 01:04 AM
Dreamweaver is a great time saver but you should know what your doing.

If you want to work in the industry you should be able to work in code view on its own

Meeguk
05-19-2007, 01:39 AM
Don't want to work in the industry. Just paid $400 to develop my own site, which I thought DW would help me do. I'm finding out that's not true. DW should say, "DW is a timesaver, but you still need to learn and know HTML."

And they should also put some HTML code tutorials in with their software. Some basics. What I'm finding out, as a teacher, that most programmers using DW or HTML might know how to use DW or HTML but they don't know how to teach it to others in a systematic easy to understand format.

I'd like to team up with a programmer to do just that. Teach DW from a newbies point of view. There's no tutorials that I'm aware of that lay a solid foundation for someone to build upon when it comes to DW or HTML. If anyone would be so kind as to point me to such tutorials, I'd be much obliged.

I have two such tutorials: One 'Total Training' Video produced by some chick named Janine who uses too many pre-develped pages in the tutorial that one gets lost in trying to develop a site from scratch. Why not just start with a blank site and go from there explaining the basics as you go and the potential problems and how to fix them? Do I really need to go to a physical classroom to be taught how to do this stuff?

Colin Smith does a great job in his 'Integration Video', but it's too basic and when problems arise there's no troubleshooting.
Even the tutorials listed in the nav above are random shots at various aspects of using DW and other related software, but no comprehensive start to finish launching of a website.

This is a very frustrating experience. As a businessman with time to learn, I'd be happy to pay someone to assist me as I don't want to be dependent on a web master for my site from now until I die. I would like to do it myself with assistance from a knowledgeable person who actually knows how to convey what he knows to others in such a way that the student can actually do what he is being taught.

Any takers?

davidj
05-19-2007, 11:08 AM
Don't want to work in the industry. Just paid $400 to develop my own site, which I thought DW would help me do. I'm finding out that's not true. DW should say, "DW is a time saver, but you still need to learn and know HTML."
Well yes. DW is and can be a time saver but it expects that your going to learn or already know the basic language structure
And they should also put some HTML code tutorials in with their software.
there are hundreds of books and thousands of on-line tutorials. You have to find the right one that suits your learning style and level
Some basics. What I'm finding out, as a teacher, that most programmers using DW or HTML might know how to use DW or HTML but they don't know how to teach it to others in a systematic easy to understand format.
This is because they are programmers and web developers not teachers.
I'd like to team up with a programmer to do just that. Teach DW from a newbies point of view. There's no tutorials that I'm aware of that lay a solid foundation for someone to build upon when it comes to DW or HTML. If anyone would be so kind as to point me to such tutorials, I'd be much obliged.

Forget about learning DW. That comes with use. You need to learn HTML and the only way is to write it. DWC is here to help and could be considered as your instructor but getting someone to mentor you on a one to one basis may be difficult. What level are you at?
Why not just start with a blank site and go from there explaining the basics as you go and the potential problems and how to fix them?

There are too many potential problems to list. You should understand that you learn how to fix stuff when it goes tits-up and the next time it happens you remember what you did to fix it. Its part of the learning curve
Do I really need to go to a physical classroom to be taught how to do this stuff?
maybe you might get a better understanding of the basics if you attended a class
Colin Smith does a great job in his 'Integration Video', but it's too basic and when problems arise there's no troubleshooting.
as before there is too many potential problems to list in a troubleshooting guide. Learn as you find them
Even the tutorials listed in the nav above are random shots at various aspects of using DW and other related software, but no comprehensive start to finish launching of a website.
Thats because they are aimed at people who have dipped their toe into the world of coding and have the basics down and are looking to move on. If they don't understand they post a question

This is a very frustrating experience. As a businessman with time to learn, I'd be happy to pay someone to assist me as I don't want to be dependent on a web master for my site from now until I die.
You need to have a keen interest to get the best out this and develop the best work. Why not try us out before paying a mentor. You first post would be where do i start.
I would like to do it myself with assistance from a knowledgeable person who actually knows how to convey what he knows to others in such a way that the student can actually do what he is being taught.

I agree that some people cant relay tuition in an easy understandable way but if you become a regular here you will benefit i promise

Any takers?
a YES from every member here!

domedia
05-19-2007, 05:14 PM
Meeguk, I would actually explore the option of hiring a company to do it.. It does not make business sense to me for you to do you own website, is your business that slow that you're going to learn another profession to save a buck or two? Do you create your own marketing materials as well? Your own business cards, did you paint your offices?

I don't know your business at all so take what I said with a grain of salt :) But if you found a good developer that understood your business, you stand a better chance of ROI than if you spent time and money trying to do it yourself when you have a business to run.

Meeguk
05-20-2007, 09:00 AM
I agree. Looking now. Emailed one of the companies listed here on this site. and have contacted a few others, but they seemtoo busy to bother with me.

I don't have a business to run at this time. I have some time now to learn and that's why I'm learning to do this on my own, so I have at least a basic knowledge of what's going on and what can be done.

I just don't want to depend upon someone else to maintain my site is all. If I don't do it myself I have to rely on others and I don't want to do that. With DW and some basics, I think I can manage.

And yes, I know Photoshop and design and print my own business cards, I also published my own book. I was a real estate developer and general building contract for many years, and understand the concept of subcontractors etc. I only do what I can do and let others do what they do. I also have a degree in economics and have run several businesses.

However, I haven't found a company that I am comfortable with yet. I'm still looking. I want to be able to do any updates myself.

I know I have a great concept just need to find the right 'partner" is all.

Thanks for the input and this site. This is great. Just trying to teach this old dog new tricks......well, my learning curve is flatlined much of the time.

Meeguk
05-20-2007, 09:31 AM
http://www.cartoonstock.com/newscartoons/cartoonists/mba/lowres/mban1127l.jpg

davidj
05-20-2007, 11:05 AM
ok meeguk

where do you want to start

domedia
05-20-2007, 04:20 PM
Entrepreneur :) I think I can relate..