[Slayer]

Hallo zusammen.

Derzeit habe ich den Aufbau meiner Seite immer im HTML & CSS mit Tabellen und Klassen (class) gemacht.

Hier im Forum hat mich aber jemand (*Danke noch mal an Graumagier*) darauf hingewiesen, dass die richtige Anwendung von HTML mit DIV's gemacht wird.
Also habe ich meinen Grundbau mal probiert und mit der Kombination aus

<div id="bla">...</div>

und im CSS mit

div#bla { ... }

klappt das auch ganz bequem, viel bequemer als mit Tabellen.

Und zwar arbeite ich an folgendem Layout:
Klick mich! Ich bin ein Link

Jetzt habe ich aber ein Problem. Ich will praktisch 3 Kästen (in DIV's wie bei Tabellen) nebeneinander machen. So wie in dem Layout (Link oben).
Die linke soll 18%, die mittlere soll 64% und die rechte soll 18% Weite haben (es soll ein Menü werden mit einer linken und rechten Navigation sowie in der Mitte das Hauptfenster).
Irgendwie klappt das aber nicht ganz, ich habe auch schon mehrere "position"s ausprobiert. Sie wollen einfach nicht schön nebeneinander sein (wie mit Tabellen).
Sie sollen immer je nach Fenstergröße angepasst werden und so aussehen wie bei meinem Layoutbeispiel.

Ich wäre euch sehr dankbar, wenn ihr mir helfen und erklären würdet, wie ich das richtig anwende.
Ich habe nämlich bisher immer nur mit Tabellen gearbeitet und kenne mich mit den DIV's noch nicht so aus.

Also danke schon mal im Voraus.
Grüße,
Adi.

[flo]

Also der link, so willst du es haben oder?

und wo genau liegt dein Problem?

kannste mal nen screenschot machen, damit wir das Prob sehen können


also 18, 64 ,18 ist nicht so toll, bei relativen werten sollte man immer ein bischen spielraum lassen

als 17 ,64, 17 wäre besser!

hast du margin: 0; und padding: 0; gesetzt?

Dieser Beitrag wurde von Flo01 bearbeitet: 26. Februar 2005 - 13:13

[Slayer]

Also ich habe es mal so gemacht im HTML/PHP:

<!-- HEADER START -->
          <div id="header">

               <? include 'template/header.php'; ?>

          </div>
<!-- HEADER END -->

<br><br>

<!-- LEFTBAR START -->
          <div id="leftbar">

               <? include 'template/leftbar.php'; ?>

          </div>
<!-- LEFTBAR END -->

<!-- MAINPAGE START -->
          <div id="mainpage">

               <?
               }
               function seite()
               {
               ?>

          </div>
<!-- MAINPAGE END -->

<!-- RIGHTBAR START -->
          <div id="rightbar">

               <? include 'template/rightbar.php'; ?>

          </div>
<!-- RIGHTBAR END -->

Das ist nicht der vollständige Code, nur ein Auszug und es geht ja nur um die DIV's.

So nun der Auszug aus der CSS-Datei:

div#header
{
	border:1px solid #000000;
	position:static;
	padding:5px;
	margin:10px;
}

div#leftbar
{
	border:1px solid #000000;
	position:absolute;
	padding:0px;
	margin:2px;
	left:2%;
	width:18%;
	height:70%;
}

div#mainpage
{
	border:1px solid #000000;
	position:absolute;
	padding:0px;
	margin:2px;
	left:20%;
	width:60%;
	height:70%;
}

div#rightbar
{
	border:1px solid #000000;
	position:absolute;
	padding:0px;
	margin:2px;
	right:0%;
	left:80%;
	width:18%;
	height:70%;
}

So und im FF wird das Ganze einigermaßen gut angezeigt, aber im IE sieht es dann so aus:

Zum Screenshot

Wo ist nun das Problem, warum so verschoben?
Kann mir niemand mal einfach schreiben, wie ihr es machen würdet, wenn ich 3 Kästen so nebeneinander haben will?

Danke schon mal im Voraus!

[flo]

hm also der IE hält sich nicht wirklich an die CSS 2 spezifikation, also nicht wundern wenn es da anders aussieht


und du mußt nicht div#xxxx schreiben sondern #xxxxx

Dieser Beitrag wurde von Flo01 bearbeitet: 26. Februar 2005 - 13:36

[Slayer]

@Flo01
Ich weiß, dass ich auch #bla schreiben kann, aber ich benutze auch SPAN's und dann ist es mi div#bla übersichtlicher.

Aber warum bekomme ich es jetzt nicht richtig hin, weil im IE soll es auch richtig angezeigt werden...?!?

[flo]

du meinst den unterschiedlichen abstand zwischen links-mitte
und mitte-rechts?

da mußt du mit den % werten ein bischen spielen, dan bekommst du das schon hin

[Slayer]

Zitat (Flo01: 26.02.2005, 13:39)

du meinst den unterschiedlichen abstand zwischen links-mitte
und mitte-rechts?

da mußt du mit den % werten ein bischen spielen, dan bekommst du das schon hin
<{POST_SNAPBACK}>

Na gut, ich probiere es mal.
Aber habe ich das mit dem left und right richtig gemacht so?
Und wie muss die position sein, wenn ich mehrere kästen nebeneinander machen will?

[flo]

ansich ja

Zitat

div#mainpage
{
border:1px solid #000000;
position:absolute;
padding:0px;
margin:2px;
left:20%;
width:60%;
height:70%;
}

versuch mal das width:60%; wegzulassen

[immerreggen]

ich bin nicht der profi, aber für mich fehlt da ein wert "top:xx%" und ich weiß daß css manchmal pingelig sein kann ....
kanna uch sein daß ich da komplett falsch liege, aber ein versuch wärs ja wert

[Floele]

Man kann das ganze auch etwas geschickter ohne position:absolute anstellen, nimm das mal als Denkanstoß:

div.content {
border:dashed 3px #8D9719;
margin:0 227px 0 14em;
}

div.menu {
float:left;
width:12.5em;
}

div.rightcol {
border:dashed 3px #8D9719;
float:right;
width:180px;
}

Wichtig ist dabei, dass im HTML-Code zuerst das Menü, dann die rechte Spalte und dann die mittlere kommt. Kannst dir auch das ganze Design angucken:
http://cdbxpp.gosdat...ht.de/index.htm

[Slayer]

Geil @Floele genau so will ich es haben.
Beim div.content was bewirkt da "227px" und "0 14em"?
Für was steht das 0 14 em? Ich denke die 227px ist die width-Größe, oder?
Und was bedeutet bei div.menu das "width:12.5em"..? Ich schätze mal, dass es eine Maßeinheit ist...
Wäre nett, wenn du es mir erklärst. Ich probiere es nachher gleich mal aus das schaut ja mal super aus. Ist das ganze denn auch %-fähig bzw. passt es sich mit dem float an den Browser an?

[Floele]

Zitat (Corey: 28.02.2005, 14:09)

Geil @Floele genau so will ich es haben.

Dacht' ich's mir doch

Zitat

Beim div.content was bewirkt da  "227px" und "0 14em"?

Man kann für margin ein bis vier Werte angeben:
margin:10px; - alle Ränder 10px breit
margin:10px 20px; - Ränder oben und unten 10px; rechts und links 20px;
margin:10px 20px 30px; - Rand oben 10px, links+rechts 20px und unten 30px;
margin:10px 20px 30px 40px; Reihenfolge: Oben,rechts,unten,links

margin: 0 10px; heißt also oben und unten kein Abstand, rechts und links 10px.

Zitat

Für was steht das 0 14 em? Ich denke die 227px ist die width-Größe, oder?

"em" ist die relative M Höhe...also in dem Fall 14 mal die Höhe des M's. Vorteil dabei ist, dass sich die Abstände abhängig von der Schriftgröße verändern (praktisch für Leute die größere Schrifteinstellungen bevorzugen).

Zitat

Und was bedeutet bei div.menu das "width:12.5em"..? Ich schätze mal, dass es eine Maßeinheit ist...

Ist denke ich jetzt geklärt

Zitat

Ist das ganze denn auch %-fähig bzw. passt es sich mit dem float an den Browser an?

Hm, ich hab's mit Prozenten noch nicht ausprobiert, würde aber eher davon abraten %e für Breiten etc. zu benutzen. "em" ist ja schließlich schon relativ. Anpassen tut sich diese Methode eigentlich perfekt - im Gegensatz zu %-Angaben hat man aber für bestimmte Elemente eine sinnvolle Mindestbreite.

[Slayer]

Danke @Floele

Ich denke, dass ich es einigermaßen verstanden habe und teste es später gleich mal intensiv. Werde mich garantiert nochmals melden

[Slayer]

Hello again.

Diesen Beitrag habe ich mit viel Sorgfalt verfasst und ich brauche eure Hilfe. Ihr kennt euch aus und ih könnt meinen Horizont erweitern Außerdem hilft dieses Thema vielleicht auch anderen Usern (hoffe ich). Also ich wäre euch sehr dankbar, wenn ihr euch kurz Zeit nehmt und mir bei meinem HTML und CSS Problem helft. DANKE schon mal vorweg!

Ich habe mich jetzt mal heute Mittag hingesetzt und das ganze ausprobiert.
Um ehrlich zu sein: Die Variante hat nicht so funktioniert, wie ich es wollte.
Deswegen habe ich eine Weile herumprobiert und bin dann nach einer Weile auf ein gutes Ergebnis gestoßen.

Ich habe es nun hinbekommen, dass mein Template (bzw. ein Design mit mehreren Tabellen/Zellen nebeneinander) nun mit DIVs aussieht wie mit Tabellen.
Zumindest fast...
Ich bin noch nicht fertig, aber soweit bin ich schon.

Das Ganze sieht nun so aus:

DER BODY-BEREICH DER DESIGN-DATEI (HTML):

<!-- HEADER START -->
          <div class="header">

               <? include 'template/header.php'; ?>

          </div>
<!-- HEADER END -->


<!-- LEFTBAR START -->
          <div class="leftbar">

               <? include 'template/leftbar.php'; ?>

          </div>
<!-- LEFTBAR END -->

<!-- RIGHTBAR START -->
          <div class="rightbar">

               <? include 'template/rightbar.php'; ?>

          </div>
<!-- RIGHTBAR END -->

<!-- MAINPAGE START -->
          <div class="mainpage">

               <?
               # Hier befindet sich der Hauptinhalt
               ?>

          </div>
<!-- MAINPAGE END -->

<!-- FOOTER START -->
          <div class="footer">

               <? include 'template/footer.php'; ?>

          </div>
<!-- FOOTER END -->

NUN DER CSS-BEREICH FÜR DIESE CONTAINER (CSS):

div.header
{
	height:;
    margin:10px 2% 10px 2%;
    border:1px solid #000000;
	padding:10px;

    background-color:#FFFFFF;
	text-align:center;
	font-size:7pt;
	font-weight:normal;
}

div.leftbar
{
  float:left;
	width:16%;
	height:60%;
    margin:10px 2% 10px 2%;
    border:1px solid #000000;
	padding:10px;

    background-color:#FFFFFF;
	text-align:left;
	font-size:7pt;
	font-weight:bold;
}

div.rightbar
{
  float:right;
	width:16%;
	height:60%;
	margin:10px 2% 10px 0%;
    border:1px solid #000000;
	padding:10px;

    background-color:#FFFFFF;
	text-align:center;
	font-size:7pt;
	font-weight:normal;
}

div.mainpage
{
    height:60%;
	margin:20px 22% 20px 22%;
	background-color:#FFFFFF;
	border:1px solid #000000;
	padding:10px;

    background-color:#FFFFFF;
	text-align:center;
	font-size:8pt;
	font-weight:normal;
}

div.footer
{
	height:;
    margin:10px 2% 10px 2%;
    border:1px solid #000000;
	padding:10px;

    background-color:#FFFFFF;
	text-align:center;
	font-size:7pt;
	font-weight:normal;
}

Es wirkt vielleicht ein wenig kompliziert, ist es aber gar nicht.
mit den "margins" bestimme ich jedes Mal den Abstand von links, rechts, oben, unten.
Die "margin" von div.mainpage ist am Wichtigsten, hier wird bestimmt, wo genau die Hauptseite ist.
Ich habe alles in Prozent (%) gemacht, damit die Seite komplett anpassbar an jeden Browser ist.

Ich habe also links einen Abstand von 2%, dann kommt eine Breite von 16%. Weil ich aber nach der linken Bar (Menu) auch noch ein wenig Abstand bis zur Hauptseite haben will, muss ich nochmals 2% dazurechnen. Dann muss ich praktisch bei div.mainpage für das "margin" links einen abstand von 20% lassen. So funktioniert das Ganze auch bei der rechten Bar (rechtes Menu).

Ich habe nun mehrere Probleme, bei denen ich noch dringend Hilfe brauche:
- 1) Beim Internetexplorer wird das Design falsch angezeigt. Die mittlere Hauptseite befindet sich nicht zwischen der linken und der rechten Bar (Menus), sondern ist direkt darunter (aber in der Mitte). Beim Firefox funktioniert es wunderbar. An was kann dies liegen und wie kann ich dieses Problem beheben? Schaut euch die Seite doch einfach mal mit dem FF und dann mit dem IE an (Link: Klick). Wie kann ich das beheben bzw. was ist das PRoblem in meinem Code?

- 2) Ich will noch oberhalb und unterhalb von jedem Container einen Balken machen (eine Grafik, die 4px hoch ist). Das Ganze soll so aussehen, wie bei meinem Template mit Tabellen (Link: Klick). Aber es geht nicht, wegen den Abständen ("margins"). Wie könnte ich das Ganze nun so ähnlich hinbekommen? Die Balken sind mir sehr wichtig!

- 3) Ich will eine "Infobar" in die "mainpage" (Hauptseite für den Hauptinhalt) mit einbauen. Diese soll sich ganz oben befinden und sie zeigt die Uhrzeit und ein Willkommen an. Das Ganze soll so aussehen (Link: Klick). Aber bei meiner Container-Fassung mit DIVs sieht es so aus (Link: Klick). Wie kann ich das ganz oben auch wie mit meinen Tabellen andocken, ohne dass es die "margins" (Abstände) des Hauptcontainers nimmt? Gibt es da nicht irgendeine Möglichkeit?

- 4) Wie kann ich bei DIV-Containern ein "valign:center" erreichen? Bei Tabellen macht er standardmäßig den Inhalt immer zentriert. Wenn ich dann "valign:top" mache bei Tabellen, dann ist der Text immer oben, so wie bei den DIVs. Wenn ich jetzt aber den Inhalt nicht nach oben haben will, sondern dass er auch in der Mitte ist, wie mache ich das dann? Wenn ich eine Höhe (weight) angebe, dann bleibt unten immer ein Abstand, anstatt dass der Inhalt genau in der Mitte ist. Gibt es mit DIVs da auch Möglichkeiten, das Ergebnis zu erreichen?

- 5) Ein großes Problem: Bei Tabellen kann ich eine Höhe mit "height:xx%" angeben. Wenn mehr Inhalt ist, so dass die Tabelle größer als xx% wäre und sich strecken müsste, dann tut sie das ohne Probleme. Wenn man nämlich von Anfang an eine bestimmte Höhe haben will, aber nu wenig Inhalt, dann passt es. Wenn dann mehr Inhalt kommt, dann passt es sich an und wird trotz dem xx% automatisch größer. Bei DIVs ist das nicht der Fall. Die Container sind stur so groß wie man sie angibt. Eigentlich ist das ja auch richtig so, aber ich will es eben oft nicht so. Wie bekomme ich das hin, dass ich zwar eine Höhe angebe, aber sobald der Inhalt den Container verlässt, dass er sich dann automatisch zerrt und anpasst?

So, ich denke, dass es nun mal alle Pobleme vorweg waren. Wenn ich diese Probleme hin bekomme, dann bin ich glücklich. Es sind ja keine allzu große Schwierigkeiten, das müsste doch teilweise machbar sein.

Ich danke euch wirklich total, wenn ihr mir irgendwie helfen könnt. Ihr könnt mich persönlich anschreiben (Adressen -icq mail usw.- stehen in meinem Profil). Aber am Liebsten wäre mir eine ausführliche Erklärung hier im Forum.
Denn wen ich diese Probleme geklärt habe, dann kann ich endlich auch mit Containern arbeiten.

Dann bin ich mal auf eure Antworten gespannt und ich freue mich drauf.

Grüße,
Adi.

[Floele]

Oje, also ich fang mal langsam an:

Zitat

- 2) Ich will noch oberhalb und unterhalb von jedem Container einen Balken machen (eine Grafik, die 4px hoch ist). Das Ganze soll so aussehen, wie bei meinem Template mit Tabellen (Link: Klick). Aber es geht nicht, wegen den Abständen ("margins"). Wie könnte ich das Ganze nun so ähnlich hinbekommen? Die Balken sind mir sehr wichtig!

Du könntest es zum Beispiel so machen:

<div id="mainpage">
<div class="balkenoben"></div>

<div class="inner">

Hier der Text etc hin!

</div>

<div class="balkenunten"></div>
</div>

und dann

div.inner {
padding:10px;
}

div.balkenoben {
background:url(balkenoben.png) white repeat-x;
height:10px;
}

div.balkenunten {
background:url(balkenunten.png) white repeat-x;
height:10px;
}

Die anderen Probleme guck ich mir noch an