✔ Gewaltige unterschiede IE & FF

Status
Nicht offen für weitere Antworten.
M

Malaxo

Erfahrenes Mitglied
Border troz Prozent?

Kann man nicht die Breie in % angeben danach einen Border von 2px nehmen und es so einrichten das die % mit dem Border berechnet werden?

Beispiel:

HTML: 
#menu{
	float: left;
	height: 100%;	
	width: 30%;
	border: 0px;
	background-color: #F01A24;
	margin-top: 0px;	
	border-right: 2px solid #fff;

}

#contents{
	float: right;
	height: 100%;
	width: 70%;
	border: 0px;
	background-color: #F01A24;
}

Menu 30% -> Conten 70% geht wunder bar auf logisch. Nur die 2px Border kommen noch dazu und so verschiebt sich wieder mal alles. Mit auto wird mir logisch nichts angezeigt da es noch leer ist.
 
Probier mal folgendes Stylesheet:
Code: 
#menu {
	float: left;
	width: 30%;
	height: 100%;
	border-right: 2px solid #fff;
	background-color: #F01A2A;
}
#contents {
	width: 70%;
	height: 100%;
	margin-left: 30%;
	background-color: #F01A2A;
}
 
Geht nicht, nicht mehr neben einander sondern untereinander einfach vesetzt um die 30% würde aber trozdem nicht reichen.

hab
HTML: 
<!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">
 
geht nicht... hier mein ganzer "code"

CSS
HTML: 
html, body {
		height: 100%;
		background-image:url(bg.jpg);
        font-size: 16px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFF;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
}

#container {
		height: 100%;
        margin: 0;
       	border: 1px dashed #999;
        width: 70%;
		border: 2px solid #FFF;
}

#header {
        height: 149px;
        width: 100%;
        border: 0px;
        background-color: #F01A24;
		border-bottom: 2px solid #fff;
}

#logo {
        width: auto;
        border: 0px;
        color: #FFF;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-top: 68px;
}

#menu {
	float: left;
	width: 30%;
	height: 100%;
	border-right: 2px solid #fff;
	background-color: #F01A2A;
}
#contents {
	width: 70%;
	height: 100%;
	margin-left: 30%;
	background-color: #F01A2A;
}

html teil
HTML: 
<!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">
....
HTML: 
<div id="container">
	<div id="header">
		<div id="logo">Axpo Informatik Infoscreen </div>
	</div>
	<div id="menu"></div>
	<div id="contents"></div>
</div>
 
Ok das rein Rote unten links müsste nach oben kommen. (siehe blauer Pfeil)
Jedoch hab ich im Menu (links) einen rand gemacht mit 2px daher hat es keinen Platz mehr nebeneinander.

Ganz einfach das Layout nur zum testen von CSS

Header oben
Menu links
Inhalt rechts neben dem Menu

Kann doch nicht so schwer sein.
In den für Layout nich geeigneten Tabellen kann das jedes kleinkind das Word kennt z.b. :confused:
 
Warum diese gewaltigen unterschiede wie müsste der Code angepasst werden

index.html

HTML: 
<!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>Axpo Informatik Infoscreen</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- /container -->
<div id="container">
	<div id="header">
		<div id="logo">Blubber</div>
	</div>
	<div id="menu"></div>
	<div id="contents"></div>
</div>
<!-- /container -->

</body>
</html>

Style.css
HTML: 
html, body {
	height: 100%;
    background-color: black;
    font-size: 16px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #F01A2A;
	background-image: url(bg.jpg);
	margin-top: 20px;
	margin-bottom: 20px;
}

#container {
	height: 100%;
    margin: 0 auto;
    border: 1px solid #CCCCCC;
    width: 650px;
}

#header {
    height: 150px;
    width: 100%;
    border: 1px solid #CCCCCC;
    background-color: #F01A2A;
    background-image: url(headerbg.jpg);
}

#logo {
    height: 150px;
    width: auto;
    border: 0px;
    color: #000;
}

#menu {
	float: left;
	width: 30%;
	height: 100%;
	border: 1px solid #CCCCCC;
	background-color: #F01A2A;
}

#contents {
	border: 1px solid #CCCCCC;
	width: 70%;
	height: 100%;
	margin-left: 30%;
	background-color: #F01A2A;
}

Bin echt am verzweifeln und mich über CSS aufzuregen nur weil ich es nicht schaffe den "standart" zu benützen. Momentan immer noch Tabellenliebhaber!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück