Nesting <div>'s in CSS

Two problems with this code

Page 1 of 1

7 Replies - 2079 Views - Last Post: 17 June 2009 - 11:52 AM

#1 bmeisner   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

Nesting <div>'s in CSS

Posted 16 June 2009 - 08:04 PM

I have two problems with the following CSS code. First the pages (page2, paage3, etc.and the two last text entries) do not align with the background (the first one - my name- and the page1 image do appear where they should but rest of them do not). I think I am nesting them correctly to align with the background image.
And second when I resize the page by grabbing the lower right corner, the background acts as it should (reduces in size and moves) but the images and text appear to be on a layer on top of and not attached to the background image and do not reduce in size as does the background They also stay in their current location rather than moving with the background.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>The Images of a Life</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<div id="container">
  <div id="myname">
  by Bruce Meisner </div>  
  <div id="page1">
  <img src="images/page1thumb.jpg" /> </div>  
  <div id="page2">
  <img src="images/page2thumb.jpg" /> </div>
  <div id="page3">
  <img src="images/page3thumb.jpg" /> </div>
  <div id="page4">
  <img src="images/page4thumb.jpg" /> </div>
  <div id="page5">
  <img src="images/page5thumb.jpg" /> </div>
  <div id="warning">
  WARNING  </div>
  <div id="notice">
  By clicking on any of the above thumbnails you agree that all photos are copywritten and all rights are reserved.
  Do not copy!  </div> 
</div><!--container -->
</body>
</html>



html {
font-family: Arial, verdana,  Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin:0;
padding:0;
}

body {
width: 1024px;
height:768px;
background: #000 url(images/bkg-home.jpg) no-repeat center;
position:absolute;
}

#container {
width:960;
height:740;
}

#myname {
position:relative;
left:785px;
top:282px;
font:20px;
color:#a6170b;
}

#page1 {
position:relative;
height:120px;
width:120px;
left:785px;
top:315px;
border: 1pt #000000 solid;
}

#page2 {
position:relative;
height:120px;
width:120px;
top:315px;
left:920px;
border: 1pt #000000 solid;
}

#page3 {
position:relative;
height:120px;
width:120px;
left:785px;
top:450px;
border: 1pt #000000 solid;
}

#page4 {
position:relative;
height:120px;
width:120px;
left:920px;
top:450px;
border: 1pt #000000 solid;
}

#page5 {
position:relative;
height:120px;
width:120px;
left:785px;
top:585px;
border: 1pt #000000 solid;
}

#warning {
position:relative;
left:1031px;
top:600px;
font-size:15px;
color:#a6170b;
}

#notice {
width:200px;
position:relative;
top:620px;
left:965px;
font-size:13px;
color:#000000;
}




Is This A Good Question/Topic? 0
  • +

Replies To: Nesting <div>'s in CSS

#2 Toxicterror   User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: Nesting <div>'s in CSS

Posted 16 June 2009 - 11:12 PM

first off
why the hell have you got the html and css in the same code bit?
is this one file or did you just merge it toghether to 1 here on D.I.C?
Was This Post Helpful? 0
  • +
  • -

#3 noorahmad   User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Nesting <div>'s in CSS

Posted 16 June 2009 - 11:12 PM

try this:
<style type="text/css">
body {
	width: 800px;
	height:600px;
	position:absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #CCCCCC;
}

#container {
width:960;
height:740;
}

#myname {
	position:relative;
	font:20px;
	color:#a6170b;
	float: left;
	width: 100%;
}

#page1 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
	float: left;
}

#page2 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
	float: left;
}

#page3 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
	float: left;
}

#page4 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
	float: left;
}

#page5 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
}

#warning {
	position:relative;
	font-size:15px;
	color:#a6170b;
}

#notice {
	width:200px;
	position:relative;
	font-size:13px;
	color:#000000;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Images of a Life</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<div id="container">
  <div id="myname">
  by Bruce Meisner </div>  
  <div id="page1">
  <img src="images/page1thumb.jpg" /> </div>  
  <div id="page2">
  <img src="images/page2thumb.jpg" /> </div>
  <div id="page3">
  <img src="images/page3thumb.jpg" /> </div>
  <div id="page4">
  <img src="images/page4thumb.jpg" /></div>
  <div id="page5">
  <img src="images/page5thumb.jpg" /> </div>
  <div id="warning">
  WARNING  </div>
  <div id="notice">
  By clicking on any of the above thumbnails you agree that all photos are copywritten and all rights are reserved.
  Do not copy!  </div>
</div>
<!--container -->
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 Toxicterror   User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: Nesting <div>'s in CSS

Posted 16 June 2009 - 11:38 PM

@noor: i know how to arrange it thanks... i just was wondering if he is trying to use that as 1 file...

i took your code and made a testfile
of course it doesnt show up the pictures but look at the screenshot... your website is way to wide!!!
same in height... the actual content starts at about half of my screen....
so youre not really centering anything here...


did you upload that file somewhere with the pictures...
would make it easier to help!!

because i cant find a problem with the actual code.... just the positioning and stuff like that
Attached Image
Firefox 3.xxx
shows everything but has horizontal scrollbars

Attached Image
IE 6.xxx
doesnt even show everything and if you mark all, you can see a very strange alignment

This post has been edited by Toxicterror: 16 June 2009 - 11:40 PM

Was This Post Helpful? 0
  • +
  • -

#5 noorahmad   User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Nesting <div>'s in CSS

Posted 17 June 2009 - 12:32 AM

if you want it in center the try this:
<style type="text/css">
body {
width: 800px;
height:600px;
position:absolute;
background-repeat: no-repeat;
background-position: center;
background-color: #CCCCCC;
}

#container {
	width:700px;
	height:400px;
}
#center {
	height: 100%;
	width: 100%;
	border: 2px solid #000000;
}

#myname {
position:relative;
font:20px;
color:#a6170b;
float: left;
width: 100%;
}

#page1 {
position:relative;
height:120px;
width:120px;
border: 1pt #000000 solid;
float: left;
}

#page2 {
position:relative;
height:120px;
width:120px;
border: 1pt #000000 solid;
float: left;
}

#page3 {
position:relative;
height:120px;
width:120px;
border: 1pt #000000 solid;
float: left;
}

#page4 {
position:relative;
height:120px;
width:120px;
border: 1pt #000000 solid;
float: left;
}

#page5 {
	position:relative;
	height:120px;
	width:120px;
	border: 1pt #000000 solid;
	float: left;
}

#warning {
	position:relative;
	font-size:15px;
	color:#a6170b;
	width: 100%;
	float: left;
	text-align: center;
}

#notice {
	width:200px;
	position:relative;
	font-size:13px;
	color:#000000;
	float: left;
	left: 35%;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Images of a Life</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<body>
<div id="center" align="center">
  <div id="container" align="center">
	<div id="myname">
	by Bruce Meisner </div>
	<div id="page1">
	<img src="images/page1thumb.jpg" /> </div>
	<div id="page2">
	<img src="images/page2thumb.jpg" /> </div>
	<div id="page3">
	<img src="images/page3thumb.jpg" /> </div>
	<div id="page4">
	<img src="images/page4thumb.jpg" /></div>
	<div id="page5">
	<img src="images/page5thumb.jpg" /> </div>
	<div id="warning">
	WARNING	</div>
	<div id="notice"> By clicking on any of the above thumbnails you agree that all photos are copywritten and all rights are reserved.
	  Do not copy!</div>
  </div>
</div><!--container -->
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#6 bmeisner   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

Re: Nesting <div>'s in CSS

Posted 17 June 2009 - 07:04 AM

View PostToxicterror, on 16 Jun, 2009 - 10:12 PM, said:

first off
why the hell have you got the html and css in the same code bit?
is this one file or did you just merge it toghether to 1 here on D.I.C?


Yes, I put both the style sheet code and the html on the same page so you could see both of them. I did not think it would cause a problem, which it obviously did. Sorry about that.
Was This Post Helpful? 0
  • +
  • -

#7 bmeisner   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-March 08

Re: Nesting <div>'s in CSS

Posted 17 June 2009 - 07:25 AM

I do not have a screen shot of it with the photos but here is a layout of what it should look like. The large black square is the background and the smaller photos which serve as navigation are white and labeled 1 through 5. My name, warning and notice are text. By clicking on any of the 1 - 5 images it will take yoou to that page. Hope that helps.
Attached Image
Was This Post Helpful? 0
  • +
  • -

#8 Toxicterror   User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: Nesting <div>'s in CSS

Posted 17 June 2009 - 11:52 AM

hmm ok
my idea:
Attached Image
(every box is a div)

id make a container div that has a margin (eg. 100px) from the right side
float:right;
margin-right: 100px;

in that container you have a div with your name (full width of container)

underneath those i would add the picture divs (float them left)
float:left;

and the last warning div you float left aswell
float:left;


hope it helped
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1