Text in der Mitte anzeigen lassen

PC-Friends.de

Hallo,
ich versuche diesen Text in der Mitte anzeigen zu lassen:

Zitat

Powered by IPCMS Beta 2 © 2006 - 2007, Internet-Projects.net
PC-Friends.info Beta 1 © 2006 - 2007, Internet-Projects.net
Design 1.0 © 2002 - 2007, vbdesigns.de

Dazu verwende ich den Code:

Code

<td align="center">
<small>Powered by IPCMS Beta 2 &copy; 2006 - 2007, [url='http://www.internet-projects.net']Internet-Projects.net[/url]


PC-Friends.info Beta 1 &copy; 2006 - 2007, [url='http://www.internet-projects.net']Internet-Projects.net[/url]


Design 1.0 &copy; 2002 - 2007, [url='http://www.vbdesigns.de']vbdesigns.de[/url]</td>
</body>
</html>

Allerding wird dies nicht in der Mitte angezeigt! Zu sehen hier: http://www.pc-friends.info

Was mache ich falsch?

DeadEye

Hi,

statt der Deklarierung als Tabellenfeld z.B. ein div verwenden, Tabellenfelder als einzelne Elemente funktionieren nicht und sind an sich unsinnig.

Code

<div class="copy">
<small>Powered by IPCMS Beta 2 &copy; 2006 - 2007, [url='http://www.internet-projects.net']Internet-Projects.net[/url]




PC-Friends.info Beta 1 &copy; 2006 - 2007, [url='http://www.internet-projects.net']Internet-Projects.net[/url]




Design 1.0 &copy; 2002 - 2007, [url='http://www.vbdesigns.de']vbdesigns.de[/url]
</div>

Alles anzeigen

Da du ja eh schon eine *.css-Datei verwendest, einfach um den folgenden Teil erweitern

Code

div.copy {
margin:0 auto 0 auto;
text-align:center;
}

Die Klasse kann natürlich auch jede andere Bezeichnung bekommen.

Das Feld ist dann zentriert und der Text ist im Feld auch zentriert. Wenn er linksbündig sein soll, text-align entsprechend mit "left" zuweisen.

PC-Friends.de

Mensch, es gibt doch noch Menschen die schlau sind. Dankeschön! Darauf wäre ich nie gekommen

Baum

Noch einfacher waere es mit <center> ... </center>

DeadEye

Sicher geht es kürzer, dummerweise ist diese Variante nicht mehr der aktuelle Stand der "Technik" ...

http://de.selfhtml.org/html/text/bere…block_zentriert

Zitat von SELFHTML

Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden.

Das W3C drängt mehr oder minder stark auf die Nutzung von CSS zur Formatierung.

crusader19

Hallo an alle!

Ich bin neu hier bei euch und Anfänger in HTML.

Ich bin über die Suchfunktion auf diesen Thread gestoßen der meinem Problem

ähnelt. Ich bekomme es einfach nicht hin das meine "Überschrift" die sich in einem

Container befindet mittig im IE angezeigt wird. Firefox 2.0 und Opera 9.10 kein

problem. Das beispiel hier in diesem Thread habe ich probiert selbst mit dem

Beispiel von selfhtml hatte ich kein erfolg. Mein IE hat die ver. 6 arbeiten tue ich

mit Golive. Das stylesheet habe ich in einer externen css-Datei.

Meine html-datei!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Titel</title>
		<link href="css/grundlayout1.css" rel="stylesheet" type="text/css" media="all" />


	</head>
<body>
		<div id="logolinks">
			[img]images/logo.gif[/img]
		</div>

		<div id="header">
			<div class="firmenname">Firmenname</div>
		</div>

		<div id="logorechts">
			[img]images/logo.gif[/img]
		</div>

		<div id="navlinksbg"></div>

		<div id="content"></div>

		<div id="kontaktdaten"></div>
	</body>


</html>

Alles anzeigen

Meine css-datei!

Code

body { background-color: #ffc; background-image: url(../images/bg_nav_links.gif); background-repeat: repeat-y; margin: 0px 0px 0px 0px; }
div.firmenname {text-align:center; color: black; font-size: 2em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
html { 	min-height: 100.05%; }
#content { left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; visibility: visible; }
#header { height: 100px; left: 189px; top: 0; position: absolute; right: 189px; visibility: visible; }
#kontaktdaten { height: 100px; width: 220px; left: 0; position: absolute; bottom: 0; visibility: visible; }
#logolinks { width: 189px; left: 0; top: 0; position: absolute; height: 100px; visibility: visible; }
#logorechts { height: 100px; width: 189px; top: 0; position: absolute; right: 0; visibility: visible; }
#navlinksbg { width: 220px; left: 0; bottom: 100px; top: 100px; position: absolute; visibility: visible; }

Na wo habe ich was falsch gemacht??? Oder muß hier nur ein IE-Hack angewendet werden?

Für ein paar Tips wäre ich sehr dankbar.

Mfg crusader19

sejuma

Probier's mal so:
CSS

Code

body { background-color: #ffc; background-image: url(../images/bg_nav_links.gif); background-repeat: repeat-y; margin: 0px 0px 0px 0px; }
div.firmenname {text-align:center; color: black; font-size: 2em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
html {    min-height: 100.05%; }
#content { left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; visibility: visible; }
#kontaktdaten { height: 100px; width: 220px; left: 0; position: absolute; bottom: 0; visibility: visible; }
#logolinks {width: 189px; float:left; height: 100px; visibility: visible; }
#logorechts {height: 100px; width: 189px; float:right; visibility: visible; }
#navlinksbg { width: 220px; left: 0; bottom: 100px; top: 100px; position: absolute; visibility: visible; }

HTML

Code

<body>
      <div id="logolinks">
         [img]images/logo.gif[/img]
      </div>
      <div id="logorechts">
         [img]images/logo.gif[/img]
      </div>
<div class="firmenname">Firmenname</div>
      <div id="navlinksbg"></div>


      <div id="content"></div>


      <div id="kontaktdaten"></div>
</body>

Alles anzeigen

crusader19

Hallo sejuma,

Vielen Dank für deine schnelle und hielfreiche antwort.

Funktioniert prima lag also an dem Container #header. aber warum, kannst du es mir vieleicht noch erklären?

Was ist denn wenn ich da vieleicht später doch noch mal was anderes machen möchte ? Vieleicht eine waagerechte Navigationsleiste oder Bilder!

Wann macht es denn überhaupt sinn einen Container zu benutzen? so wie es schon gemacht habe, nur an der stelle nicht mit "Text"!?

Vielen Dank noch.

Mfg Crusader19

sejuma

Die beiden Logos werden gefloatet statt absolut positioniert. Die Wirkung ist in diesem Fall die gleiche, aber absolute Positionierungen sollte man nur gezielt einsetzen, z.B. wenn sich div's bewusst überlappen sollen. Ansonsten finde ich die float-Methode sinnvoller.
Den header hattest du absolut positioniert: entweder 189 px von links oder 189px von rechts. Das widerspricht sich eigentlich. Positionierungen nimmt mann normalerweise entweder von top und left oder von top und right vor.
Wenn du bei deinem Code die Positionierungsangaben für den header weglässt, dann schiebt er sich automatisch zwischen die beiden Logos und nimmt die verbleibende Breite ein.
Das wäre dann in deinem Sinn.
Wenn du also bei deinem code den header so definierst

Code

#header { height: 100px;}

müsste die zentrierung ebenfalls klappen.

Indem ich den header mit den ursprünglich absoluten Positionsangaben vollständig weggelassen habe, wurde der gleiche Effekt erzielt.

Container oder id's (#xxx) werden dann verwendet, wenn sie nur einmal pro Seite vorkommen (Eindeutigkeit). Mit ihnen verbindet mann insbesondere die Positionierung von Elementen und deren Formatierung.
Klassen (.xxx) könen dagegen mehrmals pro Seite vorkommen.
In deinem Fall hättest du statt ".firmenname" auch eine Überschrift, z.B. "h1" definieren können.

crusader19

Hallo sejuma;

Danke für deine Antwort war schon sehr hilfreich für mich.

Was mich noch interessiert ist warum es nicht im ie funktioniert hat. Kommt der ie mit der absoluten positionierung nicht klar?

Ich habe das mit dem

Code

#header { height: 100px;}

ausprobiert jetzt befindet sich der container links oben in der ecke?!

Oder habe ich dich jetzt gerade richtig verstanden das ich die container für die logos floaten lassen muß damit das mit dem obenstehenden css code funktioniert?

Bin jetzt ein bißchen verwirrt.

Aber trotzdem vielen dank für deine hilfe.

Mfg crusader19

sejuma

Ist vermutlich mal wieder der IE6. Im 7er klappt das.
Du kannst auch mal folgendes versuchen: Binde mal die beiden logogif's in den header-div ein. Also header-div öffnen und den HTML-code für die Logos und den Firmennamen einfügen, dann header schließen.

crusader19

Hallo sejuma;

Danke für deine Antwort habe ich gleich ausprobiert funktioniert.

Mein Code sieht jetzt so aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Titel</title>
		<link href="css/grundlayout.css" rel="stylesheet" type="text/css" media="all" />



	</head>
<body>


<div id="header"> 
		<div id="logolinks">
			[img]images/logo001.gif[/img]
		</div>
				<div class="firmenname">Firmenname</div>

		<div id="logorechts">
			[img]images/logo001.gif[/img]
		</div>
</div> 	


		<div id="navlinksbg"></div>

		<div id="content"></div>

		<div id="kontaktdaten"></div>
	</body>


</html>

Alles anzeigen

Code

#content { left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; visibility: visible; }
#header { height: 100px; left: 0; top: 0; position: absolute; width: 100%; visibility: visible; }
#kontaktdaten { height: 100px; width: 220px; left: 0; position: absolute; bottom: 0; visibility: visible; }
#logolinks { height: 100%; width: 189px; left: 0; top: 0; position: absolute; visibility: visible; }
#logorechts { height: 100%; width: 189px; right: 0; top: 0; position: absolute; visibility: visible; }
#navlinksbg { width: 220px; left: 0; bottom: 100px; top: 100px; position: absolute; visibility: visible; }

Kann man das eigentlich so lassen oder sollte ich da noch was abändern???
Ist da vielleicht noch was sogar falsch dran.

Wie müßte das den aussehen wenn ich das mit floats machen möchte, die du erwähnt hast?

Vielen dank noch mal für deine Hilfe und Mühe.

Mfg Crusader19

sejuma

Kannst so lassen, müsste hinhauen. Das visibility ist unnötig, da es im Standard so eingestellt ist.
Mit float sähe bei mir der Head-Bereich dann so aus:

Code

#header { height:100px;} 
#logolinks { float:left; width: 189px;} 
#logorechts {float:right; width: 189px;} 
h1 {text-align:center; color: black; font-size: 2em;margin-bottom:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }

Code

<div id="header">


<div id="logolinks"> 
         [img]images/logo001.gif[/img] 
      </div> 


<div id="logorechts"> 
    [img]images/logo001.gif[/img] 
      </div> 


            <h1>Firmenname</h1>


 </div>

Alles anzeigen

Es gibt mit CSS immer mehrere Möglichkeiten, um ans Ziel zu kommen. Solange der Code valide ist und die Wirkung erzielt, die du gern hättest, ist es egal, welche Lösung du nimmst. Ich arbeite auch gerne mit prozentualen Angaben indem ich die Breite mit Prozent- statt Pixelwerten angebe. Das hat den Vorteil, dass sich die Größen der Container an verschiedene Bildschirmauflösungen anpassen können.
Hier mal noch ein paar Float-Beispiele:
http://www.stichpunkt.de/css/bereiche.html

Tags