PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
F

Pixel in % layout probleem

Door Frank op 01-09-2007 16:04
1.327 views
Zie volgende bericht
F
Frank
01-09-2007 16:07
Ik ben bezig met mijn layout 100% over het beeldscherm te krijgen. Dat gaat opzich best goed in FF maar in IE heb ik een pixel probleem (had ik eerst ook in FF maar dat heb ik opgelost met padding). hier mijn documenten (resultaat: www.grafikus.nl/test )

-------------------------------
style.css
-------------------------------

@charset "UTF-8";
/* CSS Document */

body {
	margin:0;
	padding:0;
	background:#000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:14px;
	color:#FFF;
	}


a.menu:link {color: #FFF; text-decoration:none;}
a.menu:visited {color: #FFF; text-decoration:none;}
a.menu:hover {color: #f5921e; text-decoration:none;}
a.menu:active {color: #FFF; text-decoration:none;}

#logo {
	background:URL("images/logo.jpg") no-repeat;
	height:95px;
	width:100%;
	margin:0 0 10px 0;
	}
	
#menu {
	height:20px;
	width:96%;
	text-align:left;
	font-size:12px;
	font-weight:bold;
	margin:0 0 40px 0;
	padding:0 2% 0 2%;
	}
	
#inhoud {
	padding:0;
	height:100%;
	width:100%;
	padding:0 0 0 0;
	}

#submenu {
	background:#666666;
	padding:0 1% 1% 1%;
	width:16%;
	border: 1px #f5921e solid;
	border-top:0;
	color:#f4f4f4;
	font-size:12px;
	line-height:40px;
	font-weight:bold;
	float:left;
	margin:0 0 0 2%;
	}

#context{
	width:50%;
	height:100%;
	float:left;
	margin:0;
	margin: 0 2% 0 2%;
	border:1px #FFF solid;
	padding:2%;
	border-top:0; 
	}

#extra {
	float:left;
	width:18%;
	height:400px;
	}
	

#inloggen {
	background:#666666;
	float:left;
	width:92%;
	padding:4% 4% 4% 4%;
	border:#f5921e 1px solid;
	border-top:0;
	color:#f4f4f4;
	font-size:12px;
	}

#domeincheck {
	background:#666666;
	float:left;
	width:92%;
	padding:4% 4% 4% 4%;
	border:#f5921e 1px solid;
	border-top:0;
	color:#f4f4f4;
	font-size:12px;
	}
	
	
#headerbox {
	padding:0;
	margin:0;
	height:35px;
	width:100%;
	}
		

#header {
	background:URL("images/gradient.jpg") repeat-x;
	float:left;
	padding:14px 1px 0 1px;
	height:21px;
	width:18%;
	text-align:center;
	color:#000;
	font-size:12px;
	font-weight:bold;
	margin: 0 0 0 2%;
	border: 0;
	}
	
#header2 {
	background:URL("images/gradient2.jpg") repeat-x;
	float:left;
	padding:14px 1px 0 1px;
	height:21px;
	width:54%;
	text-align:center;
	color:#000;
	font-size:12px;
	font-weight:bold;
	margin: 0 2% 0 2%;
	border: 0;
	}

#header3 {
	background:URL("images/gradient.jpg") repeat-x;
	padding:14px 1px 0 1px;
	float:left;
	height:21px;
	width:18%;
	text-align:center;
	color:#000;
	font-size:12px;
	font-weight:bold;
	border: 0;	
	}
	
	/*einde headerbox */
	
#header4 {
	background:URL("images/gradient.jpg") repeat-x;
	padding:14px 1px 0 1px;
	float:left;
	height:21px;
	width:100%;
	text-align:center;
	color:#000;
	font-size:12px;
	font-weight:bold;
	border: 0;	
	margin:25px 0 0 0;
	}

.textbox {border:1px solid #f5921e;background:#666666;color:#CCCCCC;font-size:10px;width:100%;}
.input {border:1px solid #f5921e;background:#666666;color:#CCCCCC;font-size:10px;width:60px;}


------------------------
index.php
------------------------

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>De Grafikus | Design en Webhorsting</title>
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div id="logo"></div>
	<div id="menu">| 
		<a href="#" class="menu" target="_self">Welkom</a>  |
		<a href="#" class="menu" target="_self">Even voortellen</a>  |
		<a href="#" class="menu" target="_self">Portfolio</a>  |
		<a href="#" class="menu" target="_self">Webhosting</a>  |
		<a href="#" class="menu" target="_self">Contact</a>  |
	</div>

    	
    <div id="inhoud">
            <div id="headerbox">
            	<div id="header">Submenu</div><div id="header2">Wie ik ben?</div><div id="header3">Inloggen</div>
            </div>
            <div id="submenu">
    		<a href="#" class="menu" target="_self">Frank Martin</a><br />
    		<a href="#" class="menu" target="_self">Jarno de Vries</a><br />

    		<a href="#" class="menu" target="_self">Christiaan van Harten</a><br />
    		</div>
            
            <div id="context">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

           </div>
           	
            <div id="extra"> 
            	<div id="inloggen">   
                	<form action="#" method="POST" name="inloggen"> 
                    Gebruikersnaam:<br />
                    <input class="textbox" type="text" name="gebruikersnaam" value="Gebruikersnaam" /><br /><br />
                    Password:<br />

                    <input class="textbox" type="password" name="password" value="pass" /><br /><br />
                    <input type="checkbox" name="onthouden" vale="onthouden" /> <font size="-2">Onhouden?</font> 
                    <input class="input" type="submit"  class="submit" name="submit" value="Inloggen"/>
                    </form>
              
                </div>
                <div id="header4">Domein Check</div>
                <div id="domeincheck">	
                	<form action="#" method="POST" name="domeincheck"> 
                    Domeinnaam:<br />

                    <input class="textbox" type="text" name="domein" value="" /><br /><br />
                    <input class="input" type="submit"  class="submit" name="submit" value="Check!"/>
                    </form>
                </div>
       		</div>
	</div>

            
</body>
</html>
vdleije .
01-09-2007 16:10
Wat versta je onder een pixel probleem !?
F
Frank
01-09-2007 16:18
Zie in IE.
De headers schuiven iets verder door dan de inhoud boxen..
Dat komt doordat alles in % is behalve de borders, de inhoud boxen hebben namenlijk wel een border maar de headers er boven niet. In FF heb ik dat opgelost door de headers links en rechts 1px padding te geven.

Reageren

Inloggen om te reageren