Texte in Boxen formatieren

Xelo · #1 (**permalink**) 19.11.2013, 11:58

Hallo,

ich bin frisch angemeldet. Hab schon seit einiger Zeit das Forum gefunden und bin sehr froh darüber. Dank der Threads hier, konnte ich ohne grosse Vorkenntnisse (minimale html kenntnisse) mein eignenes Layout erstellen.

Nun steh ich nach der Anordnung der Boxen vor folgendem Problem.
Ich möchte Text innerhalb der Boxen formatieren.
Wie schaff ich es, dass ich sich der Text nur innerhalb der Boxen bewegt und nicht darüber hinaus?

Code:

body {
	background:lightyellow;
	text-align:center;
}
#website {
	width:1200px;
	margin:0 auto;
}
#header {
	width:1200px;
	height:150px;
	position:relative;
	background:white;
	border:2px solid black;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
}
#header h1 {
	padding-top:27px;
	font-size:60px;
	font-weight:bold;
	color:black;
	font-family:Comic Sans ms;
}
#header img {
	height:100px;
	position:absolute;
	right:25px;
	top:25px;
	border:5px;
}
#header p {
	font-color:black;
	font-size:15px;
	font-weight:bold;
	font-family:Comic Sans ms;
}
#main {
	width:1200px;
}
#menue {
	float:left;
	width:200px;
	height:300px;
	background:white;
	border: 2px solid black;
	margin-top:10px;
	margin-bottom:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#inhalt {
	float:right;
	width:990px;
	height:300px;
	background:white;
	margin-top:10px;
	margin-bottom:10px;
	border:2px solid black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#footer {
	width:1200px;
	height:35px;
	background:orange;
	border-radius: 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	margin-top:20px;
	clear:both;
}
#footer h1 {
	padding-top:5px;
	font-size:15px;
	font-weight:bold;
	color:white;
	font-family:Comic Sans ms;
}

Zitat:

<html>
<head>
<title>Meine Erste CSS designte Website!</title>
<link rel="stylesheet" typ="text/css" href="css/styles.css">
</head>
<body>
<div id="website">
<div id="header">
<h1>x_Phone Munich Sendling</h1>
<p>Hotline: 0177 19 89 695
Lipowskytsr. 4 | 81373 MÃ¼nchen</p>
<img src="http://xhtmlforum.de/images/logo.png" />
</div>
<div id="main">
<div id="menue">

</div>
<div id="inhalt">

</div>
</div>
<div id="footer">
<h1>Copyright by Andre Schulz / Designed with Textmate for MacOS / 2013</h1>
</div>
</div>
</body>
</html>

PS: Forumsuche hat nciht viel gebracht, wahrscheinlich hab ich nicht die richtigen Stichworte benutzt.

dazzle89 · #2 (**permalink**) 19.11.2013, 12:34

Hallo,

vielleicht bin ich ja blind.. aber wo im Screenshot ragt Text aus einer Box raus?

Das passiert aber eigentlich nur, wenn ein Wort z.B. breiter als die umliegende Box ist und nicht umbrechen kann oder wenn die Box eine feste Höhe hat und der Text höher ist, dann kann sich die Box wegen der festen Höhe nicht anpassen...

explanator · #3 (**permalink**) 19.11.2013, 12:35

Was soll denn passieren, wenn der Text zu gross für die vorgesehene Box ist?

Normalerweise passt sich die Box der Grösse des Textes an, wenn man keine Höhe festlegt. Soll eine Höhenbegrenzung stattfinden, wie bei dir geschehen, dann kannst du den Text abschneiden lassen, oder Srollbalken einfügen.

Text sollte in P-Tags stehen oder äquivalenten zum Inhalt passenden Textelementen.

Du bist dran.

Edit: Da war dazzle89 schneller.

Xelo · #4 (**permalink**) 19.11.2013, 14:06

Perfekt! Danke!
Jetzt passt es.

Ich hab jetzt das Problem, das meine Überschrift trotz

Zitat:

text-align: left;

Code in der Mitte also zentriert steht.
Hat das was damit zu tun, das ich dem body Element den Befehlt " center " gegeben habe?

Oder sollte man im Header eher mit Grafiken arbeiten?

Xelo · #5 (**permalink**) 19.11.2013, 20:10

Alles ab Hotline soll im Header stehen

Muss zugeben das man das auf dem Screen schlecht sieht.

gaby · #6 (**permalink**) 20.11.2013, 04:09

Zitat:

Zitat von Xelo

Ich hab jetzt das Problem, das meine Überschrift trotz Code in der Mitte also zentriert steht.
Hat das was damit zu tun, das ich dem body Element den Befehlt " center " gegeben habe?

Ja.
'text-align:center' vererbt sich auf alle untergeordneten Inline-Elemente.

Zitat:

Oder sollte man im Header eher mit Grafiken arbeiten?

Text als Grafik? - absolut nein!
Aber selbst wenn du es tätest, wäre dieses Bild dann ebenfalls zentriert (wenn du es unformatiert lassen würdest).

Zitat:

Zitat von Xelo

Alles ab Hotline soll im Header stehen

Muss zugeben das man das auf dem Screen schlecht sieht.

Hmmm, war das Problem nicht geklärt?
Jedenfalls hast du in Posting#4 geschrieben, daß jetzt alles passt.

btw:

Zitat:

Designed with Textmate for MacOS

Immer, wenn ich sowas sehe, frage ich mich: Was will der Autor mir damit sagen??...
Bin ich als Windows-User vielleicht einfach nur zu dumm, um den Zusammenhang zwischen Design und dem Apple-BS zu erkennen?
In deinem Fall, sollte da nicht besser stehen:

"Designed with the help of xhtmlforum"

SCNR

Xelo · #7 (**permalink**) 20.11.2013, 08:20

1. Wie kann man die vererbung aufheben?

2. OK, ist meine heuige Aufgabe

3. Problem ist geklärt

4. Das war der allererste Entwurf, ist nicht Endfassung, da auch noch nicht online.

Aber irgendwie hab ich ein Problem mit dem Hintergrundbild.
CSS Code:

Code:

#body {
	background-image: url ("images/bg.png");
	background-position: repeat;
}

funktioniert nicht, das Hintergrundbild wird nicht angezeigt.

gaby · #8 (**permalink**) 20.11.2013, 09:14

Zitat:

Zitat von Xelo

4. Das war der allererste Entwurf, ist nicht Endfassung, da auch noch nicht online.

Achso, "Designed with Textmate for MacOS " war nur ein Blindtext, um zu sehen, wie der Footer ausieht, wenn ein bißchen Text drin steht.
Verstehe ...

Ich nehme dafür zwar irgendeinen blubber-text, aber das macht natürlich jeder anders.

Zitat:

Aber irgendwie hab ich ein Problem mit dem Hintergrundbild.
CSS Code:

Code:

#body {
	background-image: url ("http://xhtmlforum.de/images/bg.png");
	background-position: repeat;
}

funktioniert nicht, das Hintergrundbild wird nicht angezeigt.

Überleg mal, wie soll man jetzt anhand dieses Code-Schnipsels den Fehler finden? Dazu müsste man die Website vor sich haben.
Ist es diese hier?

Home

Wenn ja, dort hat es ja geklappt mit dem Hintergrundbild.

Edit.
Kontrolliere mal den Pfad zum Bild.
In dem Schnipsel in Posting#1 jedenfalls ist er nicht richtig.

Xelo · #9 (**permalink**) 20.11.2013, 09:29

Code:

#html {
	height: 100,5%;
	font-size: 62,5%;
}
#body {
	text-align: center;
}
#website {
	background-image: url("images/bg.png");
	background-position: repeat;
	width: 1200px;
	margin: 0 auto;
}
#search {
	width: 1200px;
	height:40px;
	margin-bottom:8px;
	position: relative;
	border: 2px solid black;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
}
#header {
	width: 1200px;
	position: relative;
	border: 2px solid black;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
}
#header p1 {
	padding-left: 10px;
	font-size: 25px;
	font-weight: bold;
	color: black;
	font-family: Comic Sans ms;
}
#header img {
	float: right;
	height: 100px;
	position: absolute;
	right:25px;
	top:25px;
	border:5px;
}
#header p {
	text-align:left;
	padding-left: 10px;
	padding-bottom: 10px;
	font-color:black;
	font-size:15px;
	font-weight:bold;
	font-family:Comic Sans ms;
}
#main {
	width:1200px;
}
#menue {
	float:left;
	width:200px;
	height:300px;
	background:white;
	border: 2px solid black;
	margin-top:10px;
	margin-bottom:10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#inhalt {
	float:right;
	width:990px;
	height:300px;
	background:white;
	margin-top:10px;
	margin-bottom:10px;
	border:2px solid black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#footer {
	width:1200px;
	bottom:10px;
	background:orange;
	border-radius: 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	margin-top:20px;
	clear:both;
}
#footer h1 {
	font-size:15px;
	margin-top:5px;
	margin-bottom:5px;
	font-weight:bold;
	color:white;
	font-family:Comic Sans ms;
}

HTML-Code:

<!DOCTYPE html>
 
<head>
	<title>Meine Erste selbstgestaltene Website mit CSS!</title>
	<meta charset="UTF-8" />
	<meta name="description" content="Kurzbeschreibung" />
        <link rel="stylesheet" typ="text/css" href="css/styles.css">

</head>

<body>
	<div id="website">
		<div id="search">
		</div>
		<div id="header">
		<p1>x_Phone Munich Sendling</p1> 
		<p2>
			<p>Hotline: 0177 19 89 695
			<br>Lipowskytsr. 4 | 81373 M&uuml;nchen
			<br>Termine auch am Wochenende & Feiertags!
		</p2>
		<img src="images/logo.png" />
		</div>
		<div id="main">
			<div id="menue">
				
			</div>
			<div id="inhalt">
				
			</div>
		</div>
		<div id="footer">
			<h1>Copyright by Andre Schulz / Designed with Textmate for MacOS / 2013</h1>
		</div>
	</div>
</body>
</html>

explanator · #10 (**permalink**) 20.11.2013, 10:10

Das nützt bei Bildern nichts.
Besorge dir bei einem Freehoster Webspace und lade alles hoch.
Danach teilst uns den Link mit.

Nur so können wir sehen wo der Fehler liegt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 16:01
Mitwachsende Container: 4 Boxen	Cu Chullain	CSS	1	08.09.2010 18:57
Boxen beim Seitenladen zuklappen (ohne "Flackern")	Plasm	Javascript & Ajax	5	08.01.2010 16:42
verschiedene Anzahl von Boxen in einer Zeile, richtig formatieren	michi-muc	CSS	1	17.02.2008 13:44
Gleiche Abstände zwischen Boxen?	Shepstar	CSS	5	29.07.2006 03:37