Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 5 of 5
  1. #1
    Enthusiast Blitz's Avatar

    Join Date
    Mar 2009
    Location
    Zombocom
    Posts
    2,045

    (CSS) width:100% problem.

    I've been playing with a website with HTML and CSS, and I'm having a problem with the code width:100%;. It doesn't make it fill the entire width of the screen. In FireFox, it leaves a slight margin on the left side of the screen, but if you scroll to the left it fills the whole screen, but offsets the rest of my page. In Internet Explorer, both sides have a margin and is centered.

    I've checked for anything else in my CSS that could have made a background margin, and haven't found anything.

    CSS, the .navbar is what I want to fix.
    [spoiler:2nzsyyxa]
    Code:
    body
    	{	
    	background-color:white;
    	}
    
    p
    	{
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	text-decoration:none;
    	margin-left:20px;
    	margin-top:5px;
    	margin-right:20px;
    	background-color:#209787;
    	padding:12;
    	border-radius:15;
    	color:#014E43;
    	}
    	
    ul.watdolist
    	{
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:none;
    	text-decoration:none;
    	margin-left:20px;
    	margin-top:5px;
    	margin-right:20px;
    	background-color:#ffcccc;
    	border-radius:15;
    	color:#CC3333;
    	margin-left:20px;
    	margin-top:5px;
    	margin-right:20px;
    	background-color:#ffcccc;
    	padding:12;
    	padding-left:20;
    	border-radius:15;
    	color:#CC3333;
    	}
    	
    div
    	{
    	font-family:Arial, Helvetica, sans-serif;
    	}
    	
    a:link
    	{
    	text-decoration:none;
    	font-weight:bold;
    	}
    
    a:hover
    	{
    	text-decoration:underline;
    	font-weight:none;
    	}
    
    a:active
    	{
    	text-decoration:overline;
    	}
    	
    .navbar
    	{
    	text-align:center;
    	padding:10;
    	font-size:25;
    	background-color:#149785;
    	color:#014E43;
    	width:100%;
    	}
    	
    h1
    	{
    	text-align:left;
    	font-family:Balloon BD BT, Balloon LT BT;
    	color:#78020D;
    	}
    [/spoiler:2nzsyyxa]

    HTML for the navbar
    [spoiler:2nzsyyxa]
    Code:
    <html>
    <head>
    <link href="main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <h1>Lorem ipsum</h1>
    
    <div class="navbar">|Index| |What I can do| |Contact Me|</div>
    </body>
    </html>
    [/spoiler:2nzsyyxa]

    I'm probably forgetting more details but w/e.
    [center:s1g75gto]"I rather tell thee what is to be feared than what I fear; for always I am Caesar"

    Steam Username: Blitzkrieg ( Add CrashClosed54 )[/center:s1g75gto]

  2. #2
    Mother Russia Cavolia's Avatar

    Join Date
    Aug 2008
    Location
    Soviet Russia
    Posts
    4,317

    Re: (CSS) width:100% problem.

    Couldn't find the problem, it probably depends on the version of Internet Explorer you're using. IE is known for screwing up layouts anyway. About the Firefox issue, try F11 and see if the margin stays. if it does it has something to do with a margin in the programming. If it doesn't i'm not sure what it could be.
    The scrolling offset problem may be fixed by placing objects in more specific divs.

    Anyway, I think working with percentages isn't very practical. It will look differently for all kinds of screens.
    | Pivot | Artwork | Youtube |
    DD Achievements:
    Spoiler:

    Beginner:
    • 16 august 2008

    Intermediate:
    • 9 January 2009

    Veteran:
    • 28 June 2010


    666 Posts:
    • 3 July 2010

    1000 Posts:
    • 12 November 2010

    2000 Posts:
    • 30 March 2011

    3000 Posts:
    • 25 December 2011

    4000 Posts:
    • 19 November 2012


    Vip:
    • 15 July 2010
      Special thanks to Arch

    Myfiles:
    • 29 October 2010
      Special thanks to Mango

    2 Month ban:
    • 16 July 2010
      Special thanks to Skype

  3. #3
    Enthusiast Blitz's Avatar

    Join Date
    Mar 2009
    Location
    Zombocom
    Posts
    2,045

    Re: (CSS) width:100% problem.

    I thought using percentages would be more practical, as it would be 100% universally. 90 pixels could be 99% on a tiny screen, and 1% on the Jumbotron.

    I tried messing with margins and ended up getting it right on my screen, but it would most likely be different on another screen.
    [center:s1g75gto]"I rather tell thee what is to be feared than what I fear; for always I am Caesar"

    Steam Username: Blitzkrieg ( Add CrashClosed54 )[/center:s1g75gto]

  4. #4
    Mother Russia Cavolia's Avatar

    Join Date
    Aug 2008
    Location
    Soviet Russia
    Posts
    4,317

    Re: (CSS) width:100% problem.

    True, but you have to make everything resize with it. Otherwise it will look stupid.
    | Pivot | Artwork | Youtube |
    DD Achievements:
    Spoiler:

    Beginner:
    • 16 august 2008

    Intermediate:
    • 9 January 2009

    Veteran:
    • 28 June 2010


    666 Posts:
    • 3 July 2010

    1000 Posts:
    • 12 November 2010

    2000 Posts:
    • 30 March 2011

    3000 Posts:
    • 25 December 2011

    4000 Posts:
    • 19 November 2012


    Vip:
    • 15 July 2010
      Special thanks to Arch

    Myfiles:
    • 29 October 2010
      Special thanks to Mango

    2 Month ban:
    • 16 July 2010
      Special thanks to Skype

  5. #5
    Enthusiast Blitz's Avatar

    Join Date
    Mar 2009
    Location
    Zombocom
    Posts
    2,045

    Re: (CSS) width:100% problem.

    I fixed it. In case Google brings you here searching for help with the same problem, I just made margin:0 in the body selector.

    Lock please.
    [center:s1g75gto]"I rather tell thee what is to be feared than what I fear; for always I am Caesar"

    Steam Username: Blitzkrieg ( Add CrashClosed54 )[/center:s1g75gto]


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •