3 spaltiges DIV, das mittlere soll eine flexible breite haben

Oregano · 23.04.09

weil sobald man da floatet isses im eimer.

BigR · 23.04.09

Oregano schrieb:
das klappt aber auch nur solange man in dieses div nicht auch wieder 3 divs packen will.
hier die baustelle meiner seite:

http://www.de-signed.com/test/sport/sdfjsfjsdfsfsf.html

das menü unten soll halt zentriert sein. vielleicht mach ich auch nen totalen denkfehler und muss ganz anders an die sache rangehen...

Es ist egal wie weit du die DIVs verschachtelst. Ich glaube eher, dass du etwas grundlegend falsch machst.

Ich hab mir dein Code auf deiner Seite nur flüchtig angekugt. Du benutzt anscheinend
position: absolute;. Logisch dass die Zentrierung nicht klappt, da du dadurch das DIV von den umliegenden Elementen unabhängig machst.

Ich schlage vor, dass du dich intensiver mit CSS beschäftigst bist du genau verstehst was du da eigentlich treibst. Es sieht so aus als würdest du im Trüben fischen ohne wirklich Ahnung zu haben.

Ich kann dir jetzt auch deine ganze Page umstricken so dass es funktioniert aber erstens hab ich weder die Zeit das "mal eben" zu machen und zweitens hast du dadurch nix gelernt.

Viel Erfolg beim CSS lernen.

sausehuhn · 24.04.09

Wenn du den unschönen Weg gehen willst: Nimm eine Tabelle. :-x

Oregano · 24.04.09

BigR schrieb:
Du benutzt anscheinend
position: absolute;. Logisch dass die Zentrierung nicht klappt, da du dadurch das DIV von den umliegenden Elementen unabhängig machst.

ja bei "relative" ist es aber das gleiche... oder wie meinen...
und naja ich muss den mist ja vertikal zentrieren, geht halt nicht ohne absolute... oder doch...

ich glaube das das was ich da vorhabe einfach nicht geht.

sausehuhn · 24.04.09

Das Problem ist, dass DIVs eine feste Größe haben müssen, um zentriert zu werden; was aber bei deinem Menü nicht der Fall sein kann.

Bei Tabellen kannst du einfach 3 Spalten anlegen, den äußeren Spalten jeweils 50% Breite geben, in die mittlere Spalte den Text platzieren und das ganze zentrieren indem du den Inhalt des Containers, in dem die Tabelle liegt, auf center setzt.
Mit Tabellen arbeitet man aber eigentlich ungerne; hier haben sie aber mehr Flexibilität so wie's ausschaut.

Wenn du das ganze mit DIVs lösen willst bleibt dir nichts anderes übrig als die Navigation zunächst aus dem Haupt-Container zu holen und dann an diesem auszurichten, falls du die komplette Navi aus Bildern machen willst. Dann könnte das hier nahe an einer Lösung liegen:

Code:

<html>
<head>

<style type="text/css">

body {
    margin-top: 0px;
}

#inhalt {
    position:relative;
    top:0;
    width:946px;
    height:auto;
    z-index:2;
    text-align:center;
    margin:0 auto;
    background:#CCCCCC;
    margin:auto;
}

#menu {
    position:relative;
    width:auto;
}


-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>


<div id="inhalt">
    
    HIER STEHT DER INHALT DER SEITE

</div>


<div align="center" id="menu">

    <img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0">
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0">

</div>


</body>
</html>

Keine Ahnung ob's der beste Weg ist; ich bin selbst nicht der Meister was HTML angeht. Aber vielleicht geht's ja schon mal in eine richtige Richtung. Ggf. kann man auch einen Container zentrieren und andere DIVs dann an diesem ausrichten; DIVs, in die du dann die Links reinpacken kannst.

Falls du die Lösung von da oben nutzt, solltest du aber auf Textlinks verzichten, da die Bilder über align bzw text-align zentriert werden und Text zwischen den Bildern ziemlich bescheiden ausschaut, da er vertikal nie mittig mit den Bildern platziert werden kann und eine Hintergrundfarbe auch nicht definierbar ist, da sie sich über den kompletten Container erstrecken würde.

Vielleicht konnte ich ja helfen

DubiDuh · 24.04.09

[wrong here]

Bajuware · 24.04.09

<div id="links"></div>
<div id="rechts"></div>
<div id="mitte"></div>

#links
width: 145px; float:left;
#rechts
width: 145px; float:right
#mitte
margin: 0;

100% Layouts sind auf diese Weise eh fürs Klo ... Niemand liest so lange Zeilen, die Monitore werden immer größer - bei 1920x1280, rechne dir mal aus, da hab ich 5 Absätze und es ließt sich doppelt so schnell, wie ein Satz bei dir.

Oregano · 24.04.09

Bajuware schrieb:
<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div>

#links
width: 145px;
#rechts
width: 145px;
#mitte
margin: 0 145px;

100% Layouts sind auf diese Weise eh fürs Klo ... Niemand ließt so lange Zeilen, die Monitore werden immer größer - bei 1920 in der h-Achse, rechne dir mal aus, da hab ich 5 Absätze und es ließt sich doppelt so schnell, wie ein Satz bei dir.

wie bitte??? :-D

gKar · 24.04.09

Bajuware schrieb:
100% Layouts sind auf diese Weise eh fürs Klo ... Niemand ließt so lange Zeilen, die Monitore werden immer größer - bei 1920 in der h-Achse, rechne dir mal aus, da hab ich 5 Absätze und es ließt sich doppelt so schnell, wie ein Satz bei dir.

Ich „leße“ auch keine so langen Zeilen. Vor allem liest sich „ließt“ wirklich nicht gut

Dennoch erwarte ich normalerweise, dass ein Weblayout das Fenster ausfüllt. Auf einem 24"er habe ich dann eben das Browser-Fenster nicht auf maximale Bildschirmbreite gestellt, sondern stelle es so breit ein, wie ich will. Da soll mich kein Webdesigner bevormunden und unnütze Seitenränder im Fenster einbauen—wozu auch?
(Diese feste Breite finde ich übrigens auch bei Apfeltalk irgendwie nicht so toll, warum passt sich das Layout nicht an die Fensterbreite an? Dann könnte ich die Breite selbst bestimmen.)

gKar · 24.04.09

Oregano schrieb:
na da sollen die runden ecken rein.

Für die runden Ecken benutze ich keine DIVs.
Bei mir sieht das z.B. in etwa so aus:

Code:

<div id="pagemenu" class="box">
<div class="boxarea">
<div class="header">
<img class="EckeLO" style="display: none" alt="" src="./images/eckeLOW.png">
<img class="EckeRO" style="display: none" alt="" src="./images/eckeROW.png">
<p>Titelzeile</p>
</div>
*** Inhalt (Menüpunkte) ***
<div class="footer">
<img class="EckeLU" style="display: none" alt="" src="./images/eckeLUW.png">
<img class="EckeRU" style="display: none" alt="" src="./images/eckeRUW.png">
</div>
</div>

Code:

.box {
    margin:25px 0 0 0;
    padding:0;
    position:relative;
    overflow:visible;
}

#pagemenu {
    float:left;
    position:fixed;
    left:1em;
    width:12%;
    min-width:100px;
    top:55px;
    font-size:0.8em;
    font-family:Arial,Helvetica,sans-serif;
    color:#fff;
    padding:0px;
    margin:0px;
    z-index:2
}

#pagemenu .boxarea {background-color: #334;}

.box p {
    margin: 0px 10px;
}

.box .footer {
    position:relative;
    bottom:0; 
    padding-top:10px;
}

.box .EckeLO {
    position:absolute;
    left:0px; top:0px; padding:0px;
	display: block !important;
}
.box .EckeRO {
    position:absolute; 
    right:0px; top:0px; padding:0px;
	display: block !important;
}

.box .EckeLU {
    position:absolute;
    left:0px; padding:0px; bottom:0px;
	display: block !important;
}
.box .EckeRU {
    position:absolute; 
    right:0px; padding:0px; bottom:0px;
	display: block !important;
}

Nur ein paar Auszüge, das #pagemenu ist auch nicht zentriert, sondern floatet eben links auf der Seite, während der Content in einem zweiten DIV rechts floatet.
Aber wie ich die Ecken drin unterbringe ohne das Menü in Spalten zu unterteilen, sollte daran erkennbar sein.

Bajuware · 24.04.09

gKar schrieb:
Ich „leße“ auch keine so langen Zeilen. Vor allem liest sich „ließt“ wirklich nicht gut

Bier!
Jede Seite sollte begrenzt werden - das nur mal nebenzu, es geht hierbei auch um den Inhalt - nicht um das Layout.

Hier ein funktionierendes Beispiel meines oben angeführten snippets

Code:

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

<style>
#mitte {  width:  100%; height: 600px; margin: 0; background: red; }
#rechts { float: right; width: 145px; height: 600px; background: green; }
#links { float: left; width: 145px; height: 600px; background: green; } </style>
</head>
<body>
<html>

<!-- Links -->
<div id="links">
    <h1>Irgendwas</h1>
    <p>Deine Module, Navigation oder sonstwas</p></div>
<!-- Rechts -->
<div id="rechts">
    <h1>Irgendwas</h1>
    <p>Deine Module, Navigation oder sonstwas</p></div>
<!-- Inhalt -->
<div id="mitte">
    <h1>Deine Überschrift</h1>
    <p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
    <p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p></div>

</html></body>

Ach ja, clearen nicht vergessen. Wenn du Header und footer willst, pack dir nen Wrapper um die 3 Divs.

Oregano schrieb:
wie bitte??? :-D

Jap, hast nicht verstanden, gell ...

Oregano · 24.04.09

Bajuware schrieb:
Jap, hast nicht verstanden, gell ...

danke für die mühe aber du hast auch nicht ganz verstanden was ich will. das was du mir da zeigst is mir schon klar, ganz so blöd bin ich dann auch nicht

vielleicht drücke ich mich falsch aus, aber eigentlich müssten meine zeichnungen (seite 1 dieses threads) das ganz gut auf den punkt bringen... naja egal.

sausehuhn · 24.04.09

Hast du dir meine Lösung eigentlich mal angeschaut? Die sollte doch deine Probleme lösen? o_O

EDIT:
Hab noch eben einen Fehler korrigiert:

Code:

<html>
<head>

<style type="text/css">

body {
    margin-top: 0px;
}

#inhalt {
    position:relative;
    top:0;
    width:946px;
    height:auto;
    z-index:2;
    text-align:center;
    margin:0 auto;
    background:#CCCCCC;
    margin:auto;
}

#menu {
    position:relative;
    width:946px;
    text-align:center;
    margin:auto;
}


-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>


<div id="inhalt">
    
    HIER STEHT DER INHALT DER SEITE

</div>


<div id="menu">

    <img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0">
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <a href="http://www.apfeltalk.de/" target="_blank"><img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0"></a>
    <img src="http://www.apfeltalk.de/forum/image.php?u=73836&dateline=1235131533.jpg" width="50" height="50" border="0">

</div>


</body>
</html>

Oregano · 24.04.09

sausehuhn schrieb:
Hast du dir meine Lösung eigentlich mal angeschaut? Die sollte doch deine Probleme lösen?

kurz angesehen, ja ich glaube du hast es... bin aber grad im vollstress, werde mir das heut abend mal zur brust nehmen

Bajuware · 24.04.09

Ich versteh zwar deine Zeichnung, allerdings glaube ich das du die Beispiele nicht verstehst. Du kannst um meinen Code einen wrapper packen, diesen auf: margin: 0 auto; setzten, damit werden die 3 Container zentriert. Sofern der Inhalt in der Mitte wächst, breiten Sie sich von der Mitte nach außen hin aus.

Das sind alles Snippets, niemand wird dir dein Grundkonstrukt fertig vorlegen.
Aber nun gut ...

Oregano · 24.04.09

Bajuware schrieb:
Ich versteh zwar deine Zeichnung, allerdings glaube ich das du die Beispiele nicht verstehst. Du kannst um meinen Code einen wrapper packen, diesen auf: margin: 0 auto; setzten, damit werden die 3 Container zentriert.

NEIN. Mit DIVs geht das nicht, nur mit inline-Elementen wie z.B. SPAN. Versuchs doch...

sobald du 2 DIVs nebeneinander hast werden die irgendwie linksradikal... da kannst du margin auto und align center machen bis der arzt kommt.

Bajuware schrieb:
Das sind alles Snippets, niemand wird dir dein Grundkonstrukt fertig vorlegen. Aber nun gut ...

Hab ich nicht verlangt.

Ganz so blöd bin ich nicht ich hab schon mehrere Seiten mit MODX realisiert und die laufen in allen Browsern 100%ig. Ich mein es kann sein das ich blöd bin aber am Ende hab ich immer ein nett aussehendes, in allen Browsern funktionierendes Ergebnis gehabt. Und so schwer ist CSS nicht, es gibt nur ein paar Fallgruben und in ein paar von denen haben wir alle mal gesessen und und an der Wand gekratzt da bin ich mir sicher :-* ...

Oregano · 26.04.09

sausehuhn schrieb:
Wenn du den unschönen Weg gehen willst: Nimm eine Tabelle. :-x

ja und genau so hab ichs jetzt gemacht:
http://www.de-signed.com/test/sport/FINAL.html
läuft einwandfrei in allen windows-browsern (hab zuhause leider kein Mac, aber ich denke das muss auch aufm mac so laufen). klar is ne tabelle (evil), aber anders lässt es sich in dem fall nicht lösen wegen dem pfeil der über dem menü rausragt, das geht nunmal schlecht mit nem inline-element und man kann nunmal nicht 3 DIVs nebeneinander mittig zentriert aufbauen so das das mittlere die beiden äußeren nach außen drückt, aber mit ner tabelle geht das super. und dem user isses sowieso egal obs ne tabelle is oder ein DIV, und da das keine dynamische seite wird: drauf gesch**** :innocent:

.
also sausehuhn war glaub ich der einzige der gerafft hat was ich wollte, danke nochmal :-D.

3 spaltiges DIV, das mittlere soll eine flexible breite haben

Bismarckapfel

Gloster

Lambertine

Bismarckapfel

Lambertine

Zwiebelapfel

Apfel der Erkenntnis

Bismarckapfel

Maunzenapfel

Maunzenapfel

Apfel der Erkenntnis

Bismarckapfel

Lambertine

Bismarckapfel

Apfel der Erkenntnis

Bismarckapfel

Bismarckapfel

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)