Homepage in der Mitte des Bildschirms

**Zoret** · 12.05.2008 15:44

ja bis auf die unterschiedlichen pixel ist doch alles gleich oder nicht?

**Singal** · 12.05.2008 16:08

Eher "oder nicht"...

Du hast plötzlich Pixel stehen, wo vorher keine waren.

**zulujaner** · 13.05.2008 09:43

moin,

das sieht ja wieder kompliziert aus....

mach das mal so wie hier im Quellcode.

ich habe dir auch ne Grafik gemalt, vielleicht kommt es so besser an

Dein DIV ist auf der Seite zentriert! Egal welche Auflösung. Alles was du jetzt schreibst, schreibst du IN diesen Container

Sonst sitzt das nicht mehr zentriert.

Noch was. Auf deinem riesen Monitor kommt das mit der großen Tabellenbreite von 1017px wahrscheinlich gut. Aber die große Masse hat sicherlich noch ne Auflösung von 1024/768 und die müssen nach rechts scrollen. MAXIMALE Breite 960px!!
Na probieren und Testen anders gehts nicht.

HTML-Code:

<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title><style type="text/css">
<!--
* {
margin:0;
padding:0;
}

#inhalt {
position:absolute;
height:500px;
width:900px;
margin-top:-250px;
margin-left:-450px;
top: 50%;
left: 50%;
text-align: left;
overflow: auto;
background-color:green;
}
-->
</style>
</head>
<body>
<div id="inhalt">


<table width="723" border="0">
<tr>
<td width="295">&nbsp;</td>
<td width="418"><img src="logomittel.jpg" width="416" height="72" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><p>&nbsp;</p>
<p>house + design text</p>
<p>&nbsp; </p></td>
</tr>
</table>

<table width="" border="0">
<tr>
<td><div align="center">
<table width="494" border="1" bordercolor="#000000" bgcolor="#000000">
<tr bordercolor="#000000" bgcolor="#000000">
<td width="239"><span class="Stil1">Griffner-Text</span></td>
<td width="239"><img src="osm_01.jpg" width="239" height="186" /></td>
</tr>
</table>
</div></td>
</tr>
</table>

<table width="" border="0">
<tr>
<td><div align="center">
<table width="494" border="1" bordercolor="#000000" bgcolor="#000000">
<tr>
<td width="239"><img src="osm_01.jpg" width="239" height="186" /></td>
<td width="239"><div align="right" class="Stil1">Studiohouse-Text</div></td>
</tr>
</table>
</div></td>
</tr>
</table>

<table width="" border="0">
<tr>
<td><div align="center">
<table width="494" border="1" bordercolor="#000000" bgcolor="#000000">
<tr bordercolor="#000000" bgcolor="#000000">
<td width="239"><span class="Stil1">AV-Systeme-Text</span></td>
<td width="239"><img src="osm_01.jpg" alt="dg" width="239" height="186" /></td>
</tr>
</table>
</div></td>
</tr>
</table>

</div>
</body>
</html>

**koenixblau** · 13.05.2008 10:33

Falls du dir die Grafik ansiehst
und erns nimmst, heißt es korrekt
"...und am Ende </div></body></html>".

Der Slash muss sein.

**zulujaner** · 13.05.2008 10:57

den Slash hab ich unterschlagen -

Aber im Quelltext ist er ja da. Also kein Problem...

Aber korrekt ist es mit. <-- Danke koenixblau

**koenixblau** · 13.05.2008 11:44

Zitat von zulujaner

den Slash hab ich unterschlagen -

Aber im Quelltext ist er ja da. Also kein Problem...

Aber korrekt ist es mit. <-- Danke koenixblau

Für den Fall, dass er/sie/es durch Zufall den
Text in der Grafik liest.

ps.:
Wahnsinn die zweite "Zentrierung" in dieser Woche.

Vielleicht wäre es für den TP-Relaunch empfehlenswert,
penetranter auf die Suchfunktion hinzuweisen.
Bspw. per 500x60 Suchbutton, ... .
Vielleicht liegt es auch an der angewandten Sprache.

suchen = suchen (deutsch)
suchen = search (englisch)
suchen = 查尋 (chinesisch)
suchen = zoek (niederländisch)
suchen = recherche (?!?) (französisch - verbal)
suchen = αναζήτηση (griechisch)
suchen = ricerca (mafiosijanisch)
suchen = 調査 (toyotanisch)
suchen = поиск (russisch)
suchen = búsqueda (?!?) (spanisch)

**koenixblau** · 14.05.2008 19:08

Ein Danke für die tolle Zeichnung muss drin sein!

[ZUM THEMA]

Durch Zufall und löschen eines falschen Tags
bin ich auf folgendes Ergebnis gestossen:
1. Der umfassende Div ist 100% breit, ohne genaue Angabe der Maße.
2. Durch margin: auto ist der innere Div zentriert.

HTML-Code:

<!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" />

<title>Zentrierung mit Margin: auto</title>

<style type="text/css">
* { margin: 0px; padding: 0px; }
#umfassender_div {
	background-color: #000000;

}
#innerer_div {
	margin-left: auto;
	margin-right: auto;
	width: 700px;
	height: 45px;
	background-color: #e6e6e6;
}
</style>


</head>

<body>

<div id="umfassender_div">
<div id="innerer_div">Innenliegender Div</div>
</div

</body>
</html>

Bislang nutzte ich diese Methode,
wie sinnig ist die oben aufgeführte Methode (HTML-BOX)?

ps:
Mir geht es hauptsächlich um diese Methode,
Strukturierung des Codes ist nicht gefragt.

**zulujaner** · 14.05.2008 20:35

Ja genau sag mal einer Danke

Ich hab mal ein bisserl wegen deiner Center Methode gegoogelt.
Auf den ersten Blick ist die schon super. Wenig Code und effektiv.
Und fürn Anfänger auch leichter zu verstehen.

Einige alte Browser kommen so jedoch nicht klar. bis IE5.5 und IE6 im Quirks Mode.

Die brauchen zwei kleine Zusätze. Der Inhalt der ganzen Page muß zentriert werden und in den Div Containern wieder auf Links gesetzt werden.

Dann sind auch die alten Browser zufrieden und zeigen die Seite korrekt an.

Hier nochmal zum nachlesen, leider nur in englisch, türkisch und französisch: http://www.maxdesign.com.au/presentation/center/

**koenixblau** · 14.05.2008 20:55

Wart mal meine Freundin kann französisch, fließend - LK!.

Nun gut der IE6 wäre der einzigste, von den älteren Browsern, den ich berücksichtigen würde.

Fand die Tags merkwürdig, weil diesmal ohne Tricks nichts beanstandet wurde - Somit auch im IE6 funktionierte. Bei dir nicht?

align bzw. text-align ->body zuzuordnen finde ich ziemlich nervend.

Warum ist der umfassende DIV, aus dem Beispiel, 100% breit bzw. "Vieportfüllend"
ohne Angabe weiterer Werte?

**zulujaner** · 14.05.2008 21:13

ja französisch ist guuuuut

ich habe keinen IE6 mehr da zum Basteln, kann also dazu nix mehr sagen.

Ja und der DIV der ist doch nen Blockelement von ganz links bis ganz rechts, sobald was drin steht und wenn es nur ne 1 ist.
Das ging meines Erachtens schon immer.

Bei dem body -> center muß ich dir auch 100%ig zustimmen. Das nerft unwahrscheinlich, weil mans jedesmal wieder ausstellen muß.

Diese rechts links auto Methode werde ich mir aber merken - gefällt mir.

**koenixblau** · 14.05.2008 21:18

Was sagen die Meister dazu?

Boris, Mark, Ingo, Torsten, Torsten(!), Thomas, TP-Ladys & Co.?

Semantisch eingesetzt?

Sorry wenn ich jemanden vergessen habe!

ps:
IE6 spielt mit.

ps edit:
Grad entdeckt, zentriert ganz ohne Div,
falls sich jemand dafür interessiert: http://www.werbung-webdesign.de/proj...-ohne-Div.html

**Rinaldo** · 15.05.2008 04:23

Steh ich grad auf der Leitung?

Der Quelltext in #39 zentriert nur horizontal und in dem genannten Link zu Intensivstation wird ein Beispiel horizontal und vertikal zentriert gezeigt - hat doch nichts miteinander zu tun, oder?

Und wenn ich mir den Quelltext von #39 ansehe, kann ich jetzt keinen Vorteil feststellen (oder was für Anfänger leichter verständlich wäre) gegenüber dem horizontalen Zentrieren mit dieser Variante... Wenn ich auf IE <6 keine Rücksicht nehmen will/muss, komm ich mit weniger Quelltext aus wie bei koenixblaus Quelltext.

**koenixblau** · 15.05.2008 06:05

In der Tat war es ein falscher Link, ...

ps:
Weniger geht immer, ... (siehe mein obiges Beispiels - ps edit)
IE 6 abwärts und IE7 zugleich, zeigen!?

Lieber erstmal den Thread-Hersteller Luft holen lassen.

**zulujaner** · 15.05.2008 11:12

@ Rinaldo

Und wenn ich mir den Quelltext von #39 ansehe, kann ich jetzt keinen Vorteil feststellen (oder was für Anfänger leichter verständlich wäre) gegenüber dem horizontalen Zentrieren mit

Für den Anfänger leichter zu verstehen ist das schon wenn da steht zB. margin-left:auto;.
Er weis sofort ok hier gehts um die linke Seite.

Geht mir zumindest in meinem Bekanntenkreis so. Wenn CSS für jemanden neu ist, dann gleich die Kurzschreibweisen verwenden und verschachteln usw... das ist schwer zu Begreifen.

Mir ist da ne einfache Schreibweise, auch wenn es 2 Zeilen mehr sind lieber.
Wenn ich dann ne Seite Übergebe ist es leichter die ganze Sache zu erklären.

Weis ja nicht ob ich da mit meiner Meinung alleine da stehe??

zur Startseite vom TP

Thema: Homepage in der Mitte des Bildschirms

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Aktive Benutzer

Aktive Benutzer