1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

DIV problems

Discussion in 'HTML & Website Design' started by PET, Jun 6, 2007.

0
  1. #1
    Hello,

    This is the HTML code:

    
<div class="main">
	<div id="header">
		header
	</div>

	<div class="menu">
	             test
	</div>
	<div class="contnent">
	             continut
	</div>
</div>
    HTML:
    This is the CSS:

    
.main{
	border: 2px solid black;
}
#header{
	border-bottom: 2px solid black;
	height: 100px;
}
.menu{
	width: 200px;
	float:left;
	border-right: 2px solid black;
}
.contnent{
	float:right;
	margin-left: 204px;
	position:absolute;

}
    Code (markup):
    I don't know whhhyyyy.... but the div menu and div contnent are not included in the main div. The main div simply finish at the end of the header div.

    This is what I hate on webdesign.... I'm on this problem for over 30 minutes.

    Also, what should I use, ID or CLASS?

    Thanks
     
    PET, Jun 6, 2007 IP
  2. raredev

    raredev Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    if you repeat the element more than once, use class. if you only allow one element for each page use id.
     
    raredev, Jun 7, 2007 IP
  3. deques

    deques Peon

    Messages:
    206
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    using ID or class has no difference, beside what raredev said
    In this case I would use ID

    to make both menu and content appear in main, use a clearer aka footer
    
#footer {
   clear: both;
}
    Code (markup):
    and use <div id="footer"> inside main after both menu and content
     
    deques, Jun 7, 2007 IP
  4. vvm

    vvm Peon

    Messages:
    19
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    replace to:
    
.main{
	border: 6px solid black;
}
#header{
	border-bottom: 2px solid black;
	height: 100px;
}
.menu{
	width: 200px;
	float:left;
	border-right: 2px solid black;
}
.contnent{
	margin-left: 204px;
}
    Code (markup):
     
    vvm, Jun 7, 2007 IP
  5. rspenc29

    rspenc29 Peon

    Messages:
    256
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If you place a float element inside a div, the div will ignore the floating element. What deques said will solve it. Just before the ending </div> tag for the main div you can put another div with clear:both; and it will drag down the bottom of the main div.
     
    rspenc29, Jun 7, 2007 IP
  6. Jesse Vlasveld

    Jesse Vlasveld Peon

    Messages:
    40
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Try giving the class 'main' a width or a height. This tends to do the trick.
     
    Jesse Vlasveld, Jun 7, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    First off, you're floating your menu and content area, which removes them from the flow. Also, if you don't mind me asking, why do you have your header set to a height of 100% (which IE 6 will treat as min-height)?
     
    Dan Schulz, Jun 7, 2007 IP
  8. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #8
    briansol, Jun 8, 2007 IP
  9. PET

    PET Member

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #9
    Thanks for your answers. I have start to read brainsol link however, doing that and that...there and that I lost all my "thinking".

    Please take a look on my HTML and CSS and point me with sugestions.

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Game - {$title}</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="main">
	<div id="header">
		header
	</div>
	<div class="sub-header">
		<div class="sub-header-left">
			sub-header
		</div>
		<div class="sub-header-right">
			Logged as
		</div>
	</div>
<div class="menu">
	test
</div>
<div class="contnent">
	
continut

</div>

</div>
<div class="footer">
	<div class="footer-left">
		footer
	</div>
	<div class="footer-right">
		© 2007 by PET<br />
		All Rights Reserved
	</div>
</div>

</body>
</html>
    HTML:
    And this is the CSS:

    
body {
	background:#FFFFFF;
	font-size:13px;
	font-family: Arial, Helvetica, sans-serif;
	margin-left:auto;
	margin-right:auto;
	width: 800px;
	margin-top:0px;
}
a:link {
	color:#0099FF;
	text-decoration: none;
	font-weight: bold;
}
a:visited {
	color:#0099FF;
	text-decoration: none;
	font-weight: bold;
}
a:hover{
	color:#0066FF;
	text-decoration: none;
	font-weight: bold;
}
a:active{
	color:#FF0000;
	text-decoration: none;
	font-weight: bold;
}
.main{
	border: 2px solid black;
	height: 700px;
}
#header{
	border-bottom: 2px solid black;
	height: 100px;
}
.sub-header{
	border-bottom: 2px solid black;
	height: 20px;
}
.sub-header-left{
	position:absolute;
}
.sub-header-right{
	float:right;
}
.menu{
	float:left;
	border-right: 2px solid black;
	width: 200px;
}
.contnent{
	position:absolute;
}
.footer{
	width: 796px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	height: 40px;
}
.footer-left{
	position:absolute;
}
.footer-right{
	float:right;
}
    HTML:
    My problem right now is at the MENU and CONTNENT. In IE it is ok, but in firefox NO.

    In IE the CONTENT text starts right after the MENU WIDTH, in FIREFOX they are over. If I add "margin-left" to CONTNENT then in IE, it will be even wider. It seems Firefox starts from the start, and IE from the width of the menu.

    Any sugestions?

    Also I want the menu tu have 100% HEIGHT.

    Any sugestions? This DIV stuff is makin my head to spin, just can't wait to start the PHP programming :)

    Thanks

    LATER EDIT:

    I also wanted to add the FOTER inside the MAIN DIV, in IE is ok, in Firefox...not :(
     
    PET, Jun 18, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Stop designing in IE. Get your hands on a copy of Opera and the Safari 3 beta. Since you already have your hands on Firefox, use that as well.

    Also stop thinking visually. Think STRUCTURALLY instead. Try to make your HTML as CSS agnostic as possible, that way when you change your presentation later on, you shouldn't have to touch any of the HTML whatsoever (other than adding or removing a hook as need be).
     
    Dan Schulz, Jun 19, 2007 IP
  11. PET

    PET Member

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #11
    Do you have any sugestion on how I should approach this? I know what you are talking but I'm stuck in the CSS.
     
    PET, Jun 19, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well, what does your page look like right now (I'm going to need a link - I had a nice little unplanned trip to the hospital at 3am yesterday so you can probably imagine what a vicodin cocktail can do to an otherwise healthy person)?
     
    Dan Schulz, Jun 19, 2007 IP
  13. PET

    PET Member

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #13
    Here is a screenshot.

    Header is ok.
    Sub-Header is ok. I have 2 divs there, one left on right on the same row.

    THe problem is that I moved the footer insinde the MAIN div, and how the footer is OVER the menu and the contnent, also the CONTNENT is over the menu :)

    Here is the stuff.

    The MENU must have height 100%, that means it must always be town to the page. The menu will normaly push the footer in the bottom of the page. And the contnent must be on the left of the menu.
     

    Attached Files:

    • div.jpg
      div.jpg
      File size:
      61.5 KB
      Views:
      36
    PET, Jun 19, 2007 IP
  14. rspenc29

    rspenc29 Peon

    Messages:
    256
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #14
    in the footer you need clear:both;

    if you remove height:100%; in the menu then it wont hang over the footer.
     
    rspenc29, Jun 19, 2007 IP
  15. PET

    PET Member

    Messages:
    86
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #15
    Thatnks, I will add clear:both; on the footer. But how to make the menu to be height 100%?
     
    PET, Jun 19, 2007 IP