zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Texte in Boxen formatieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2013, 12:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2013
Ort: München
Beiträge: 16
Xelo befindet sich auf einem aufstrebenden Ast
Standard Texte in Boxen formatieren

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.
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2013-11-19 um 11.44.01.png (293,1 KB, 15x aufgerufen)

Geändert von Xelo (19.11.2013 um 13:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.11.2013, 13:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2013, 13:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 19.11.2013, 15:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2013
Ort: München
Beiträge: 16
Xelo befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Es gibt keine dumme Fragen, es gibt nur Dumme die nicht fragen

Geändert von Xelo (19.11.2013 um 21:08 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2013, 21:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2013
Ort: München
Beiträge: 16
Xelo befindet sich auf einem aufstrebenden Ast
Standard

Alles ab Hotline soll im Header stehen
Muss zugeben das man das auf dem Screen schlecht sieht.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.11.2013, 05:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Xelo Beitrag anzeigen
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 Beitrag anzeigen
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
Mit Zitat antworten
  #7 (permalink)  
Alt 20.11.2013, 09:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2013
Ort: München
Beiträge: 16
Xelo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.11.2013, 10:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Xelo Beitrag anzeigen
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.

Geändert von gaby (20.11.2013 um 10:16 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 20.11.2013, 10:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2013
Ort: München
Beiträge: 16
Xelo befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.11.2013, 11:10
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
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
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite! Web4Live CSS 2 13.07.2011 17:01
Mitwachsende Container: 4 Boxen Cu Chullain CSS 1 08.09.2010 19:57
Boxen beim Seitenladen zuklappen (ohne "Flackern") Plasm Javascript & Ajax 5 08.01.2010 17:42
verschiedene Anzahl von Boxen in einer Zeile, richtig formatieren michi-muc CSS 1 17.02.2008 14:44
Gleiche Abstände zwischen Boxen? Shepstar CSS 5 29.07.2006 04:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:56 Uhr.