zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text ragt entweder hinaus oder wird verschoben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.07.2006, 21:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 5
Der_FLo befindet sich auf einem aufstrebenden Ast
Standard Text ragt entweder hinaus oder wird verschoben

Mahlzeit,

bin grad am um/neubau einer Webseite und will dies eigentlich kompl. mit divs css usw. veranstalten und ohne Tables..

Erstmal kurz der Code..

CSS-Datei (noch etwas alles durcheinander.. bin noch n bissel Anfänger)
Code:
body {
	background-color: #FFFFFF;
	margin: 0px;
	text-align: center;
	vertical-align: top;
	background-image: url(img/background_1.gif);
	background-repeat: repeat-x;
}
#ueberschrift {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	font-weight: bold;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	height: 120px;
	width: 760px;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #BAE3F8;
	background-color: #000000;
}
#datum {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #999999;
}
#hauptcontainer {
	background-color: #DEF4FF;
	margin: 56px auto;
	width: 760px;
	padding: 1px;
	border: 1px solid #C5ECFF;
}
#hauptcontainer .hauptbereich {
	background-color: #FFFFFF;
	width: inherit;
	padding: 0px;
	border: 1px solid #8BDAFF;
	vertical-align: top;
	text-align: left;
	margin: auto;
}
#hauptcontainer .hauptbereich_1 {
	background-color: #F3F3F3;
	padding: 4px;
}
#hauptcontainer .hauptbereich_2 {
	width:inherit;
	border: 1px solid #EAF7FD;
	background-color: #FFFFFF;
	text-align: left;
	padding: 16px;
	background-image: url(img/background_2.gif);
	background-repeat: repeat-x;
}
#kopfbereich {
	width: 100%;
	background-color: #555555;
	height: 52px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	text-align: left;
	padding-left: 56px;
	vertical-align: top;
}

#menu_1 {
	width: 120px;
	height: auto;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
#menu {
	list-style-type:none;
	width: 120px;
	border-top:1px solid #FFC5E2;
}
#menu li{
	list-style-type:none;
	border-bottom:1px solid #FFC5E2;
	}
#menu_1 h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	margin-left: 3px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#menu a  {
	display:block;
	width: 112px;
	padding: 4px 4px;
	text-decoration: none;
}
#menu a:link    { color:#FF3399; background-color:transparent; }
#menu a:visited { color:#FF3399; background-color:transparent; }
#menu a:hover   { color:#FF3399; background-color:#FFF3F9; }
#menu a:active  { color:#FF3399; background-color:#FFF3F9; }

#textbereich_1 {
	margin-left: 160px;
}
#clear {
	clear: both;
	margin: 0px;
	padding: 0px;
	height: 0px;
	width: 0px;
}
#text_kompl {
	margin: 0px;
	padding: 0px 0px 16px;
	float: left;
}
#text_kompl h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #000000;
	text-decoration: none;
	margin: 0px 0px 6px;
	padding: 0px;
}
#text_kompl .eintrag {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	text-align: justify;
}
#text_kompl .keycom {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	margin: 16px 0px 0px;
	padding: 0px;
	float: left;
}
#text_kompl a  {
	text-decoration: none;
}
#text_kompl a:link    { color:#FF3399; background-color:transparent; }
#text_kompl a:visited { color:#FF3399; background-color:transparent; }
#text_kompl a:hover   { color:#FF3399; background-color:#FFF3F9; }
#text_kompl a:active  { color:#FF3399; background-color:#FFF3F9; }
#text_kompl .comments {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	margin: 16px 0px 0px 64px;
	padding: 0px;
	float: left;
}
#text_kompl .datum {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	padding: 0px;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 64px;
	float: left;
}
#leer {
	margin-top: 16px;
}
#text_kompl .comdate {
	margin: 0px;
	padding: 0px 0px 16px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EBEBEB;
}
#text_erster {
	margin: 0px 0px 48px;
	padding: 0px;
}
#text_erster h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
}
#text_erster .last5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	margin: 0px;
	padding: 0px;
}
#text_erster a  {
	text-decoration: none;
}
#text_erster a:link    { color:#FF3399; background-color:transparent; }
#text_erster a:visited { color:#FF3399; background-color:transparent; }
#text_erster a:hover   { color:#FF3399; background-color:#FFF3F9; }
#text_erster a:active  { color:#FF3399; background-color:#FFF3F9; }
#links {
	width: 120px;
	padding: 0px;
	margin-top: 32px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
}
#links h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
#links .links {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
#links a  {
	text-decoration: none;
}
#links a:link    { color:#FF3399; background-color:transparent; }
#links a:visited { color:#FF3399; background-color:transparent; }
#links a:hover   { color:#FF3399; background-color:#FFF3F9; }
#links a:active  { color:#FF3399; background-color:#FFF3F9; }
Und nun die Seite..
Code:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="hauptcontainer"> 
<div class="hauptbereich"> 
<div id="ueberschrift"></div> 
<div class="hauptbereich_1"> 
<div class="hauptbereich_2"> 
	<div id="menu_1"> 
	<h1>Menü</h1>
	<div id="menu"> 
<li><a href="#">Startseite</a></li>
<li><a href="archiv">Archiv</a></li>
<li><a href="über%20FLo">&uuml;ber ...</a></li>
<li><a href="Bilder">Bilder</a></li>
<li><a href="Gästebuch">G&auml;stebuch</a></li>
<li><a href="kontakt">Kontakt</a></li>
	</div> 
	<div id="links"><h1>Links</h1>
	<p class="links"><a href="#">Link 1</a><br>
	  <a href="#">Link 2</a><br>
	  <a href="#">Link 3</a><br>
	  <a href="#">Link 4</a><br>
	  <a href="#">Link 1</a><br>
	  <a href="#">Link 2</a><br>
	  <a href="#">Link 3</a><br>
	  <a href="#">Link 4</a><br>
	  <a href="#">Link 1</a><br>
	  <a href="#">Link 2</a><br>
	  <a href="#">Link 3</a><br>
	  <a href="#">Link 4</a><br>
	  <a href="#">Link 1</a><br>
	  <a href="#">Link 2</a><br>
	  <a href="#">Link 3</a><br>
	  <a href="#">Link 4</a><br>
	  <a href="#">Link 1</a><br>
	  <a href="#">Link 2</a><br>
	  <a href="#">Link 3</a><br>
	  <a href="#">Link 4</a><br>
	</p>
	</div> 
	</div> 
	<div id="textbereich_1"> 
	<div id="text_erster"> 
	<h1>Willkommen auf XXXX </h1>
	<p class="last5">Die letzten 5 Eintr&auml;ge auf einen Blick f&uuml;r den schnellen Klick:<br>
- <a href="#">Eintrag 1 </a><br />
- <a href="#">Eintrag 2 </a><br />
- <a href="#">Eintrag 3 </a><br />
- <a href="#">Eintrag 4 </a><br />
- <a href="#">Eintrag 5 </a> </p>
	</div> 
	<div id="text_kompl"> 
	<h1> Eintrag 1 </h1>
	<p class="eintrag"> Blabla blablablabla bla blablabla blabla Blabla blablablabla bla blablabla blabla blabla bla </p>
	<span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla </span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span><span class="eintrag">Blabla</span>
	 <div class="comdate">
	<p class="keycom"><strong>Keywords</strong><br>
	  <a href="#">Texte</a><br>
	  <a href="#">Rezept</a><br>
	  <a href="#">Essen</a><br>
	  <a href="#">Bilder</a></p>
	<p class="comments"><strong>Kommentare</strong><br>
	    <a href="#">Comment1</a><br>
		<a href="#">Comment2</a><br>
	    <a href="#">schreiben</a></p>
	<p class="datum"><strong>Gepostet am</strong><br>25. Jun 2006 02:11:08</p>
	  <p id="clear"></p></div></div>
	  	<div id="text_kompl">
	<h1> Eintrag 2 </h1>
	<p class="eintrag"> Blabla blablablabla bla blablabla blabla Blabla blablablabla bla blablabla blabla blabla bla </p>
	<span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla </span><span class="eintrag">Blabla blablablabla bla blablabla blabla</span>
	<div class="comdate">
	<p class="keycom"><strong>Keywords</strong><br>
	  <a href="#">Texte</a><br>
	  <a href="#">Rezept</a><br>
	  <a href="#">Essen</a><br>
	  <a href="#">Bilder</a></p>
	<p class="comments"><strong>Kommentare</strong> <br>
	    <a href="#">Comment 1 </a><br>
		<a href="#">Comment 2 </a><br>
	    <a href="#">schreiben</a></p>
	<p class="datum"><strong>Gepostet am</strong> <br>25. Jun 2006 02:11:08</p>
	  <p id="clear"></p> </div> </div> <div id="clear"></div> </div> 
	
</div>
</div>
</div>
</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.07.2006, 21:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 5
Der_FLo befindet sich auf einem aufstrebenden Ast
Standard

nun das Problem: wenn ich es so lasse geht bei mir im IE der Text über hauptbereich_1 und hauptbereich_2 hinaus .. was ich ja nicht will (also voll übern Rand drüber).

Wenn ich das float: left; bei text_kompl wegnehme dann verschiebt er mir den 2. Eintrag auf höhe des endes von den links

will ich natürlich auch nicht... und langsam aber sicher krieg ich ne Krise.

Kann mir jemand sagen was ich verkehrt gemacht habe? Oder geht es gar nicht anders??
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.07.2006, 23:03
Benutzerbild von telekommander
Serviceschlampe
neuer user
 
Registriert seit: 25.07.2006
Beiträge: 21
telekommander befindet sich auf einem aufstrebenden Ast
Standard

Habe mal folgendes geändert: ( Just test it ... )
Betreffende Definitionen einfach mal austauschen bzw. alte auskommentieren.

Code:
#menu_1 {
        width: 120px;
        float: left;
        border: 1px solid #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
}
#textbereich_1 {
	margin-left: 130px;
	float: right;
}
#text_kompl {
	margin: 0px;
	padding: 16px;
	clear: both;
	border: 1px solid #000;
}
#text_erster {
	margin: 0px 0px 48px;
	padding: 16px;
	clear: left;
	border: 1px solid #000;
}
Ansonsten ist schwer aufräumen angesagt ...
__________________

"Das meiste, das man im WWW findet, ist Grundrauschen."
(C. Schoenleber in de.org.ccc)

Daily Garfield
Mit Zitat antworten
  #4 (permalink)  
Alt 25.07.2006, 23:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 5
Der_FLo befindet sich auf einem aufstrebenden Ast
Standard

hab die antwort gefunden:

ich hätte den gefloateten elementen einfach mal ne Breite geben sollen.. jetzt funxtes
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Auf-/Zuklappen mit JS crimi Javascript & Ajax 7 23.09.2008 17:27
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
3 dynam. Spalten mit Inhaltsüberlauf spacegaier CSS 6 12.10.2007 01:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:47 Uhr.