• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mehrere DIC-Container ineinander und in gleicher Höhe mit floating?

Otto der Planlose

Neues Mitglied
Hallo zusammen,

ich versuche eine "Text-Gruppe" so darzustellen, dass auf der linken Seite 2-3 (unterschiedliche) Zeilen stehen, und auf der rechten Seite nur eine Zeile. Nach Möglichkeit sollte diese vertikal mittig sein. :)

Leider habe meine Bücher zu dem Thema vor einigen Jahren verliehen und nicht wieder bekommen, und im Netz steht nicht das was ich suche.



Anbei mal das vereinfachte Beispiel:
auf der rechten Seite brauche ich das Feld mit einer bestimmten Breite. Ob ich das nun vor, oder hinter dem linken DIV-Container packe, ist mit mittlerweile egal. (Float links/rechts)
Allerdings ist der rechte Bereich nur eine Zeile hoch und ordnet sich damit genauso vertikal an, wie die erste Zeile links.

Wie bekomme ich das verfluchte Teil vertikal mittig??

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Müller">
<meta name="editor" content="html-editor phase 5">




<style type="text/css">
.gruppe {
         background-color: #0c0908;
         border: 0px;
         vertical-align:center;
         border-radius: 25px 100px 100px 25px;
         padding: 5px;
         margin-bottom: 10px;
         overflow: hidden;
}
.links {
/*        float: left;
         width: 75%;*/
}
.links div#name {
         color: #FFFFFF;
         font-size: 1.2em;
         text-align: left;
}
.links div#details {
         color: #FFFFFF;
         font-size: 1em;
         text-align: left;
}
.rechts {
   /*      width: 25%;*/
         float: right;
       vertical-align: middle;
         color: #FFFFFF;
         font-size: 1.2em;
         white-space: nowrap;
}


</style>




</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


                                                          <div class="gruppe">
                                                                 <div class="rechts">kein Umbruch</div>
                                                                 <div class="links">
                                                                         <div id="name">Das Beispiel</div>
                                                                         <div id="details">mit dem Text da drunter</div>
                                                                 </div>

                                                          </div>
                                                          <div class="clear"> </div>


</body>
</html>
 
Werbung:
Hallo,

Leider habe meine Bücher zu dem Thema vor einigen Jahren verliehen und nicht wieder bekommen

Sei froh, dann musst du sie nicht selbst entsorgen. Du solltest mal etwas Kohle in ein aktuelles Werk investieren. Neue Seiten sollten nur noch mit HTML5 erstellt werden.

Zudem ist dein zur Verfügung gestellter Quelltext für Hilfswillige durch die vielen nicht nachvollziehbaren Abstände und Einrückungen nur schwierig zu lesen.

Ich würde dein Vorhaben mit

Code:
display: table-cell;

lösen. Dann ist auch kein float erforderlich.

Ich habe mal zwei Beispiele erstellt. Das flexible Verhalten und die Unterschiede sieht man, wenn die Fensterbreite schmaler gezogen wird.

Abstände, Farben und ähnliches sind leicht anpassbar. Außerdem lässt sich natürlich auch ein Responsive Design integrieren. Da der konkrete Inhalt nicht bekannt ist, habe ich das aber weggelassen.

Der Quelltext enthält alle Angaben, also auch die css-Anweisungen.

Erst mal ein Beispiel, bei dem jede Textseite 50% des verfügbaren Platzes zur Verfügung hat:

http://foreninfo.bplaced.net/seiten...to_der_planlose_02_vertikale_ausrichtung.html

Und dann ein Beispiel, bei dem die linke Textseite 75% und die rechte passend 25% zur Verfügung hat:

http://foreninfo.bplaced.net/seiten...to_der_planlose_03_vertikale_ausrichtung.html

Gruss

MrMurphy
 
Hallo,

das mit dem entsorgen ist sicherlich richtig, aber mir fehlt ehrlich gesagt die Zeit, sich komplett neu in die Materie einzuarbeiten. Zudem scheint eine eindeutige Marschrichtung auch noch nicht festzustehen, was den Quellcode angeht.
"<section>" habe ich bis heute noch nie gesehen ^^
Zig verschiedene Idee und Lösungen für etliche unterschiedliche Anwendungen.

Aber ich denke mal, dass Du es schon richtig vermutet hast, das ganze zielt so ein bisschen in Responsive Design.
Die bestehende Seite ist nicht smartphone-tauglich. Also war die ursprüngliche Idee, was neues auf zusetzten. Das Ergebnis waren zig verschiedene Lösungen, und zig verschiedene Vorschläge.
Eine brauchbare themplate-Vorlage gab es im Netz nicht. Irgendwo (link suche ich nacher mal raus) haben wir dann brauchbare Vorlagen gefunden, auf die wir aufbauen wollten. Diese basieren aber auf einem Script, dass den PC-User auf eine andere Seite schickt als den Smartphone-User. Also haben wir uns damit angefreundet, nur die Smartphone-Seite zu überarbeiten.

Und daher entspringt der Code....

Der von dir gepostete Code ist genial! Besten Dank schon mal dafür!
Gibt es vielleicht eine Möglichkeit, die Breitenverteilungen variabel zu gestalten, so dass das Feld rechts nur so breit ist, wie der Text lang ist?


Gruß
 
Werbung:
Hallo

Zudem scheint eine eindeutige Marschrichtung auch noch nicht festzustehen

Doch, die steht fest: HTML5 und CSS3. Damit können auch alle mobilen Geräte (Tablets, Smartphones) umgehen. Im Endeffekt ist es natürlich deine Entscheidung, wie du deine Seiten erstellst. Bloß du darfst dann halt weder erwarten, das seine Seite auf aktuellen Geräten wie gewünscht angezeigt wird noch das du für deine Seiten / deinen Quellcode Lob erhalten wirst.

Gibt es vielleicht eine Möglichkeit, die Breitenverteilungen variabel zu gestalten, so dass das Feld rechts nur so breit ist, wie der Text lang ist?

Ja, du musst nur dem rechten Textfeld eine feste Breite zuweisen, zum Beispiel in Pixel.

http://foreninfo.bplaced.net/seiten...to_der_planlose_04_vertikale_ausrichtung.html

Gruss

MrMurphy
 
Es gibt diverse Templates für responsive Webseiten, die vom Browser zum Smartphone skalieren. Bootstrap und Foundation zum Beispiel.

Okay, auf Foundation bin ich während der suche auch gestoßen, allerdings habe ich die Seite nciht verstanden.:rolleyes:
Ich war schon froh, dass ich "responsive" als Schlagwort gelernt hatte, für "moderne" Seiten, aber da sind die noch mit "font-end framework" um die Ecke gekommen und hatten "nur" einen Download. Das war mir dann schon alles wieder nicht geheur...:p

Ich hatte mir daher folgendes als vorlage raus gesucht:
http://w3layouts.com/feedlive-blogging-mobile-website-template
Allerdings scheint das so ein "gefälschtes" Layout zu sein, da jedes Endgerät über ein Script ein eigenes Layout zugewiesen bekommt.



Doch, die steht fest: HTML5 und CSS3

Okay, in einigen Berichten habe ich gelesen, kein Gerät will die Attribute "Handheld" haben und I-Phone würde auch sein eigenes Ding drehen, etc..
Nun gut, dann weiß ich ja, wo ich derzeit dran bin :)



Ja, du musst nur dem rechten Textfeld eine feste Breite zuweisen, zum Beispiel in Pixel.

Nun ja, eine feste Breite wollte ich wohl umgehen, da verschiedene Endgeräte die Schriftgröße unterschiedliche darstellen, der Zeichensatz rechts schon mal variieren kann und halt kein Zeilenumbruch stattfinden sollte.
Deswegen war "float" eigentlich schon nicht schlecht :)


Gruß
 
Werbung:
Hallo,

warum bist du so verrückt nach float? Das funktioniert nicht, da die zwei benötigten Elemente nicht aufeinander reagieren können.

Um einen Zeilenumbruch zu verhindern kannst du entweder auf geschützte Leerzeichen oder auf die css-Anweisung "white-space: nowrap;" zurückgreifen. Ich habe mal eine Datei mit beiden Beispielen und jeweils verschieden langem rechtem Text erstellt.

http://foreninfo.bplaced.net/seiten...to_der_planlose_05_vertikale_ausrichtung.html

Und noch eine, in der die linke Spalte zusätzlich 100% Breite erhält:

http://foreninfo.bplaced.net/seiten...to_der_planlose_06_vertikale_ausrichtung.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Wow!

Das ist genial, ich bin sprachlos! :)
Besten Dank!

OT:
Wenn ich nun das ganze von Vorne richtig aufziehen will, inwiefern ist die von mir eingesetzte Vorlage "Sinnvoll"?
http://w3layouts.com/feedlive-blogging-mobile-website-template
Entspricht das auch dem Gedanken von HTML5 und CSS3?
Irgendwie bin ich mir mit den 3 Layouts und dem Script unschlüssig, ist das der Kerngedanke von dem "responsive Design"?
Ich stelle mit ein Template vor, dass durch unterschiedliche CSS-Anweisungen sich dem Endgerät anpasst, oder ist das am Ziel vorbei?

Besten Gruß
 
Wow!

Ich stelle mit ein Template vor, dass durch unterschiedliche CSS-Anweisungen sich dem Endgerät anpasst, oder ist das am Ziel vorbei?

Besten Gruß

Dafür gibt es zu viele Endgeräte mit zu vielen Auflösungen. Stelle dir alleine mal die gesamte Android-Palette vor, und für jedes einzelne Gerät gibt es dann wieder diverse Browser in unterschiedlichen Versionen.

Die Seite sollte sich statt dessen dem Viewport anpassen, und das macht man mit einer einzigen CSS Datei und Media Queries. Zur Vereinfachung gibt es Frameworks, von denen ich dir zwei genannt habe. So lange du das nicht verstehst, kannst du auch keine modernen Webseiten bauen. Das heutigen Anforderungen haben nur noch wenig mit dem zu tun, was du vor vielleicht 5+ Jahren kennengelernt hast.
 
Werbung:
Zurück
Oben