✔ Design 2. Spalte anpassungsfähig

[Malaxo]

Hallo ich hab mal einfach so ein Design erstellt. Nun ist die 2. Spalte nicht anpassungsfähig. Da möchte ich aber, dass es je nach Auflösung breiter wird. Das Menu und die Werbung haben fixe Grössen.

Wenn noch jemand Lust dazu hat kann er das CSS oder HTML noch verbessern.

Auf dem IE 6 ist das Menu verschoben, im FF sieht das ganz gut aus.

Übrigens wer will kann das Design ruhig auch haben, daher hab ich es mal hoch geladen. Es war für mich nur eine Übung.

Besten Dank für die Hilfe und für die, die es als Vorlage benützen, viel Spass. - Das copyright etc. kann ruhig gelöscht werden war nur so als Footer gedacht.

 

[Layna]

Ich konnte leider mnur kurz reingucken, aber dir floats habe ich inzwischen aufgegeben bei so etwas (wenn jemand eine float-lösung dafür hat, her damit ^^)
Bessere erfahrungen habe ich mit position:absolute (allerdings nur zu empfehlen wenn die Spalten links und rechts "feste" breiten haben... ob nun feste pixel oder feste Prozente).

(achtung, tippfehler möglich)

#menu {
   position: absolute;
   left: 0px;
   width: 20px;
}

#ads {
   position: absolute;
   right: 0px;
   width: 30px;
}

# content {
   position: absolute;
   left: 20px; /*die 20 px vom menu... wenn du 'nen abstand willst halt entsprechend mehr*/
   right: 30px; /*Und hier die 30 vom ads*/
}

Halten nicht alle für die feine CSS-Art, funktioniert aber meistens .

PS: sieht aber gut aus, gratuliere

 

[Maik]

Hi,

das wären die erforderlichen Einstellungen, damit die mittlere Spalte #content in der Fließumgebung eine variable Breite besitzt:

#content{
        margin: 0 82px;
}

#ads{
        float: right;
        width: 82px;
}

Im HTML-Code werden die drei Spalten dann in dieser Reihenfolge notiert:

<div id="menu">... </div>
<div id="ads">...</div>
<div id="content">...</div>

Dass im IE das Menü verschoben ist, liegt daran, dass für das Listenelement der Außenabstand nicht auf null gesetzt ist.

 

[Malaxo]

Cool Danke

Wie gesagt es war nur eine Übung. Hatte gerade mal Zeit und Lust dazu.

Evt. kann es ja jemand als Vorlage brauchen oder sonst was.

Viel Spass damit

Erledigt

 

[Malaxo]

Hab jetzt alles gemacht.

Jedoch gibt es einen kleinen Fehler im IE

Und zwar wird der Content (die 2. Spalte) ein wenig nach unten versetzt und verläuft in den Footer und die ADS.

div#banner{
	height: 91px;
}

#menu{
	float: left;
	width: 82px;
}

#content{
	margin: 0 82px;
}

#ads{
	float: right;
    width: 82px;
}

#bar{
	height: 16px;
}

HTML:

<div id="menu">... </div>
<div id="ads">...</div>
<div id="content">...</div>

btw: ich sehe gerade das mein Banner auf 98% breite Eingestellt ist. Jetzt ist der Banner nicht mehr rechtsbündig, jedoch bei kleinerer Auflösung schon. Kann ich das auch noch irgend durch ein Trick hin biegen? Bei 100% verschiebt es mir die Ränder.

Falls jemand noch einmal das Komplette will zum prüfen lade ich es noch einmal fertig hoch.

Es hängt irgend wie damit zusammen das ich da ein Margin von 10 habe.

Der IE setzt dann die Mittlere Spalte (Content) noch einmal um 10 hinunter.

* {
	border: 0;
	margin: 10;
	padding: 0;
}

Würde das noch gerne fixen an was liegt das den?

 

[Layna]

Hi,

das wären die erforderlichen Einstellungen, damit die mittlere Spalte #content in der Fließumgebung eine variable Breite besitzt:

#content{
        margin: 0 82px;
}

#ads{
        float: right;
        width: 82px;
}

Stimmt, die links/rechts-kombi beim floaten habe ich noch nicht probiert.... ich glaube ich muss auch mal wieder Spielen gehen, habe jetzt 'ne neue Idee ^^.
Danke auch von meiner Seite ;-) .

 

[Malaxo]

hm.. ich lade es mal hoch, wenn sich jemand darum kümmern will, es im IE und im FF gleich zu machen, mit einem CSS, kann er das ruhig tun.

Greez

 

[Maik]

Hi,

hier ist die überarbeitete Fassung des Stylesheets:

* {
        border: 0;
        margin: 0;
        padding: 0;
}

body {
        font-size: 10pt;
        font-family: "Verdana", "Helvetica", sans-serif;
}

div#banner{
        height: 91px;
}

.banner-left{
        float: left;
        background-image: url(../Bilder/banner-left.jpg);
        background-repeat: no-repeat;
        height: 91px;
        margin-right: 0 !important;
        margin-right: -3px;
}

.banner-center{

        background-image: url(../Bilder/banner-center.jpg);
        background-repeat: repeat-x;
        height: 91px;
}

.banner-center h1{
        padding: 10px 0px 0px 20px;
        color: #000000;
        font-size: 14px;
        height: 91px;
}

.banner-right{
        float: right;
        background-image: url(../Bilder/banner-right.jpg);
        background-repeat: no-repeat;
        height: 91px;
        margin-left: 0 !important;
        margin-left: -3px;
}

#menu{
        float: left;
        width: 82px;
}

.menu-links h2{
        width: 72px;
        padding: 14px 0px 5px 10px;
        color: #000000;
        font-size: 12px;
        height: 12px;
        background-image: url(../Bilder/menu-top.jpg);
        background-repeat: no-repeat;
}

.menu-links ul{
        background-image: url(../Bilder/menu-bottom.jpg);
        background-position: left bottom;
        background-repeat: no-repeat;
        padding: 6px 0px 12px 0px;
        font-size: 12px;
        list-style-type: none;
}

.menu-links li{
        padding: 2px 10px;
}

.menu-links{
        width: 82px;
        background-image: url(../Bilder/menu-center.jpg);
        background-repeat: repeat-y;
}

#content{
        margin: 0 82px;
}

* html #content {height: 1%;}

.top-right{
        background-image: url(../Bilder/content-top-right.jpg);
        background-position: top right;
        background-repeat: no-repeat;
}

.top-left{
        background-image: url(../Bilder/content-top-left.jpg);
        background-position: top left;
        background-repeat: no-repeat;
}

.top-center{
        background-image: url(../Bilder/content-top-center.jpg);
        background-repeat: repeat-x;
        background-position: top center;
}

.bottom-right{
        background-image: url(../Bilder/content-bottom-right.jpg);
        background-position: bottom right;
        background-repeat: no-repeat;
}

.bottom-left{
        background-image: url(../Bilder/content-bottom-left.jpg);
        background-position: bottom left;
        background-repeat: no-repeat;
}

.bottom-center{
        background-image: url(../Bilder/content-bottom-center.jpg);
        background-repeat: repeat-x;
        background-position: bottom center;
}

.content-left{
        background-image: url(../Bilder/content-center-left.jpg);
        background-repeat: repeat-y;
        background-position: left;
}

.content-right{
        background-image: url(../Bilder/content-center-right.jpg);
        background-repeat: repeat-y;
        background-position: right;
}

.content-text h2{
        padding: 14px 0px 0px 10px;
        color: #000000;
        font-size: 12px;
}

.content-text p {
        padding: 6px 0px 6px 10px;
        font-size: 12px;
}

#ads{
        float: right;
        width: 82px;
}

.ads-links h2{
        width: 72px;
        padding: 14px 0px 5px 10px;
        color: #000000;
        font-size: 12px;
        height: 12px;
        background-image: url(../Bilder/menu-top.jpg);
        background-repeat: no-repeat;
}

.ads-links p{
        background-image: url(../Bilder/menu-bottom.jpg);
        background-position: left bottom;
        background-repeat: no-repeat;
        padding: 6px 0px 12px 10px;
        font-size: 12px;
}

.ads-links{
        width: 82px;
        background-image: url(../Bilder/menu-center.jpg);
        background-repeat: repeat-y;
}

.clear{
        clear: both;
}

#bar{
        height: 16px;
}

.bar-left{
        background-image: url(../Bilder/bar-left.jpg);
        background-repeat: no-repeat;
        height: 16px;
        float: left;
}

.bar-center{
        float: left;
        width: 98%;
        background-image: url(../Bilder/bar-center.jpg);
        height: 16px;
        padding: 1px 0px 0px 5px;
        color: #000000;
        font-size: 10px;
        text-align: right;
}

.bar-right{
        float: left;
        background-image: url(../Bilder/bar-right.jpg);
        background-repeat: no-repeat;
        height: 16px;
}

 

[Malaxo]

Danke, aber das sieht bei mir weder im FF noch im IE gut aus hehe

Im FF ist der Content hinter dem ads auf der rechten Seite. Bei dem Banner wird auch die rechte Seite abgeschnitten und neben dem ads angezeigt. (das liegt eben an den 98% bei mehr klappt das nicht)

Im IE die selben Probleme und noch mehr

Oder klappt das bei dir?

 

[Maik]

Die Reihenfolge für den dreispaltigen Banner hatte ich auch umgestellt, und vergessen dies hier zu dokumentieren. :-(

Ich hänge mal die ZIP-Datei an.