Text zentrieren

**Skindred** · 16.04.2012, 16:53

Huhu Liebe com
Ich bin gerade dabei eine page zu schreiben aber egal was ich mache ich bekomm den text auf der Startseite einfach nicht zentriert.
vielleicht könnt ihr mir helfen

Index.html

HTML-Code:

<!DOCTYPE html>
<html>
<head>
      <title>Überschrift</title>
	  <link rel="stylesheet"  type="text/css" href="style.css" />
</head>
<body>
        <div id="header">
		      <img src="Bilder/Header.png"  />
		</div>
        <div id="menue_bg">
		   <div id="menue">
		      <a href="index.html"><div class="menue_Button"><p>START</p></div></a>
			  <a href="index.html"><div class="menue_Button"><p>STREAM</p></div></a>
			  <a href="index.html"><div class="menue_Button"><p>RENDER</p></div></a>
			  <a href="index.html"><div class="menue_Button"><p>SIGNATUREN</p></div></a>
		   </div>
		
		
		</div>
       <div id="webseite">
	     <div id="infobox">
	       <div id="info_text">
		   <h1>Hallo One Piece Junkie's</h1>
		   <p>
		   Ich möchte euch auf meiner Webseite alle Folgen von One Piece,ein paar Render
		   und ein paar von mir angefertige Signaturen zur verfügung stellen.
		   
		   Ich hoffe ihr habt spaß auf meiner Page :)
		   
		   
		   
		   </p>
		   <div id="Ruffy">
		   <img src="Bilder/Startseite_render.png" />
		   </div>
		   </div>
		   
	   </div>
	      </div>
                   <div id="Footbar">
				    <img src="Bilder/footbar_03.png"  />
				   </div>
</body>
</html>

style.css

HTML-Code:

body {
background-color:#0d0f13;
margin:0px auto;
min-width:960px;

}
#header {
width:100%;
height:230px;
margin:0px auto;
text-align:center;
}

#menue_bg{
width:100&;
height:48px;
background:url(Bilder/Menue_bg.png) repeat-x;
}
#menue {
width:960px;
margin:0px auto;
text-align:center;
}
#menue a {
text-decoration:none;
}
.menue_Button{
float:left;
width:176px;
height:48px;
background:url(Bilder/Menue_sprites.png) no-repeat; 
background-position:0px 0px;
cursor:pointer;
}
.menue_Button p {
font-size:20px;
font-family:Calibri;
color:white;
margin:0px;
margin-top:8px;
}

.menue_Button:hover {
background-position:0px -48px;
}

#webseite {
width:960;
margin:0px auto;
text-align:center;
}

#infobox {
width:1000px;
height:845px;
margin:0px auto;
text-align:center;
background:url(Bilder/One-piece_05.png) repeat-x;
}

#info_text {
float:center;
width:244.5px;
height:207px;
text-align:center;
line-height: 1.5;
}
#info_text h1 {
font-size:20px;
font-family:Calibri;
font-weight:bold;
color:#e7e2e2;
margin:0px;
margin-top:8px;
margin-left:10px;
}
#info_text p {
font-size:16px;
font-family:Calibri;
color:#e7e2e2;
margin:0px;
margin-top:8px;
margin-left:10px;
}
#Footbar {
width:100%;
height:48px;
text-align:center;
margin:0px auto;
}

**Heartbeat** · 16.04.2012, 17:21

Entweder so, da musst du das ganze in die Mitte bei zentrierter Text schreiben.
<p><font align=center> zentrierter Text </font></p>

oder

Verstehe ich es richtig, das du das so haben möchtest? Siehe unten im Zitat. Wenn ja einfach nur vor den Text

HTML-Code:

 [center] und dann nach <p> [/center] einfügen

.

</div>
<div id="webseite">
<div id="infobox">
<div id="info_text">
<h1>Hallo One Piece Junkie's</h1>
<p>
Ich möchte euch auf meiner Webseite alle Folgen von One Piece,ein paar Render
und ein paar von mir angefertige Signaturen zur verfügung stellen.

Ich hoffe ihr habt spaß auf meiner Page

</p>

**DMW007** · 16.04.2012, 18:00

Da is ne Menge invalides HTML und CSS drin..

Fängt an beim Grundgerüst mit so Sachen wie

HTML-Code:

<!DOCTYPE html> 
<html>

oder

HTML-Code:

<a href="index.html"><div class="menue_Button"><p>START</p></div></a>

und geht bis zu fehlenden oder direkt ungültigen Einheiten wie

Code:

width:100&;

im Stylesheet (grade bei dem & kannst du froh sein dass zb Firefox sehr kulant mit solchen Leichtsinnsfehlern ist. Sind aber nicht alle Browser, dementsprechend kann sowas deine Darstellung in anderen Browsern komplett zerschießen)

Dein eigentliches Problem is aber was anderes.
In FF und anderen Browsern wird durch text-align: center nicht der gesamte div-Container zentriert, sondern nur der Text.
Du könntest hier bei deinem infobox-Container ein bisschen murksen, in dem du die Position auf absolut setzt und zb durch left den Abstand des Containers zu seinem übergeordneten Container angibst.
Ich würde aber stattdessen lieber das Layout ordentlich überarbeiten.
Deine komische Infobox würde ich direkt rausschmeißen und stattdessen eine ordentliche Startseite erstellen, sieht wesentlich seriöser und professioneller aus.
Guck dir mal andere Startseiten an, da wird das Projekt in ein paar Sätzen vorgestellt, und zwar mit einem ordentlichen Layout das die Seitenbreite nutzt, nicht in einer 244.5x207 Pixel Box in der man mitten im Satz nach 4 Wörtern einen Zeilenumbruch hat.
Sowas kann man als richtige InfoBox zb an den Rand setzen um auf eine Facebookseite oder sowas hinzuweisen, aber nicht als Startseite.

U-Labs

Account-Boerse

U-IMG

Thema: Text zentrieren

Text zentrieren

AW: Text zentrieren

The Following User Says Thank You to Heartbeat For This Useful Post:

AW: Text zentrieren

The Following User Says Thank You to DMW007 For This Useful Post:

Ähnliche Themen

Knuddels Text Bug's

[H] VB Text Senden

3D CSS Text Generator

CSS Header Zentrieren

Textbox1.Text = Textbox7.Text + keys.enter