DIV Ausrichtung

Bub · 19. Feb. 2006

Guden Morgen.
Ich möchte in meinem Layout den DIVs jetzte eine maximale Breite geben, was ich auch mit max-width umgesetzt habe.
Jetzt möchte ich die DIVs in meinem Layout centern, da das einfach scöner aussieht.
Jetzt stellt sich mir das problem, sobald ich mit dem atribut alghn für die DIVs spiele ändert sich nur die Anordung des Textes.
De Befehl center funzt garnicht.
Ich weiss im Moment nicht weiter.

Hier ein Ausschniit aus dem CSS für einen DIV:

Code:

div.mainnavigation {
	position: absolute;
	top: 165px;
	left: 25px;
	right: 25px;
	height: 21px;
	border: 1px solid #5A5A5A;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #8AAED3;
	text-align: left;
	max-width: 950px;
}

Ich danke euch für eure Hilfe.

Mfg Bub. Over and Out!

dkdenz · 19. Feb. 2006

Probiere mal das aus:

Code:

div.mainnavigation {
	position: absolute;
	top: 165px;
	left: 25px;
        [B]margin:0px auto;[/B]
	right: 25px;
	height: 21px;
	border: 1px solid #5A5A5A;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #8AAED3;
	text-align: left;
	max-width: 950px;
}

Bub · 19. Feb. 2006

Danke hat gefunzt!!!

Ihr seid einfach die besten.

Mfg Bub. Over and Out!

Bub · 19. Feb. 2006

So weiteres Problem.
Ich habe einen Absolut positioniereten Div in dem befindet sich ein DIV für den Footer, der sich variabel positioniert.
In dem Footer sind 3 weitere DIVs mit den Referenzen von der W3C ...
In diesem Footer soll ein DIV hin der sich wieder genau die Mitte sucht. Hab die oben egnannte variante probiert macht er aber net.
So sieht der CSS aus:

Code:

div.loadtime {
	float: left;
	margin: 0px auto;
	width: auto;
}

Danke für eure Hilfe.

Mfg Bub. Over and Out!

dkdenz · 19. Feb. 2006

Was ist das? Das div, welches die drei anderen beinhalten soll?

Code:

div.loadtime {
	float: left;
	margin: 0px auto;
	width: auto;
}

Und hat Dein Footer-div eine feste Breite?
Du könntest die drei 'Innen-div's' jeweils mit den Breitenangaben 33%, 34%, 33% floaten.
Oder habe ich das jetzt total falsch verstanden?

Bub · 19. Feb. 2006

Nein. Das ist der DIV (oder das?), welches mittig positioniert werden soll.
Der Container ist das absolut Positionierte DIV. Darin befindet sich der Footer der ganz einfach unten dran hängt ohne absolute positionierung. Im Footer befinden sich 3 DIVs. Der CSS-Code entspricht einem davon.

Entschuldigung, wenn ich mich unklar ausgedrückt hatte.

Mfg Bub. Over and Out!

dkdenz · 19. Feb. 2006

Dann würde ich mal so ein Konstrukt ausprobieren (ungetestet):

Code:

<div id="container">
    <div id="irgendwas"></div>
        <div id="footer">
            <div id="loadtime1"></div><div id="loadtime2"></div><div id="loadtime3"></div>
        </div>
</div>


div.loadtime1 {
	float: left;
	width: 33%;
}
div.loadtime2 {
	float: left;
	width: 34%;
}
div.loadtime3 {
	width: 33%;
}

Wobei container, irgendwas und footer eine Breitenangabe brauchen.
Pixel oder Prozent oder whatever...

Bub · 20. Feb. 2006

Hatte soweit geklappt.
Nur nochmal auf den erste Vorschlag zum ersten Problem einzugehen mit der mittigen Position:
Im Firefox geht er nur im M$ Internetexploer nicht. DA is das Ding ganz normal über die ganze Breite.
Der Ignoriert die max-width angaben.

Is das Problem bekannt?

Und gibt es jetzt schon ne public Beta von Internetexplorer 7, damit ich es auch dort mal testen kann.

Mfg Bub. Over and Out!

dkdenz · 20. Feb. 2006

max-width, max-height, min-width und max-height kann der IE nicht interpretieren.
Ob das IE7 kann, weiss ich nicht...

Bub · 20. Feb. 2006

Gibt es da einen alternativen Befehl oder suckt der Internet Explorer aml wieder nur?
Ich bekomme gleich ne Version vom neuen Internet Explorer und teste das gleich mal und poste das dann.

Mfg Bub. Over and Out!

dkdenz · 20. Feb. 2006

Bub schrieb:
Ich bekomme gleich ne Version vom neuen Internet Explorer und teste das gleich mal und poste das dann.

Das ist gut. Interessiert mich nämlich auch mal.

Bub · 20. Feb. 2006

So getestet. Sieht nocht so aus, als ob der max-width kennt.

Kann man nichts machen.
Dann muss ich wohl damit leben, dass des im Internetexplorer scheiße aussieht.

Egal.

Mfg Bub. Over and Out!

dkdenz · 20. Feb. 2006

Bub schrieb:
Dann muss ich wohl damit leben, dass des im Internetexplorer scheiße aussieht.

Nee, damit musst Du nicht leben.
Irgendwie werden wir das schon hinkriegen.
Ich bin mir jetzt nicht sicher, aber irgend etwas ähnliches hatten wir schon mal vor Kurzem hier.
Finde den Thread aber nicht.
Prinzipiell ist es ja so, das wenn ein Browser etwas nicht interpretieren kann,
versucht man das Problem durch Umstellung der Anweisungen zu umgehen.
Denn letztendlich geht alles, wenn auch etwas reduziert.
Deswegen wäre es wichtig, wenn Du mal genau das beschreiben würdest, was Du erreichen möchtest.

Bub · 21. Feb. 2006

ICh möchte eine schöne Dynamische Page erstellen!
DAs ist mein Grundsatz gewesen, jetzt zu den Einzelheiten.
Es ist sehr schwer das ganze zu erklären.
Dashlab poste ich mal den Code:

HTML:

<?php
$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$time1 = $mtime;
?>
<!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>System Control Suit 0.01</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
  <div class="header">Header/Logo/Schnickschnak</div>
  <div class="mainnavigation">Home | Users | Network | Servers | Printers | Settings | Logout</div>
  <div class="container">
    <div class="subnavigation">
      <div class="submenutop">Home</div>
      <ul class="submenu">
        <li>Users</li>
        <li>FAQ</li>
        <li>Settings</li>
      </ul>
    </div>
    <div class="mainframe">... Content ...</div>
    <div class="footer">
      <div class="version">System Control Suit 0.01 </div>
      <center>
        <div class="loadtime">Loadtime:
          <?php
$mtime = microtime();
$mtime = explode(" ",$mtime);
$mtime = $mtime[1] + $mtime[0];
$time2 = $mtime;
$loadtime = ($time2 - $time1);
$loadtime = round($loadtime, 4);
echo $loadtime;
?>
        </div>
      </center>
      <div class="referenzen"><img style="border:none;" src="images/xhtml10.gif" height="15" width="80"alt="Valid XHTML 1.0 Transitional"/> <img style="border:none;" src="images/css.gif" height="15" width="80" alt="Valid CSS 2"/></div>
    </div>
  </div>
</center>
</body>
</html>

Hier das CSS:

Code:

body {
	background-color: #B3B3B3;
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
}

div.header {
	position: absolute;
	left: 25px;
	right: 25px;
	top: 25px;
	height: 125px;
	max-width: 950px;
 	margin: 0px auto;
	text-align: left;
}

div.mainnavigation {
	position: absolute;
	top: 165px;
	left: 25px;
	right: 25px;
	height: 21px;
	max-width: 950px;
 	margin: 0px auto;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #5A5A5A;
	color: #FFFFFF;
	background-color: #275FA3;
	text-align: left;
}

div.container {
	position: absolute;
	left: 25px;
	right: 25px;
	top: 210px;
 	margin: 0px auto;
	margin-bottom: 25px;
	padding: 5px;
	text-align: left;
	max-width: 950px;
	background-color: #D9D9D9;
	border: 1px solid #5A5A5A;
}

div.subnavigation {
	float: left;
	width: 190px;
	padding: 5px;
	border: 1px solid #5A5A5A;
	background-color: #FFFFFF;
	text-align: left;
	min-height: 300px;
}

div.submenutop {
	background-color: #275FA3;
	height: 21px;
	border: 1px solid #5A5A5A;
	padding-left: 8px;
	color: #FFFFFF;
}

ul.submenu {
	list-style-type: none;
	margin-left: 5px;
	margin-top: 5px;
	padding-left: 5px;
	padding-top: 5px;
}

div.mainframe {
	margin-left: 210px;
	margin-right: 0px;
	padding: 5px;
	padding-top: 5px;
	border: 1px solid #5A5A5A;
	background-color: #FFFFFF;
	text-align: left;
}
div.footer {
	height: 21px;
	margin-top: 15px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	border: 1px solid #5A5A5A;
	background-color: #FFFFFF;
	text-align: left;
}

div.referenzen {
	float: right;
	right: 0px;
	margin-top: 2px;
	width: 33%;
	text-align: left;
}

div.loadtime {
	float: left;
	margin: 0px auto;
	width: 33%;
}

div.version {
	float: left;
	width: 33%;
}

Ich habe aber auch noch das Problem, dass die Mainnavigation nicht so breit ist, wie der Container DIV. Siehst du da auf Anhieb einen Fehler? Weil der is immer nur so breit, wie sein Inhalt.

Mfg Bub. Over and Out!

dkdenz · 21. Feb. 2006

Habe im Moment nicht die Zeit, das ausgiebig zu testen,
aber was mir auffällt, gebe ich mal zum Besten.
1.:
Wenn Du in Deiner css das schreibst:

Code:

img {
    border:0px;
}

brauchst Du das hier nicht mehr:

Code:

img style="border:none;"

2.:
Das Tag <center></center> kenne ich überhaupt nicht.

3.:
Wenn Du

Code:

div.header {
	position: absolute;
	left: 25px;
	right: 25px;
	top: 25px;
	height: 125px;
	max-width: 950px;
[B] 	margin: 0px auto;[/B]
	text-align: left;
}

benutzt, musst Du hier für den IE das machen:

Code:

body {
[B]        text-align:center;[/B]
	background-color: #B3B3B3;
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
}

Zudem ist es in meinen Augen falsch einen Inhalt zu 'centern',
wenn man absolut positioniert,
ausser Du schreibst (z.B.) links 20% mitte 60% und rechts 20%...

4.:
Nimm das max-width raus und schreibe einfach nur width.
Ausserdem kommen ja zu den 950px nochmals 50px von der absoluten Positionierung durch left, right dazu, das es 1000px sind.

5.:
Wenn Du mainnavigation ein width:100% mit gibst, müsste es wie gewünscht klappen.

Bub · 21. Feb. 2006

Der Center Tag dient dazu, ausgewählten Inhalt mit diesem Tag einfach zu centern.
Habe jetzt alles soweit um gesetzt, wie di gesagt hattest.
Schreibe morgen nochmal über weitere Probleme, falls welche Auftreten sollten.
Muss jetzt weg.
Cya

Mfg Bub. Over and Out!

Bub · 22. Feb. 2006

So Im Firefox sieht es gewohnt gut aus.
Leider kann ich mir das ganze noch nicht im Internet Explorer 6.0 anguggen jedoch sieht es im 7.0 sehr scheiße aus. Hier ein Screen:

So habe alle Änderungen wie gewünscht durchgeführt und es entspricht dem XHTML 1.0 Standart und das CSS ist Css 2.0.

Mfg Bub. Over and Out!

Edit: Ich habe dasganze jetzte auch im Internet Explorer testen können und musste feststellen, dass auch hier die Element nicht zentriert sind. Also leider hat der Trick nicht geholfen.
Kennt ihr noch ne andere Lösung?

DIV Ausrichtung

Bub

New member

dkdenz

New member

Bub

New member

Bub

New member

dkdenz

New member

Bub

New member

dkdenz

New member

Bub

New member

dkdenz

New member

Bub

New member

dkdenz

New member

Bub

New member

dkdenz

New member

Bub

New member

dkdenz

New member

Bub

New member

Bub

New member