Hello Please HELP ! I am having problems with DIV

Discussion in 'CSS' started by locals, Dec 15, 2008.

0
  1. #1
    i am using this in the "head" of the page
    
div.new_auto_1
{ 
position:relative;
font-size: 12px;	
top:-533px;
width:200;
left:275px;
}

div.new_auto_2
{ 
position:relative;
font-size: 12px;	
top:-693px;
width:200;
left:470px;
}

div.new_auto_3
{ 
position:relative;
font-size: 12px;	
top:-853px;
width:200;
left:663px;
}

div.new_auto_4
{ 
position:relative;
font-size: 12px;	
top:-1013px;
width:200;
left:860px;
}
    Code (markup):
    and then this for the body

    
             <div class="new_auto_1"> some of my text </div>
	<div class="new_auto_2"> some of my text </div>
	<div class="new_auto_3"> some of my text </div>
	<div class="new_auto_4"> some of my text < /div>
    Code (markup):
    BUT at the bottom of the page THERE IS THIS HUGE GAP from where i have had to adjust my "top" code

    PLEASE HELP AND THANK YOU ! if you would like to see what i am talking about please visit
    [​IMG]​






    .
     
    locals, Dec 15, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    First, you are in 'quirks' mode. YOu need to add a proper doctype to the first line. Use this one:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Then validate your markup, fix any errors, and come back.
     
    drhowarddrfine, Dec 15, 2008 IP
  3. MWH-Jon

    MWH-Jon Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm not sure if this will help you but the code your using is making it really difficult for you to design, try this as a starting point.

    <!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>

<style type="text/css">

body {
margin: 0px 0px 0px 0px;
}

div.new_auto_parts{
background: url('image/new_automotive_parts.jpg') no-repeat;
margin: 0px auto 0px auto;
height:279px;
width:792px;
}

div.new_auto_parts_bar{
background: #b2b2aa;
margin: 0px auto 0px auto;
font-size: 12px;	
width: 792px;
}

#barend {
	clear: both;
	}

div.new_auto_background{ 
background: #b2b2aa;
margin: 0px auto 0px auto;
height:420px;
width:792px;
}

div.new_auto_1{ 
display: block; 
float: left;	
margin: 5px 6px 5px 6px;
width:186px;
}

h1 {
background: #9f9f97;
font-size: 14px; 
font-family: arial;}

</style>                                                                                                                                                                                                        

</head>

<body>

	<div class="new_auto_parts"> </div> 
	
	<div class="new_auto_parts_bar">

	<div class="new_auto_1"><h1>Interior Automotive Parts</h1><img src="image/new_interior_automotive_parts.jpg"><a href=""><img src="image/more_auto_1.gif" border="0"></a><br><br>dfhgdsh</div>
	<div class="new_auto_1"><h1>Exterior Automotive Parts</h1><img src="image/new_exterior_automotive_parts.jpg"><a href=""><img src="image/more_auto_1.gif" border="0"></a><br><br>dfhgdsh</div>
	<div class="new_auto_1"><h1>Top Automotive Dealers</h1><img src="image/top_automotive_dealers.jpg"><a href=""><img src="image/more_auto_1.gif" border="0"></a><br><br>dfhgdsh</div>
	<div class="new_auto_1"><h1>FREE Cool Cars Wallpaper</h1><img src="image/free_cool_cars_wallpaper.jpg"><a href=""><img src="image/more_auto_1.gif" border="0"></a><br><br>dfhgdsh</div>
	
	<div id="barend"></div>

	</div>
	
	<div class="new_auto_background">Content</div>


</body>
    Code (markup):
     
    MWH-Jon, Dec 15, 2008 IP
    locals likes this.
  4. locals

    locals Well-Known Member

    Messages:
    1,677
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    153
    #4
    THANKS SO MUCH FOR YOUR GUYS HELP THAT IS AWESOME

    I appreciate GREATLY !
     
    locals, Dec 15, 2008 IP