School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,475
  • Replies: 826,116
  • Topics: 137,476
  • Snippets: 4,420
  • Tutorials: 1,148
  • Total Online: 1,754
  • Members: 84
  • Guests: 1,670

Welcome to Dream.In.Code
Become an Expert!

Join 300,475 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,754 people online right now. Registration is fast and FREE... Join Now!




Nesting <div>'s in CSS

 

Nesting <div>'s in CSS, Two problems with this code
bmeisner

16 Jun, 2009 - 07:04 PM
Post #1

New D.I.C Head
*

Joined: 27 Mar, 2008
Posts: 11


My Contributions
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.

CODE


<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;
}
User is offlineProfile CardPM
+Quote Post


Toxicterror

RE: Nesting <div>'s In CSS

16 Jun, 2009 - 10:12 PM
Post #2

You have [int.MAX] new eMails
****

Joined: 10 Mar, 2009
Posts: 625



Thanked: 14 times
My Contributions
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?
User is offlineProfile CardPM
+Quote Post

noorahmad

RE: Nesting <div>'s In CSS

16 Jun, 2009 - 10:12 PM
Post #3

Webmaster
Group Icon

Joined: 12 Mar, 2009
Posts: 2,018



Thanked: 125 times
Dream Kudos: 1350
My Contributions
try this:
HTML
<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>
User is offlineProfile CardPM
+Quote Post

Toxicterror

RE: Nesting <div>'s In CSS

16 Jun, 2009 - 10:38 PM
Post #4

You have [int.MAX] new eMails
****

Joined: 10 Mar, 2009
Posts: 625



Thanked: 14 times
My Contributions
@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 Jun, 2009 - 10:40 PM
User is offlineProfile CardPM
+Quote Post

noorahmad

RE: Nesting <div>'s In CSS

16 Jun, 2009 - 11:32 PM
Post #5

Webmaster
Group Icon

Joined: 12 Mar, 2009
Posts: 2,018



Thanked: 125 times
Dream Kudos: 1350
My Contributions
if you want it in center the try this:
CODE
<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>
User is offlineProfile CardPM
+Quote Post

bmeisner

RE: Nesting <div>'s In CSS

17 Jun, 2009 - 06:04 AM
Post #6

New D.I.C Head
*

Joined: 27 Mar, 2008
Posts: 11


My Contributions
QUOTE(Toxicterror @ 16 Jun, 2009 - 10: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?


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.
User is offlineProfile CardPM
+Quote Post

bmeisner

RE: Nesting <div>'s In CSS

17 Jun, 2009 - 06:25 AM
Post #7

New D.I.C Head
*

Joined: 27 Mar, 2008
Posts: 11


My Contributions
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
User is offlineProfile CardPM
+Quote Post

Toxicterror

RE: Nesting <div>'s In CSS

17 Jun, 2009 - 10:52 AM
Post #8

You have [int.MAX] new eMails
****

Joined: 10 Mar, 2009
Posts: 625



Thanked: 14 times
My Contributions
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
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 03:07AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month