Fortsetzung von: Wie dieses Layout umsetzen?

[crashonline]

Hallo

Ich hatte im HTML -Forum mit diesem Thema angefangen aber mittlerweile drehen sich meine Fragen nur noch um CSS.

Ich will eine Seite mit diesem Design umsetzen:

Dabei soll die Seite auf möglichst vielen unterschiedlichen Viewports möglichst billfüllend sein und kein horizontales scrollen erfordern.

Meine Idee ist deshalb nun, das ganze in 3 "Spalten" zu slicen und dann mit css so einzurichten, wie zb auch diese forumsseite funktioniert. Das Blatt in der Mitte soll den Content tragen. Der Rest drumherum soll nur angezeigt werden, wenn der viewport größer ist (wie hier dieser hellgrüne hintergrund).
Nun habe ich mittlerweile gelernt, wie man sachen floaten kann und auch, wie man den content auf eine bestimmte Breite in der Mitte bringt.

Mein Problem:
Ich möchte, dass es zwischen den Bildern keinen sichtbaren übergang gibt. D.h.: Bild in der Mitte soll immer in der Mitte des Viewports sein. Daran solln rechts und links die anderen beiden Bilder anschließen. Wenn man dann den viewport verkleinert (oder eh einen kleineren hat), dann soll dieser übergang unverändert bleiben aber die Bilder rechts und links sollen aus dem Viewport verschwinden.

Kann mir jemand einen Hint geben, wie ich das am besten anstelle?
(Ich bitte nicht um Code, sondern nur um etwas wie: "Du musst einfach drei sachen mit der eigenschaft machen...", oder so... ;-))

Danke schonmal.

 

[Arca]

Was für 2 andere Bilder?

 

[crashonline]

OK... da hab ich mich wohl nicht klar ausgedrückt.



Bild 2 soll (wie der Content dieses Forums) immer eine bestimmte Größe haben und in der Mitte sein.
Bild 1 und 3 sollen direkt daran anschließen, so dass man den Übergang nicht sieht.
Wenn nun jemand seinen Viewport verkleinert (oder eh einen kleineren hat), dann soll (wie bei dieser Seite hier) der Rand (Bild 1 und 3) immer mehr aus dem Viewport geschoben werden, allerdings ohne, dass sich die schnittflächen der Bilder verschieben, so dass der Übergang immernoch unsichtbar bleibt.

Meine Grundüberlegungen bisher sind 3 Containerboxen, wobei die mittlere feste Größe hat. In der linken wird dann das Bild rechts gefloatet, in der rechten wird das Bild links gefloatet.
Kann das funktionieren oder habe ich da nen Denkfehler?

 

[Körnerbrötchen]

Wieso richtest du das rote Bild also 1+3 nicht einfach als Hintergrundbild ein?

 

[crashonline]

Wieso richtest du das rote Bild also 1+3 nicht einfach als Hintergrundbild ein?

Weil man dann einen Übergang sieht zwischen den Bildern.
Falls alle Stricke reißen, werde ich das so machen, aber noch habe ich Hoffnung.

 

[Körnerbrötchen]

Ähmm… schau mal. Wenn du das rote generell als Hintergrund von body einrichtest, so sieht man doch keinen Unterschied. Natürlich musst du das mittlere Bild ohne roten Hintergrund einbinden.

 

[crashonline]

Scheinbar kommt auf dem kleinen Demobild hier etwas nicht rüber: Der rote Hintergrund hat eine unregelmäßige Struktur und das Blatt in der Mitte (inkl kleinem Blatt daneben) hat keinen glatten oder gar Rechteckigen Rand.

Mein "einziges" Problem ist jetzt eigentlich, dass ich es nicht schaffe, 3 leere Boxes nebeneinander zu bekommen, bei denen die mittlere immer zentriert ist und eine feste Größe hat (und die anderen beiden nicht).
Die mittlere Box habe ich schon. Sie ist immer zentriert und hat eine feste Größe. Aber die beiden äußeren....?

 

[Körnerbrötchen]

Ist doch auch völlig egal. Den roten Hintergrund bindest du als body oder html ein und setzt die background-position auf center. Fertig ist das ganze.

 

[crashonline]

aahhh... Einsicht.

Ich hatte bei selfhtml auch den abschnitt über background-geschichten in css gelesen aber da ging es immer um bg's von objekten. Deswegen ist mir das nicht so recht in den Sinn gekommen, dass das ja so geht.

VIELEN DANK!

 

[crashonline]

Grundsätzlich funktioniert alles SUPER. (soweit es halt fertig ist).

Nur eine Kleinigkeit irritiert mich noch etwas.

Ich habe die dem body eine min-width gegeben, die eigentlich auch funktioniert. Wenn man den Viewport jedoch kleiner als ca. 100px breit zieht, dann verschiebt sich inhalt und Hintergrund zueinander.

Ist das normal? Kann man das noch ändern?

EDIT:
Hat sich erledigt.

Für alle, die es interessiert:
ich hatte es so:

 body { 
 background-image:url(img/seiteneu2.jpg); background-repeat:no-repeat;
 background-position: center 0px;
 min-width: 750px;
 }

Da hat es wie oben beschrieben funktioniert.

Jetzt habe ich es so:

 body { padding: 0 0 0 0 ;
        margin: 0 0 0 0;
 }

 div#seite {
 background-image:url(img/seiteneu2.jpg); background-repeat:no-repeat;
 background-position: center 0px;
 min-width: 750px;
 margin: 0;
 padding: 0;
 }

Und nun habe ich kein Problem mehr mit sich gegeneinander verschiebenden Inhalt.

 

[crashonline]

Ich habe nun ein kurioses Problem.

Ich habe eine box, die die ganze seite mit einem ständig gecenterten hintergrundbild füllt.

darin eine Box, die den inhalt auf 760px breite in der mitte bringt.

darin eine box mit menü, usw.

Die Sache ist nun, dass ich zum checken eine border um die "inhaltsbox" gemacht hatte. Will ich die jetzt wieder entfernen oder die breite auf 0px setzen, dann entsteht auf einmal ein weißer Balken über allem, inkl. Hintergrundbild, dass ja eigentlich eine box weiter oben liegt.

Hier der Code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>"float: right" element in containing box</title>
    <style type="text/css" media="screen">


 body { padding: 0 0 0 0 ;
        margin: 0 0 0 0;
 }

#seite {
 background-image:url(img/bg.jpg); background-repeat:no-repeat;
 background-position: center 0px;
 min-width: 760px;
 margin: 0;
 padding: 0;
 }


#rahmen {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    height: 1080px;
    min-width: 760px;
    padding: 0 0 0 0;
    [COLOR=Red]border: 1px solid black;[/COLOR]
   }


#menu {
  margin-top: 45px;
  margin-left: 150px;
  width: 550px; height: 100px;
  position: relative; top: 0px; left: 0px;
  }

#inhalt {

  border: solid 0px #FFFFFF;
  width: 610px;
  height: 900px;
  padding-left: 75px;
  padding-right: 75px;
}



#a1 {
  border: 0px solid #000000;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 0px; left: 0px;
  }

#a2 {
  border: 0px solid #000000;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 0px; left: 107px;
  }

#a3 {
  border: 0px solid #000000;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 0px; left: 280px;
  }

#a4 {
  border: 0px solid #000000;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 0px; left: 413px;
  }

#b1 {
  border: 0px solid #ffffff;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 38px; left: 0px;
  }

#b2 {
  border: 0px solid #ffffff;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 38px; left: 169px;
  }

#b3 {
  border: 0px solid #ffffff;
   margin: 0px;
   padding: 0px;
   position: absolute; top: 38px; left: 333px;
  }




 </style>
</head>
<body>
<div id="seite">
<div id="rahmen">

<div id="menu">
<a href="about:blank" onmouseover="a1.src='img/menu/a1u.png'" onmouseout="a1.src='img/menu/a1.png'"><img id="a1" name="a1" src="img/menu/a1.png" width="107" height="38" alt="Exposé"></a>
<a href="about:blank" onmouseover="a2.src='img/menu/a2u.png'" onmouseout="a2.src='img/menu/a2.png'"><img id="a2" name="a2" src="img/menu/a2.png" width="173" height="38" alt="Exposé"></a>
<a href="about:blank" onmouseover="a3.src='img/menu/a3u.png'" onmouseout="a3.src='img/menu/a3.png'"><img id="a3" name="a3" src="img/menu/a3.png" width="133" height="45" alt="Exposé"></a>
<a href="about:blank" onmouseover="a4.src='img/menu/a4u.png'" onmouseout="a4.src='img/menu/a4.png'"><img id="a4" name="a4" src="img/menu/a4.png" width="107" height="59" alt="Exposé"></a>
<a href="about:blank" onmouseover="b1.src='img/menu/b1u.png'" onmouseout="b1.src='img/menu/b1.png'"><img id="b1" name="b1" src="img/menu/b1.png" width="169" height="41" alt="Exposé"></a>
<a href="about:blank" onmouseover="b2.src='img/menu/b2u.png'" onmouseout="b2.src='img/menu/b2.png'"><img id="b2" name="b2" src="img/menu/b2.png" width="164" height="41" alt="Exposé"></a>
<a href="about:blank" onmouseover="b3.src='img/menu/b3u.png'" onmouseout="b3.src='img/menu/b3.png'"><img id="b3" name="b3" src="img/menu/b3.png" width="125" height="41" alt="Exposé"></a>
</div>

<div id="inhalt">
<div id="submenu"><p style="font-family: 'Courier New'; font-size:3em" align="right">Das Submenu</p></div>
</div>
</div>
</div>
</body>
</html>

Wie kann das sein? Woran liegt das?

Grüße, Robert

 

[Körnerbrötchen]

Kann ich dir auf die schnelle auch nicht ganz genau sagen (ein Link wäre ganz klasse), aber der Rahmen eines Elements wird zur Breite dazu addiert. Wenn du also den Rahmen von einem Pixel (an jeder Seite) hast und das Element für 100px deklariert hast (width:100px), dann ist dein Element in Wirklichkeit 102px breit. In der Höhe natürlich das gleiche. Ob das zur Lösung beiträgt, weiß ich aber nicht so genau, da ich mir das nur an Hand des Codes etwas schwer vorstellen kann. ;)

By the way: Per JavaScript so simple OnMouseOver-Effekte umzusetzen ist out. Das ganze geht auch per CSS und funktioniert dann in allen Browsern - auch in jenen, die JS deaktiviert haben. Google einfach mal oder frag nochmal nach.

 

[crashonline]

die seite ist noch nicht online. werde sie mal irgendwo hinpflanzen und dann den link posten.

es handelt sich aber nicht um den zu erwartenden 1px rahmen sondern um eine fensterbreite ca 100px breite geschichte.

ich hatte bei css mouse-over sachen nur möglichkeiten text zu verändern. aber ich werde nochmal schauen.

bis später.

 

[Efchen]

Wann korrigierst Du eigentlich Deinen HTML-Code?
Um CSS richtig anwenden zu können, ist es unumgänglich, HTML perfekt zu beherrschen.
Du hast jetzt schon die Divitis.

Außerdem hast Du noch einen falschen Doctype, den gibt es nicht.
DTD – Document Type Declaration – Das richtige Doctype LANtastic's Artikel

Zur Klärung Deines Problems wünsche auch ich mir einen Link.

 

[crashonline]

ok.. hier die links:

mit Border
ohne Border

Doctype:
Ging es dir dabei um den fehlenden Link? Der W3C HTML Validator hatte nämlich nichts dagegen, dass er fehlte. Oder geht es um was anderes?

Divitis:
Habe einen Artikel dazu gelesen und werde versuchen etwas aufzuräumen. Zu meiner Verteidigung muss ich aber sagen, dass es Anfangs z.B. keinen Seite-Container gab. Das war mit im body{ } allerdings hat da nicht alles so funktioniert, wie es sollte (siehe letztes Code-Posting auf der 1. Seite des Threads).

Was gibt es sonst noch an meinem HTML-Code auszusetzen?

Und bezügl. der mouseovers: muss ich das ganze dann per background-image anstellen?

Nun eine Idee, woran der Fehler mit dem weißen Rand liegen könnte?

 

[Efchen]

Das ist lustig. Aber ich bin ziemlich sicher, dass das mit der relativen Positionierung zu tun hat. Wozu brauchst Du die, hast Du gesagt?

Ging es dir dabei um den fehlenden Link? Der W3C HTML Validator hatte nämlich nichts dagegen, dass er fehlte. Oder geht es um was anderes?

Hmmm...laut meiner Quelle gibt es so einen Doctype nicht, aber wenn de rValidator den kennt? Frage ist, in welchen Mode er die Browser schickt, wenn er den IE in den Quirks Mode schickt, dann ist es nicht der, den Du nehmen willst.

Divitis:
Habe einen Artikel dazu gelesen und werde versuchen etwas aufzuräumen.

Das größere Problem ist, dass Du den Begriff "Semantik" noch nicht verstanden zu haben scheinst. Dann würdest Du nämlich das Menü auch als das auszeichnen: Nämlich als Liste von Links, also <ul>, und nicht als <div>. Das ist semantisch nicht korrekt.

Zu meiner Verteidigung muss ich aber sagen

Wir sind hier in keiner Schlacht :-)
Ich sag Dir, was nicht in Ordnung ist, und wenn Du eine vernünftige Website willst, dann änderst Du das irgendwann - besser früh als spät, wenn Du falsche Arbeitsweisen verinnerlicht hast.

Was gibt es sonst noch an meinem HTML-Code auszusetzen?

Fehlende Semantik.

 

[crashonline]

Also laut selfhtml ist das der sicherste Doctype, was CSS angeht (als der, der bei den meisten Browsern zum korrekten interpretieren führt).

Auch wenn du mir nicht glauben wirst, ich hatte erst vor, das menü als Liste zu machen (nach einem tutorial dieser Seite). Aber wie du evtl. gesehen hast, sind meine Bilder nicht alle gleich hoch, da das ganze menü ja leicht schräg verläuft. Deswegen dachte ich, dass ich besser absolute Positionen nehme.... Oder geht das doch irgendwie mit der Liste, so dass auch alles auf der richtigen Höhe ist?

Zu der relativen Position: eigentlich dachte ich nicht, dass ich dieser Box eine Position geben müsste, weil sie nach meinem Verständnis ja automatisch in der Box Rahmen sein müsste. Wenn ich diese Positionsangabe jedoch weglasse, dann ist das Menü nicht an der zu erwartenden Stelle, sondern ganz links auf der Seite. Warum?

Zum Thema Semantik: Nachdem ich den Thread von Waldwolf (oder so) gelesen habe, weiß ich jetzt (umso mehr), dass html nur zum auszeichnen des inhalts da ist, nicht zum formatieren o.ä.. Mal von den mouseover-geschichten und meiner Diveritis abgesehen: Wo ist denn die Semantik noch schlecht?

Und es wäre wirklich nett, wenn jemand nochmal was zum letzten Post auf auf Seite 1 des Threads sagen könnte. So ist ja auch wieder nur ein div-Container mehr dazu gekommen.

 

[Efchen]

ich hatte erst vor, das menü als Liste zu machen . Aber wie du evtl. gesehen hast, sind meine Bilder nicht alle gleich hoch, da das ganze menü ja leicht schräg verläuft. Deswegen dachte ich,

Falsch gedacht. Was hat die logische Auszeichnung mit dem Aussehen zu tun?
Richtig, gar nichts.
Egal, wie Dein Menü aussehen soll, ein Menü ist eine Liste von Links, daher ist nur eine Liste die richtige Auszeichnung. Semantisch macht Deine derzeitige Auszeichnung keinen Sinn.
Das Aussehen kannst Du dann festlegen, wie Du willst, da ändert sich doch quasi nur, dass Deine Listenelemente Block-Elemente sind, und daher untereinander liegen.

Oder geht das doch irgendwie mit der Liste, so dass auch alles auf der richtigen Höhe ist?

Wie gesagt, die logische Auszeichnung hat mit der Darstellung nichts zu tun.

Ein bestimmtes Tag aufgrund eines bestimmten Aussehens zu wählen, ist falsch.

Wenn ich diese Positionsangabe jedoch weglasse, dann ist das Menü nicht an der zu erwartenden Stelle, sondern ganz links auf der Seite. Warum?

Weil Deine Links dazu noch absolut positioniert sind.

Wo ist denn die Semantik noch schlecht?

Es ist ja noch kein Inhalt da, deswegen ist sie schlecht. Semantik kann man nur vergeben, wenn man den Inhalt kennt.
"Das Submenu" sieht im Moment aus wie eine Überschrift. Ausgezeichnet ist es aber als Textabsatz.

Ich würde außerdem noch Inhalt und Layout strikt voneinander trennen, d.h. auch Dein CSS in ein externes Stylesheet auslagern.

Und es wäre wirklich nett, wenn jemand nochmal was zum letzten Post auf auf Seite 1 des Threads sagen könnte.

Da schreibst Du "Und nun habe ich kein Problem mehr mit sich gegeneinander verschiebenden Inhalt.".

 

[crashonline]

Da schreibst Du "Und nun habe ich kein Problem mehr mit sich gegeneinander verschiebenden Inhalt.".

Richtig, weil ich es aus dem body rausgenommen habe und einen weiteren (wahrscheinlich sinnlosen) div-container eingesetzt habe, der eigentlich die gleiche funktion wie body hat. Wenn ich das aber nicht machen will (sondern es im body lassen), was muss ich dann anders machen als im 1. der beiden geposteten quelltexte?

Ich werde das ganze system nochmal überdenken bezgl. semantik.

<EDIT:>

So.... habe nun alles einmal überarbeitet und die Bilder in ne Liste gepackt. Dies (in Verbindung mit dem Löschen mancher Box) hat viele Probleme gelöst.

JEDOCH: Jetzt sind die Bilder zwar alle in der Liste und die erste Zeile Bilder ist auch am richtigen Platz. Die zweite Reihe jedoch nicht. Wie kann ich das semantisch richtig ändern?

Außerdem verwundert mich etwas, dass der Rahmen, der die Liste (ul) umgeben sollte nicht die Listen-Elemente umfasst, sondern präzise davor aufhört.

Wenn ich das float:left rausnehme, dann umschließt der Rahmen die gesamte Liste, allerdings sind die Bilder dann wieder an der falschen Stelle.

Außerdem: wenn ich das Bild jetzt sehr stark heranzoome, dann verändern die Bilder auch wieder ihre relative Position zum Hintergrund.

Falls wieder Fehler in dem Aufbau dieser Sache sind: ich habe mich nach diesem Tutorial gerichtet.

<UPDATE>

Das Bilderpositionsproblem habe ich gelöst und auch deren Verschiebung beim reinzoomen. (Aber lasst mich raten... da 2 Tabellen draus zu machen war wieder semantisch nicht korrekt, nicht wahr? Wie dann aber sonst?)

<UPDATE 2>
Ich habe nun auch das mouseover per css gelöst, was aber den Code nicht unbedingt verkürzt hat. Aber es funktioniert.

Was ich mich weiterhin frage: Warum ist der Rahmen, der die Liste umrahmen soll nur gerade groß genug um an die Bilder heran zureichen?


Hier der aktuelle Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>"float: right" element in containing box</title>
    <style type="text/css" media="screen">


 body { padding: 0 0 0 0 ;
        margin: 0 0 0 0;
 }

#seite {
 background-image:url(img/bg.jpg); background-repeat:no-repeat;
 background-position: center 0px;
 min-width: 760px;
 margin: 0;
 padding: 0;
 }


#rahmen {
    text-align: center;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    height: 1080px;
    min-width: 760px;
    padding: 0 0 0 0;
       }




#inhalt {

  border: solid 1px #FFFFFF;
  width: 610px;
  height: 900px;
  padding-left: 75px;
  padding-right: 75px;
}



ul#liste { list-style-type: none;
    padding-left: 150px;
    padding-top: 45px;
    margin: 0;
    border: #BCBCBC solid 1px;
    }

ul#liste2 { list-style-type: none;
    padding-left: 150px;
    padding-top: 0px;
    margin: 0;
    border: #BCBCBC solid 1px;
    }


ul#liste li, ul#liste2 li{
  display: inline;
  }


ul#liste li a
{
float: left;
position: relative; top: 0px; left: 0px;
}

ul#liste2 li a
{
float: left;
position: relative; top: -21px; left: 0px;
}

#liste img, #liste2 img
 { border: 0px;
}



a#exp {
       display:block;
    height:38px;
    width:108px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/a1.png) 0px 0px no-repeat;

}
a:hover#exp{
    background: transparent url(img/menu/a1u.png) 0px 0px no-repeat;
}

a#char {
       display:block;
    height:38px;
    width:174px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/a2.png) 0px 0px no-repeat;
}
a:hover#char{
    background: transparent url(img/menu/a2u.png) 0px 0px no-repeat;
}

a#the {
       display:block;
    height:45px;
    width:133px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/a3.png) 0px 0px no-repeat;
}
a:hover#the{
    background: transparent url(img/menu/a3u.png) 0px 0px no-repeat;
}

a#fol {
       display:block;
    height:59px;
    width:123px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/a4.png) 0px 0px no-repeat;
}
a:hover#fol{
    background: transparent url(img/menu/a4u.png) 0px 0px no-repeat;
}

a#sze {
       display:block;
    height:42px;
    width:170px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/b1.png) 0px 0px no-repeat;
}
a:hover#sze{
    background: transparent url(img/menu/b1u.png) 0px 0px no-repeat;
}

a#aut {
       display:block;
    height:42px;
    width:164px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/b2.png) 0px 0px no-repeat;
}
a:hover#aut{
    background: transparent url(img/menu/b2u.png) 0px 0px no-repeat;
}

a#kon {
       display:block;
    height:42px;
    width:126px;
    border:0px;
    padding:0px;
    background: transparent url(img/menu/b3.png) 0px 0px no-repeat;
}
a:hover#kon{
    background: transparent url(img/menu/b3u.png) 0px 0px no-repeat;
}


}
 </style>
</head>
<body>
<div id="seite">
<div id="rahmen">

<ul id="liste">
<li><a id="exp" href="about:blank"></a></li>
<li><a id="char" href="about:blank"></a></li>
<li><a id="the" href="about:blank"></a></li>
<li><a id="fol" href="about:blank"></a></li>
</ul>

<ul id="liste2">
  <li><a id="sze" href="about:blank"></a></li>
  <li><a id="aut" href="about:blank"></a></li>
  <li><a id="kon" href="about:blank"></a></li>
</ul>


</div>
</div>
</body>
</html>

Das ergibt dann diese Seite.

Wenn ich allerdings den Code von #Seite in den body {...} packe:

 body { padding: 0 0 0 0 ;
        margin: 0 0 0 0;
        background-image:url(img/bg.jpg); background-repeat:no-repeat;
        background-position: center 0px;
        min-width: 760px;
 }

dann kommt diese Seite ( Alter Code aber der entscheidende Teil sit noch gleich. Fenster bitte ganz schmal ziehen... dann verschieben sich Inhalt und Hintergrundbild zueinander.)

 

[Körnerbrötchen]

Mal ganz ehrlich? Ich gebe dir einen Rat, für den Efchen mich steinigen wird, aber so lange von ihm keine bessere Antwort kommt, dann nimm die Variante, die klappt. Ein div zu viel wird dich nicht umbringen.