DIV tag not using the whole screen

Discussion in 'CSS' started by Ghezzo, Oct 16, 2009.

0
  1. #1
    Hey, I'm creating a small website using div tags and images, and right now I'm doing a heard for it.
    But I got a problem, the div tag is cut of on the sides, not using the whole screen, its not based on pixels, but on procent.


    [​IMG]

    I would like the image to go all the way out to the side.


    EDIT; Sorry for wide image.
    Actually it's being cut of all around it, any way to fix this in CSS?
     
    Last edited: Oct 16, 2009
    Ghezzo, Oct 16, 2009 IP
  2. wanovak

    wanovak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    { margin: 0; padding: 0; }
     
    wanovak, Oct 16, 2009 IP
  3. Ghezzo

    Ghezzo Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That didn't work :confused:
     
    Ghezzo, Oct 16, 2009 IP
  4. wanovak

    wanovak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    body { margin: 0; }

    or body { margin-top: 0; margin-left: 0; }
     
    wanovak, Oct 16, 2009 IP
  5. Ghezzo

    Ghezzo Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Is that a CSS code to put in the html file?
    As I have a CSS file to control all that stuff.

    Would be good if you could explain more where to put it.
     
    Ghezzo, Oct 16, 2009 IP
  6. wanovak

    wanovak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It goes in the header with proper CSS tags around it or in the external stylesheet. Either works.
     
    wanovak, Oct 16, 2009 IP
  7. Ghezzo

    Ghezzo Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I have tried both ways now, none of them works.
     
    Ghezzo, Oct 16, 2009 IP
  8. wanovak

    wanovak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Can you post your code? Or the URL?
     
    wanovak, Oct 16, 2009 IP
  9. Ghezzo

    Ghezzo Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    HTML code

    <?xml version="1.0"?>
<!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>
<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
		<link href="index.css" type="text/css" rel="stylesheet" />
</head>  
<body>  
   <div id="headertop" margin-top: 0; margin-left: 0;>
   </div>
   <div id="headerbottom">
   </div>
   <div id="contenttop">
   </div>
   <div id="content">
   <p>Test</p>
   </div>
</body>
</html>
    Code (markup):

    CSS code

    body{
	font-family: Arial,verdana;
}
#headertop{
	background-image: url(images/header_top.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 72px;
	border: none;
	margin-top: 0;
	padding-left: 0;
}
#headerbottom{
	background-image: url(images/header_bottom.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 112px;
}
#contentop{
	background-image: url(images/content_top.png);
	height: 116px;
	width: 600px;
}
#content{
	background-image: url(images/content.png);
	background-repeat: repeat-y;
	height: 100%;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5px;
	padding-right: 5px;
}
    Code (markup):
     
    Ghezzo, Oct 16, 2009 IP
  10. wanovak

    wanovak Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10 
    body{
	font-family: Arial,verdana;
	margin: 0;
}
    Code (markup):
    Doing this worked perfectly when I tested it. Then again, I used background colors in place of images. If that didn't work, try:

    img{border:0; padding: 0;}
    Code (markup):
    Are the images as big as you made the containers?
     
    wanovak, Oct 16, 2009 IP
  11. Ghezzo

    Ghezzo Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks, that worked :)

    The images are just small slices, just a couple of pixels wide, they are just repeated.
     
    Ghezzo, Oct 16, 2009 IP
  12. orangewine6

    orangewine6 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Hi wanovak thanks for the code that's really work thanks for that!!!



    Thanks and regards


    http://creditcard.net.ph/
     
    Last edited: May 11, 2010
    orangewine6, May 11, 2010 IP
  13. RachelCole

    RachelCole Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Maybe just put the margin attributes right into the body tag like this:
    <body leftmargin="0" topmargin="0" rightmargin="0">

    Some people will poo poo this technique but it works pretty much across all browsers.
     
    RachelCole, May 21, 2010 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    Rachel, those attributes have not been a part of the html specification since 1999, with the adoption of html4. They work only because browsers try to stay compatible with really old, outdated pages.

    There are no css aware browsers that do not understand body {margin: 0;}.

    cheers,

    gary
     
    kk5st, May 21, 2010 IP