Spalten wie in einer Zeitung

[prm]

P.S.
An dem clearen gefällt mir nur etwas nicht. Ich cleare daheim schon Fenster, Boden und Geschirr, muss das im Code jetzt auch noch sein.

Ganz "klar", Andreas: Du willst doch hoffentlich auch einen "sauberen" Quelltext haben! :abrollen:

[Seramis]

@prm

ach ja, da war ja noch was...*g*

so kann man den IE6 auch dazu bringen:

im CSS noch dazusetzen

Code:

* html #textbereich {
     height: 350px;
    }

(ps: ich benutze das eher, weil dann kein optisches "springen" der Box ist, falls mal mehr, mal weniger Text drin steht auf den Unterseiten)

[Andreas69]

Also die Variante von prm funktioniert, wobei ich jetzt den Vorschlag für die gleichen Längen noch nicht angewendet habe.
Im Moment stellt es sich für mich auch so dar, als wenn die Variante von Seramis schneller zu realisieren ist. Es muss keine kleine Grafik erstellt werden, keine Rechnungen gemacht und die Änderungen im CSS und Html sind verschwindend gering.

Ich probiere es einfach mal aus und sollte es aus irgendwelchen Gründen dann doch nicht klappen, kann ich ja noch die zeitaufwendigere Methode von prm nehmen.

Habt Dank meine Lieben

LG
Andreas

[Andreas69]

Mit einer festen Länge ist wohl doch nicht so gut.
Ich werde ein paar Seiten dabei haben, die sich etwas nach unten in die Länge ziehen.
Da komme ich mit 350px, oder von mir aus auch 450px, nicht aus.
Es macht sich auch nicht besonders gut, wenn man viel nach unten scrollen kann, da aber nichts mehr kommt. Habe es jetzt mit der Methode von prm am laufen. Da ich keine farbigen Boxen verwenden werde, kommt es auch auf unterschiedliche Längen nicht an.
Hier ist der Test zu sehen. Ein bisschen muss ich noch an der Ausrichtung feilen

Eine Sache ist mir gerade auch noch aufgefallen.
Der Unterschied im Aussehen bei Firefox und IE ist sehr groß.
Die Überschriften der Seiten, die jeweils unterhalb des Menüs sind, werden im IE ganz anders wiedergegeben. Da ich selber ausschließlich Ff benutze, ist es mir erst jetzt aufgefallen.

Liegt es an der CSS, am Html, an mir und ich habe eigentlich blonde Haare und sie sind nur gefärbt ;-)

Bis denne...
Andreas

[prm]

Zunächst mal Glückwunsch, das sieht doch schon sehr vielversprechend aus!
Du kannst jetzt noch etwas an der Ausrichtung tüfteln.
Auf die Gefahr hin, dass du mich jetzt steinigst, verrate ich dir noch eine andere Variante:

Floate die #rechtsbox right und lass beim #content die Breite weg. Die passt sich dann automatisch dem zur Verfügung stehenden Zwischenraum an.
Das wäre dann folgender CSS-Code:

Code:

.linksbox
{
float: left;
display: inline;
width: 30%;
margin: 0 1%;
}

.content
{
padding: 1%;
}

.rechtsbox
{
float: right;
display: inline;
width: 30%;
}

Im HTML-Code musst du dann allerdings die Reihenfolge der div's ändern, auch wenn es nicht logisch erscheint:

Code:

<div class="linksbox">Inhalt Linksbox</div>
<div class="rechtsbox">Inhalt Rechtsbox</div>
<div class="content">Inhalt Content</div>

Zu den Überschriften:
Eine einheitliche Darstellung in unterschiedlichen Browsern erreichst du, indem du sie im CSS-Teil definierst. Z.B.

Code:

h3 {font-size: 1.1em;}

Schön, wie sich die Ereignisse wiederholen. Vor 3 Jahren hab' ich mit dieser Seite ähnlich angefangen - was macht man nicht alles für die Jugend! ;-)

[Andreas69]

Nein, warum sollte ich jemanden steinigen, der mir hilft auf den richtigen Weg zu kommen? ;-)
Danke, habe die Änderungen durchgeführt. Wir nähren uns der Phase an, dass es auf allen OS und Browser gut aussieht.

Ich mache es ja jetzt noch komplizierter.
Ich könnte dies mit den Spalten ja auch gut nutzen, um etwas eine gewisse Ordnung zu verleihen.
Ich weiß noch wie es in der Rubrik “Unser Team“ aussah. Dort wurde mit einem Bild und einem kleinem Steckbrief, jeder Spieler vorgestellt. Es war von mir in Tabellen gefasst und Bilder und Texte sprangen von links nach rechts und umgekehrt. Sah nicht schön aus. Ok, lag vermutlich auch an meinem Code. Ich werde es nun versuchen besser hin zu bekommen.
Eines frage ich mich dabei nun aber.
Ist es denn Sinnvoll, alles in eine CSS zu packen?

Schön, wie sich die Ereignisse wiederholen. Vor 3 Jahren hab' ich mit dieser Seite ähnlich angefangen - was macht man nicht alles für die Jugend!

Joo prm, ich hatte die Seite von der Handballmannschaft schon gesehen. Bei mir sind es halt Fußballer und Zurzeit noch Kelten-Kids. In 5-6 Jahren, werde ich wohl die Kids durch Kerle ersetzen müssen ;-)

LG
Andreas

[prm]

Bilder und Texte sprangen von links nach rechts und umgekehrt

Wie stellst du dir das genau vor?
Eine Reihe Bild links und rechts daneben den Text, nächste Reihe umgekehrt?

Grundsätzlich geht das auch mit CSS, muss man abwägen, ob in diesem Fall eine Tabelle möglicherweise effektiver ist.

Hier findest du einige CSS-Möglichkeiten:
http://www.ohne-css.gehts-gar.net/0019.php

Denkbar wäre auch ein Tooltipp, wo man nur beim Hovern über das Bild den Text angezeigt bekommt. Hierzu müsste der Code geringfügig angepasst werden.

[Andreas69]

Ok, ich habe mich vermutlich falsch ausgedrückt.
Dieses verspringen war nicht gewollt und sah dann so aus...



Nicht besonders schön
Ich dachte mir nun, wenn ich es in solche Spalten setze, dann würde es etwas geordneter aussehen ;-)

Also mit Tooltips habe ich auch schon gearbeitet, allerdings als Java.
Bin dafür auf diese Seite gegangen.
Ich habe sie für unseren Terminkalender genutzt.

Gruß
Andreas

Nachtrag:
Habe es mir gerade nochmals so durch den Kopf gehen lassen. Mit den Tooltipps ist nicht mal so schlecht beim Vorstellen der Mannschaft. Brauche mir dann auch keine Gedanken bezüglich der Ausrichtung des Textes zum Bild machen, usw...
Da es dies auch über CSS zu realisieren gibt, werde ich es damit mal versuchen.
Somit war der Tipp dann doch nicht so ganz nutzlos ;-) :daumen:

[Andreas69]

Hallo,
mir ist es ja jetzt schon peinlich, aber hier komme ich trotz intensiver Recherchen nicht weiter.
Wenn der Text in der mittleren Box etwas länger ist wie der im rechten Teil, dann sieht es so aus...



Nach meinen Recherchen, lässt sich dies nur durch setzen einer Tabelle verhindern.
Gibt es doch noch andere Möglichkeiten, oder ist es wirklich so?
Wenn ja, dann kann ich auch gleich auf diese Boxen verzichten.
Zumal es auch jetzt wieder ein Problem im IE gibt, vermutlich erzeugt durch die diversen Änderungen im CSS. Die Boxen werden nun nicht mehr nebeneinander angezeigt. :?
Testseite
Ach wie ich gerade sehe, zeigt sie nun auch der Firefox sie nicht mehr richtig an.

LG
Andreas

[Seramis]

Hallo,

hab bissi getestet..nix wissenschaftlich Fundiertes *gg*

vorläufiges Ergebnis:
ändere das in deiner style.css

und schreibe dann im html Text, nicht wie bisher
linksbox
rechtsbox
content

sondern in der Reihenfolge
linksbox
content
rechtsbox

IE6, IE7 und FF getestet

[HTML].linksbox.gal
{
float: left;
display: inline;
width: 30%;
margin: 0 20px 0 15px;
}

.content.gal{
float:left;
width:30%;
margin:0 20px 0 0;
}

.rechtsbox.gal
{
float:left;
margin:0 10px;
display: inline;
width: 30%;
}[/HTML]