3 replies [Last post]
m3rcury
Offline
newbie
Last seen: 14 years 5 weeks ago
Timezone: GMT-7
Joined: 2006-10-19
Posts: 8
Points: 0

Hello all,

I have problems with my nested divs. For some reason, my nested DIVs act independently from the main DIV. If the content of the nested DIV is exceeding the main DIV, it just flows out from the main DIV. I thought it was because I had a fixed height of the main DIV. I changed the main DIV height as 100%, but it didn't work..instead it just disappeared.

Another problem is, how to add more spacing between the images on the top and the bottom (I used CSS styling to do borders around the image and use ul li tags inline to lay out the images).

Here's the CSS codes:

/*Tags redefined */
body {
background-color: #faeed6;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;

}

p {
padding:0px;
margin:0px;
}

a:link {
text-decoration:none;

}

a:visited {
text-decoration:none;

}

a:hover {
text-decoration:underline;
}

a:active {
text-decoration:none;

}

/*Main body wrapper layout*/

#mainbody{
height: 400px;
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
position: relative;
margin-right: 120px;

}

#resumemainbody{
height:1200px;
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
position: relative;
margin-right: 120px;
}

/*Body copy container */

#bodycopy{
margin-top:90px;
margin-left:150px;
padding-top:10px;
padding-left:30px;
padding-right:10px;
padding-bottom:10px;
width:350px;
position:absolute;

}

/*footnote*/

#footnote {
font-size:9px;
margin-left: 120px;
padding: 5px;
width: 800px;
text-align:center;

}

a.footer{
color:#666666;
}

a.footer:link{
color:#666666;
}

a.footer:visited {
color:#666666;
}

a.footer:hover {
color:#666666;
}

a.footer:active {
color:#666666;
}

/*Link indicators "you are here" */

body#sidenav a#sidemenuresume,
body#sidenav a#sidemenupackaging,
body#sidenav a#sidemenuidentity,
body#sidenav a#sidemenulayout,
body#sidenav a#sidemenucontact

{
color:#ffffff;
background-color:#00cc99;
}

/*Vertical menu on subpages*/

#sidemenu {
width: 150px;
height:400px;
margin-top:100px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #b2a1cb;
position:absolute;

}

ul.verticalmenu{
margin:0px;
padding:0px;
position:relative;
}

ul.verticalmenu li {
list-style-type: none;
display: block;
text-align: right;
padding-right:20px;

}

ul.verticalmenu li a{
font-size:10px;
font-weight:bold;
color: #b2a1cb;
padding: 5px;
line-height:40px;
}

ul.verticalmenu li a:link{
color: #b2a1cb;
}

ul.verticalmenu li a:visited{
color: #b2a1cb;
}

ul.verticalmenu li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#00cc99;
}

ul.verticalmenu li a:active{
color: #b2a1cb;

}

/*Resume page styles */

p.heading {
color:#b2a1cb;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.subheading {
color:#00cc99;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.copy {
padding-bottom:10px;

}

ul.qualifications {
margin:0px;
padding:0px;
}

ul.qualifications li {
list-style-type:none;
}

/*Portfolio thumbnail styles*/

img.thumbnail {
border-width:1px;
border-style:solid;
border-color:#cccccc;
padding:4px;

}

ul.thumbnail {
margin:0px;
padding-bottom:20px;
position:relative;

}

ul.thumbnail li {
list-style-type:none;
display:inline;
padding-left:20px;
padding-bottom:20px;

}

Here's the HTML codes:

Packaging projects

  • PACKAGING
  • IDENTITY
  • LAYOUT
  • OTHERS
  • RESUME
  • HOME










© 2006 All rights reserved

I also included a screenshot of my website to give you a better idea. Sorry, I don't have any web hosting right now (anyone knows a good one, that'll be great-Thanks)

Thank you so much

AttachmentSize
problems.jpg123.55 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Don't use position: absolute

Don't use position: absolute for your columns.

Make #sidemenu float left and give it a width. Also remove the height.

Then for #bodycopy, remove the positioning and width and just give it a margin-left wider than #sidemenu.

You'll probably also need to add overflow: hidden to #mainbody to make non-IE browsers contain the floats.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

m3rcury
Offline
newbie
Last seen: 14 years 5 weeks ago
Timezone: GMT-7
Joined: 2006-10-19
Posts: 8
Points: 0

Thank you so much. Now it's

Thank you so much. Now it's fixed.

How about the second question :regarding how to add more distance between the image on the top row and the image on the bottom row? (see the image:problems-the Fritos images)
I tried to do line height, but it still didn't work.

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Have you tried giving the

Have you tried giving the list items a margin-bottom?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference