PDA

View Full Version : Attaching Div tags??


gangsterpb
11-15-2009, 05:06 PM
Is there a way you can attach or glue a div tag to another div tag? I got the main page to be centered the other day in any browser window or resolution. Now I'm trying to put the nav bar in but it moves in different monitor/resolution sizes. How can I get it to stay in one place for different monitor sizes?

Heres the site I'm re-working with: www.gangsterpb.com/index2.html (http://www.gangsterpb.com/index2.html)

gentleone
11-15-2009, 05:32 PM
It's because you still didn't put your code for the menu in the wrapper div. And you use way too much app div's with position:absolute. Have an insight in using floats for your divs.

gentleone
11-15-2009, 05:37 PM
Here, this will push you in the right direction.

CSS basics tutoria (http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/)l

gangsterpb
11-15-2009, 08:48 PM
I've tried this and I don't even know if I'm doing any of it correctly. I put what I'm testing in the wrapper div but it still changes position still differs from dreamweaver to my computer and my dad's computer.

domedia
11-15-2009, 09:30 PM
The wrapper div is supposed to wrap around all your other page elements.
Also check your favicon code, it's kinda messed up.

gentleone
11-15-2009, 09:35 PM
Okay. lets first fix some things in your stylesheet layout.css

body {
width: 1005px; remove this width. you don't give a width or height to a body
margin: 0 auto; /* centers */ remove this one too... wrong spot
text-align:center; add this line
}

@charset "utf-8"; put this line on the first row of this stylesheet
* {
margin: 0px;
padding: 0px;
} put this whole CSS rule above the CSS rule body here in the stylesheet
div#wrapper {
width: 1005px; /* centers */
margin-top: 0; remove this line
margin-right: auto; remove this line
margin-bottom: 0; remove this line
margin-left: -61px; remove this line
margin: 0 auto; add this line
background: url(GGpageSmall.gif) no-repeat; add this line too
}
#apDiv65 { remove this whole CSS rule (for now)
float: left;
margin-right: auto;

}

So, now your wrapper div is centered horizontally whatever the screen resolution is (although I find 1005px width a bit too width. a total width of 960px is recommended).

I also put the CGpage backgound image to the wrapper, but the size from the image doesn't correspondent to the widt of the wrapper div. The image is 1065px. Fix this! Remove the img scr in your HTML page where you have this CGpage image.

Well, do this first and the well go to step 2. Your HTML page.

gentleone
11-15-2009, 10:11 PM
Sorry, but add also the following line to #wrapper in your layout.css

text-align:left;

And make from div#wrapper just #wrapper. div in-front of it is not necessary.

gangsterpb
11-15-2009, 10:33 PM
the reason for the margin-left that is -61px is because My father wants it that way because he's basing the center off the page itself and the image begins at the lowercase "g" in "gangster" tail... but other than that, I did what you said..

gentleone
11-15-2009, 10:43 PM
If you're gonna override 'auto' with '-61px' then the whole point of centering your layout is gone

anyways lets contunue... have a sec!

gentleone
11-15-2009, 10:53 PM
I still see that you have the CGpageSmall.gif on the HTML page. Remove this (see marked red)

<div id="wrapper"><img src="GGpageSmall.gif" /><div id="apDiv65"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','SMALL/nav bar/homeR.png',1)"><img src="SMALL/nav bar/home.png" name="Image3" width="160" height="29" border="0" id="Image3" /></a></div>
</div>

Btw... did you fixed the size of the image too?

gangsterpb
11-16-2009, 01:09 AM
when I remove that though, the page doesn't show..

gentleone
11-16-2009, 07:00 AM
I know, so you have to add the height of the image to #wrapper in layout.css. I've waited with this, because I asumed that you would resize the image to a width of 1005px and then I would have another height. Anyways add the following to #wrapper:
height:1539px;

gangsterpb
11-16-2009, 11:06 PM
okay, Done.

gangsterpb
11-17-2009, 12:10 AM
now what? *

gentleone
11-17-2009, 07:54 AM
Now actually it is better that you remove everything in your HTML document so that it looks like this (or make a new page):
<!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=utf-8" />
<title>Dress. Feel. Play. Gangster.™</title>
<link href="&lt;link rel="shortcut icon" type="image/x-icon" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper"></div>
</body>
</html>

Note: Like domedia said before, your favicon code looks a bit messy and I don't know from which folder you get your favicon, but it's there... weird.

Okay, your stylesheet.
Add and remove the followings in layout.css:
body {
width: 1005px; remove, I told you before
margin: 0 auto; /* centers */ remove, I told you before
text-align:center;
background: url(The%20Extra%20Stuff/tilingbackground.jpg) repeat; add
}
So, now you have your layout set with an overall div 'wrapper' that is gonna hold your menu, content, etc.

Now it is for you to place 3 columns (divs) in the wrapper div that will cover the left side(bar), the middle (content) and the right side(bar) of your 'wrapper' background image. The way to do this is not with apDivs and there position:absolute, but you position the left and the content div with float:left and the right div with float:right in your CSS.

In the tutorial link I sent you earlier in this thread you can learn how to do this exactly.

For the menu structure it's better to use an unordered list. How to do this and for examples visit the following links:
http://css.maxdesign.com.au/listamatic/
http://www.cssplay.co.uk/menus/

So, I pushed you in the right direction and now it's up to you to get the structure right and to learn things. Really... everything what you should and want to know for how to build a website with a clean code and CSS... it's all on the net. Good luck!