Min. größe eines Feldes bestimmen und IE Probleme

Pelgro · 17. Februar 2010

Hallo,

ich habe 2 Fragen und zwar:

1 Frage:
Kann man mit CSS eine min. größe eines Feldes bestimmen?
Ich möchte eine bestimmte größe eines Feldes, doch wenn der Text länger wird soll das Feld auch größer werden.

2 Frage:
Wenn ich meine html Seite mit FF aufrufe sieht alles so aus wie es soll.
Wenn ich es wiederum mit IE öffne sieht es ganz anders aus.

Mit FF:
[Blockierte Grafik: http://img9.imageshack.us/img9/2235/64197243.jpg]

Mit IE:
[Blockierte Grafik: http://img504.imageshack.us/img504/1870/84315814.jpg]

Wie kann ich das verhindern?

Hier mal die Codes:

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>German Playboys Clansite | News</title> 




<style type="text/css">




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




</head>




<body>
<div id="seitenbereich">
  <div id="bild">




  </div>




  <div id="navi">




  </div>




  <div id="sponsoren">
  Sponsoren
  </div>




  <div id="inhalt">
  Der eigentliche Inhaltsbereich. 
  </div>




  <div id="fusszeile">




  </div>
</div>
</body>
</html>

Alles anzeigen

design.css

Code

html, body { 
background-image: url(bg.jpg);
background-repeat: repeat-y repeat-x;
} 







<!--
 #seitenbereich {
   background:url(bg.jpg) repeat-y repeat-x;
   height:600px;
   width:975px;
   margin: 0 auto;
}
 #bild {
   background:url(bild.jpg) no-repeat center top;
   height:150px;
}




 #navi {
   pandding-left:0em
}




 #sponsoren {
   float:left;
   border-top-width:1px;
   border-bottom-width:1px;
   border-left-width:1px;
   border-right-width:1px;
   border-style:groove;
   border-color:grey;
   background:url(sponsoren.jpg) center;
   background-repeat: repeat-y repeat-x;
   margin-top:2em;
   margin-left:2%;
   width:15%;
}




 #inhalt {
   float:right;
   border-top-width:1px;
   border-bottom-width:1px;
   border-left-width:1px;
   border-right-width:1px;
   border-style:groove;
   border-color:grey;
   background-color:white;
   background-repeat: repeat-y;
   margin-right:2%;
   margin-top:2em;
   width:80%;
   }




 #fusszeile {
   clear: both;
   background-color:black;
   border-top:1px solid black;
 
-->

Alles anzeigen

lg

NeoAramis · 17. Februar 2010

Hallo

Zu deiner ersten Frage:

Wenn die Textzeilen länger werden, fahren sie auf einer neuen Zeile weiter, die Höhe kannst du mit folgender Definition erreichen, jedoch ist das nicht nötig, denn es ist die Standardeinstellung:

Code

#head { height: auto; }

Zu deiner zweiten Frage:

Du hattest diverse Fehler in deinem Code, deshalb hat der IE es falsch dargestellt.

Hier eine Version, welche in den neuesten Browser korrekt dargestellt wird:

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>#title</title>
<link rel="stylesheet" type="text/css" href="design.css"/> 
</head>
<body>
<div id="seitenbereich">
	<div id="bild">
		<p>#bild</p>
	</div>
	<div id="navi">
		<p>#navi</p>
	</div>
	<div id="sponsoren">
		<p>#sponsoren</p>
	</div>
	<div id="inhalt">
  		<p>#inhalt</p>
  	</div>
	<div id="fusszeile">
		<p>#fusszeile</p>
	</div>
</div>
</body>
</html>

Alles anzeigen

design.css

Code

* { margin: 0; padding: 0; }




body { text-align: center; min-width: 40.1em; }




#seitenbereich {
	width: 40em;
	margin: 0 auto;
	text-align: left;
}




#bild {
	height: auto;
	background: #eee;
}




#navi {
	height: auto;
	background: #eee;
}




#sponsoren {
	width: 25%;
	height: auto;
	float: left;
	background: #eee;
}




#inhalt {
	width: 75%;
	height: auto;
	float: right;
	background: #eee;
}




#fusszeile {
	clear: both;
	height: auto;
	background: #eee;
}

Alles anzeigen

Immer beachten: Inhalt kommt vor Design, also bevor du etwas mit Grafiken probierst, ein stabiles Layout kommt zuerst!

Pelgro · 18. Februar 2010

Danke für deine Antwort.

Könntest du mir sagen was ich falsch gemacht hatte, wenn ich jetzt nämlich einfach die Codes benutze, weiß ich nicht worauf ich bei nächsten mal achten muss.

Min. größe eines Feldes bestimmen und IE Probleme

Jetzt mitmachen!

Teilen