Eine alternative wäre natürlich auch alle Bilder in der Vorschau quadratisch darzustellen. Nur wäre das wieder enorm viel Arbeit... Ein Tool was die Bilder verkleinert und automatisiert beschneidet kenne ich leider nicht...
Mit Tabellen zu arbeiten würde mir da wirklich vieles erleichtern. Nur nur bekommt man ja von allen Seiten geprügelt das Tabellen im Zusammenspiel mit CSS für das Layout ein absolutes no-go ist.
Wie verhält es sich denn dabei mit den Galerien?
MfG
mephisto2k
Hallo ich habe eine Galerie mit Hilfe einer Unsortierten Liste erstellt.
Jetzt habe ich nur das Problem das wenn in der Galerie eine Mischung zwischen Bildern im Hoch- und Querformat vorliegt, das sich das Layout verschiebt.
Da eine Beschreibung des Zustandes relativ umständlich wäre gibt hier einen LINK zum anschauen.
Die Galerie ist wie folgt in der CSS-Datei definiert.
#galerie li{
list-style-type: none;
float: left;
margin: 0 10px 10px 0;
text-align: center;
font-weight: bold;
/*min-height: 190px;*/
}
#galerie img{
display: block;
background: #6d6d6d;
padding: 5px;
border: 2px solid white;
}Zwar habe ich Versucht die Listen Höhe mit einem "min-height" zu definieren, aber das gefällt mir nicht. Daher würde mich an dieser Stelle interessieren ob es eine andere, eine saubere Möglichkeit gibt, damit das Layout nicht derart verzerrt dargestellt wird.
Ganz schön wäre es wenn sich die Bilder im Querformat, mittig neben den Hochformat Bildern anordnen. Nur fehlt mir hierzu die passende Idee. Und hoffe daher auf den einen oder anderen Tipp von Euch.
MfG
mephisto2k
Die verschachtelte Liste als Listeneintrag der Hauptliste zu nutzen ist eine sehr gute Idee und klappt hervorragend.
Vielen Dank für den Tipp
MfG
mephisto2k
Hallo,
für meine Page wollte ich mittels unsortierter Liste eine Navigation gestalten. Diese Liste hat auch ein paar Unterpunkte. Das hatte ich mit einer unsortierten Liste in einer unsortierten Liste gestaltet. Also bevor ich die "Hauptliste" schließe, öffne ich die zweite Liste, nach den Unterpunkten schließe ich die Unterliste und dann erst die Hauptliste also so:
<ul>
<li></li>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
</ul>Nur schlägt da der Validator Alarm.
Also habe ich bevor ich die Unterliste geöffnet habe zuerst die Hauptliste wieder geschlossen
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
</ul>Der Validator segnet jetzt zwar alles ab, jedoch habe ich nun das Problem mit der Unterliste. die ist jetzt irgendwie zerschossen.
Hat jemand vielleich eine Idee wie man eine unsortierte Liste mit Unterliste sauber implementieren kann. So ganz bin ich von meiner Idee allein auf der HTML Seite, schon allein, nicht zufrieden...
HIER gibt es einen kleinen Einblick auf mein Problem.
MfG
mephisto2k
Das war der goldene Wink mit dem Zaunpfahl, eigentlich offensichtlich aber man selbst sieht die einfachsten Fehler nie...
Kein Wunder das die Shadowbox ohne Angabe des korrekten Pfades der CSS Datei nicht funktioniert...
Tausend Dank Euch allen.
MfG
mephisto2k
Im zweiten versuch ja, das Ergebnis ist aber das selbe wie beim oben stehenden Link...
Die Dateigröße war auch identisch zwischen deiner und der Datei von der Shadowbox-Page
Hi,
ich habe jetzt deinen Quellcode genommen und habe hin und her probiert, jetzt habe ich die Bilder schon im Hauptverzeichnis, für denn Fall das die Verschachtelungstiefe irgendeinen Einfluss hat. ich habe auch Nur ein Bild genommen für Thumbnail und Großanzeige.
Selbst habe ich mir das Script schon mehrfach runtergeladen.
Aber alle ohne Erfolg...
Das Ergebnis seht ihr ja HIER...
Im meinem Quellcode steht doch jetzt schon fast nichts mehr drin.
Daher Frage ich mich wirklich wo mein Fehler liegt...
Hallo,
ich muss mal wieder kapitulieren, diesmal bei der Shadowbox.js das Script mag gut Dokumentiert sein, leider bin ich jedoch der englischen Sprache nur sehr begrenzt mächtig.
Daher habe ich mir den Quellcode der Shadowbox Website angeschaut und dachte mir die richtigen Inhalte kopiert und für meinen bedarf abgeändert zu haben.
Jedoch wenn ich mir die Bilder auf der meiner Seite nun anschauen möchte habe ich die Thumbnails direkt über der vergrößerten Ansicht, ohne den typischen Aufblendeeffekt.
Hier mal ein LINK um für einen besseren Eindruck.
Muss ich den Script noch etwas mitteilen?
MfG
mephisto2k
Das gibt es doch nicht, ich bin davon ausgegangen das etwas auskommentiertes nicht interpretiert wird, ob jetzt vor oder nach der Klammer.
Damit hast du mich wahrscheinlich der Ursache einiger schon beseitigter Fehler belehrt. Tausend Dank dafür. Was so eine kleine Unachtsamkeit für folgen haben kann.
Zum Thema Überschrift, auf dieser Seite werde ich die Überschrift wahrscheinlich nicht in der Liste brauchen, auf anderen hatte ich das hingegen schon vor. Es sei denn es gibt Argumente die davon abraten.
Das klingt alles ziemlich logisch was du schreibst. Nur leider ist das Ergebnis immer noch das selbe, zumindest bei mir. Die Bilder sind alle untereinander direkt Rahmen an Rahmen. Hier der aktuelle Stand.
Demnach hab ich mir wohl irgendwo noch ein Eigentor geschossen.
Warum sollte man keine Überschrift in einer Liste haben?
MfG
mephisto2k
Okay aber im Bereich "#galerie li" habe ich doch einen float.
Welchen ich nach der Galerie, im HTML-Code, auch wieder durch clearen geschlossen habe. Oder verstehe ich hier etwas falsch?
#galerie li {
list-style-type: none;
float: left;
margin: 0 30px 30px 0;
text-align: center;
font-weight: bold;
}
#galerie img {
display: block;
padding: 8px;
border: 1px solid #8B0000;
}lol 
ja das war wohl nichts, aber jetzt sollte es gehen 
Stimmt mit Link ist es einfacher.
Hallo ich habe mal wieder ein kleines Problem.
Ich wollte mittels CSS eine Bildergalerie aus einer Unsortierten Liste machen.
Durch meine Google Suche bin ich auf diesen Tipp aufmerksam geworden.
Klingt gut und sieht einfach aus, dachte ich zumindest. Jedoch habe ich das Problem das die Bilder direkt untereinander angeordnet werden. Zwischen Bild und Rahmen habe ich zwar den 3px Abstand, jedoch liegen die Rahmen direkt untereinander an.
Im Gegensatz zum Beispielcode habe ich jedoch die Größenangaben der Bilder weggelassen und habe diese in den HTML-Code gepackt da sich die Bilder in der Größe Teilweise unterscheiden. Außerdem gibt es Bilder im Hoch- und Querformat.
Da ich nicht weiß ob ich mit anderen CSS-Definitionen die für die Galerie definierten aufhebe, poste ich folgend mal meinen CSS-Code. Mein Problemcode befindet sich im unteren drittel des Codes.
/*importiert normalisierung.css*/
@import url("norm.css");
/*Seitenbreite fixieren und Seite zentrieren*/
/*html{
cursor:crosshair;
}*/
body {
position: relative;
margin: 0 auto; /*Aussenabstand oben & unten ist null*/
text-align: center;
width: 1024px;
Border: 1px solid white;
background: black; /*schwarze Seitenfarbe*/
font-size: 100.01%;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
color: #e9e9e9;
}
/*-------------------- Layoutgrafiken werden plaziert --------------------*/
/*_+++ Kopf Grafik +++ */
div#oben {
background:url(../images/layout/oben.gif) no-repeat center;
width: 1024px;
height: 129px;
}
/*_+++ Mittel Grafik +++ */
div#wrapper {
background:url(../images/layout/xmitte.gif) repeat-y center;
/* position: relative; */
width: 1024px;
text-align: left;
}
/*_+++ Fuß Grafik +++ */
div#footer {
background:url(../images/layout/unten.gif) no-repeat bottom;
height: 105px;
width: 1024px;
}
h1.logo {
background: url(../images/layout/logo.png) no-repeat; /*Hintergrundgrafik mit Logo*/
text-indent: -9999px;
/*Der Text wird weit außerhalb des Browser Fensters angezeigt,
dafür wird die Hintergrundsgrafik plaziert*/
width: 326px;
height: 89px;
position: relative;
left: 700px;
top: 20px;
padding: 10px;
}
blockquote.info {
text-indent: -9999px;
height: 0;
}
/*-------------------- Navigation wird gestaltet --------------------*/
#navi {
background: url(../images/layout/navi.png) no-repeat;
position: relative;
left: 60px;
float: left;
width: 151px;
min-height: 384px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
letter-spacing: 0.2em;
}
#unter_navi {
width: 450px;
position: relative;
left: 230px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
letter-spacing: 0.2em;
padding: 15px;
text-align: left;
background-color: white;
}
#unter_navi ul {
list-style-type: none;
display: inline;
}
#unter_navi li {
display: inline;
}
#navi h2, #unter_navi h2{
text-indent: -9999px;
height: 0;
}
#navi ul {
padding: 40px 5px 20px 20px;
}
#navi ul ul {
padding: 0px 10px 0px 20px;
}
#navi ul li a:link,
#navi ul li a:visited,
#navi ul li a:active {
display: block; /*Links sind ueber gesamte breite der Liste anklickbar*/
color: #5a6267; /*Dunkelgraue Schriftfarbe*/
text-decoration: none; /*Loescht Unterstreichung der Links*/
padding-top: 7px; /*Setzt einen Abstand unter den Links*/
padding-bottom: 7px; /*Setzt einen Abstand unter den Links*/
}
#unter_navi ul li a:link,
#unter_navi ul li a:visited,
#unter_navi ul li a:active {
color: #5a6267; /*Dunkelgraue Schriftfarbe*/
text-decoration: none; /*Loescht Unterstreichung der Links*/
}
#navi ul li a:hover,
#navi ul li a:focus,
#unter_navi ul li a:hover,
#unter_navi ul li a:focus {
color: #fff; /*Setzt die Textfarbe der Links beim ueberfahren (hover),
bzw. Navigation mittes Tastatur (focus), auf einen anderen Farbwert*/
}
#navi ul li a#current {
font-weight: bold;
color: #fff;
}
/*------------------------------- Beginn von Inhalt ----------------------------------*/
/*----------------Anfang Überschriften Gestaltung im Inhaltsbereich ----------------*/
#content_main h2 {
text-align: center;
/*margin-right: 140px;*/
margin-bottom: 20px;
font-family: Baskerville, Cambria, "Times New Roman", serif;
font-weight: 120;
font-size: 1.4em
}
#content_main h3 {
text-indent: -9999px;
}
#content_main h4 {
text-align: center;
/*margin-right: 140px;*/
font-family: Baskerville, Cambria, "Times New Roman", serif;
font-weight: 100;
font-size: 1.2em
}
/*----------------Ende Überschriften Gestaltung im Inhaltsbereich ----------------*/
#content_main {
margin: 0 20px 0 240px;
min-height: 500px;
width: 600px;
}
#content_main p {
font-size: .9em; /*Schriftart ist bereits im body definiert*/
line-height: 1.3; /*Zeilenabstand (ohne größenangabe = "Wert" * so hoch wie Schriftgröße*/
/*margin-right: 140px; /*Gibt Abstand zum folge Absatz an*/
margin-bottom: 10px; /*Gibt Abstand zum folge Absatz an*/
}
#content_main p:first-letter {
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-size: 1.3em;
font-weight: 200;
color: #9f9f9f;
line-height: 1;
}
/*-------------- Anfang Listengestaltung des Inhaltes --------------*/
#content_list ul {
padding-bottom: 20px;
}
#content_list li h4 {
font-size: 1.3em;
float: right;
background: #999999;
padding: 10px;
min-height: 40px;
min-width: 40%;
}
#content_list ul li {
background: #666666;
}
/*-------------- Ende Listengestaltung des Inhaltes --------------*/
/*-------------- Anfang Galeriegestaltung des Inhaltes --------------*/
/*#galerie li h4 {
font-size: 1.3em;
background: #999999;
padding: 10px;
min-height: 40px;
min-width: 40%;*/
}
#galerie li {
list-style-type: none;
float: left;
margin: 0 30px 30px 0;
text-align: center;
font-weight: bold;
}
#galerie img {
display: block;
padding: 8px;
border: 1px solid #8B0000;
}
/*-------------- Ende Galeriegestaltung des Inhaltes --------------*/
/*-------------------------------- Ende von Inhalt -----------------------------------*/
/*-------------------- Fußzeile wird gestaltet --------------------*/
#site_info {
clear: both;
/*background: url(../images/navihg.png) repeat;*/
background-position: center;
padding-bottom: 15px;
}
#site_info h4 {
text-indent: -9999px;
}
div#site_info {
text-align: center;
font-size: 0.7em;
line-height: 1.3em;
}
/*-------------------- Sonstiges --------------------*/
acronym {
cursor: help;
border-bottom: 1px dotted white;
}
div#durchgestrichen{
text-decoration: line-through;
display: inline;
}Würde mich freuen wenn mal jemand seinen Kompetenten Blick über den Code wirft.
MfG
mephisto2k
Das Problem habe ich nun in den Griff bekommen.
Danke an alle fleißigen Helfer
MfG
mephisto2k
Ok ein kleines Auszug
CSS
#content_main {
margin: 0 20px 0 240px;
min-height: 500px;
width: 600px;
}
#content_main ul li {
overflow: hidden;
padding: 10px 0; /*oberer und unterer Innenabstand (10px) und linken und rechte abstand (0)*/
}
#content_inline ul {
float: left;
margin-right: 80px;
/*max-width: 33%;*/
text-align: center;
}
#content_inline h4 {
display: block;
/*max-width: 33%;*/
}
#content_inline li {
display: block;
font-size: .9em; /*Schriftart ist bereits im body definiert*/
/*max-width: 33%;*/
}HTML
<div id="content_inline" >
<ul>
<li><h4>111</h4></li>
<li>1 unten</li>
<li>12111</li>
</ul>
<ul>
<li><h4>222</h4></li>
<li>2 unten</li>
<li>212222</li>
</ul>
<div style="clear:both;"></div>
</div>Hallo und erst mal Danke an Dodo und synaptic.
Ein kleiner Zwischenstand.
Zu 1: Ich habe mich auf die Suche begeben zum Thema Browserkompatibilität und bin auf css4you fündig geworden. Dort steht das "min-height" soweit von allen modernen Browsern verstanden wird. Der IE6 gehört hier nicht dazu aber der ist mit neun Jahren auch alles andere als up-to-date. Und für meine Zwecke reicht eine relativ aktuelle Unterstützung. Zur not gibt es auch hierfür einen hack, nur ob ich so etwas einsetze weiß ich noch nicht. - Der Tipp von synaptic geht ja auch in die Richtung.
Zu 2: Wie schön das die Welt manchmal auch einfach sein kann
Zu 3: Hier habe ich mich entschieden bei der float Variante zu bleiben da die Pseudotabelle nur dem Design dienlich sein soll. Schließlich handelt es sich um keine Fakten welche in ein Tabelle müssen.
Anscheinend funktioniert das ganze auch bei mir, ich habe nur ein Problem mit zu langen Texten, was den Effekt hat das sich die Listen (<ul></ul>) teilweise doch wieder untereinander anordnen.
Die Listen sind Kinderelemente von der ID #content_main, diese Box habe ich nun mit einer festen breite definiert. Daher würde ich annehmen das die Kinderelemente die Begrenzung max-width des Elternelementes als Grenze hinnehmen...
Also habe ich die Listenbreite ebenfalls mit max-width begrenzen wollen. Das funktioniert auch mit einer festen Angabe von px aber wenn ich die Breite bei Listen mit 33% begrenzen möchte habe ich nur ganz schmale und abgehackte Listen.
Habe ich hier wieder irgendwo einen Denkfehler?
MfG
mephisto2k
Hallo,
wie der Titel des Beitrags schon erahnen lässt bin ich was das Thema CSS angeht ein Anfänger. Daher bräuchte ich noch ein paar Tipps woraus ich noch ein wenig lernen kann.
Es geht folgend um dieses Beispiel: http://dl.dropbox.com/u/6915032/dunkel.blicke/index.html
Bei dieser Seite habe ich 3 Fragen.
1: Wie sinnvoll ist es für den #content Bereich der Seite eine Minimale Höhe anzugeben, bzw. was würde dagegen sprechen.
2: Lasse ich mir mit dem Firebug anzeigen wie die Boxen auf der Seite verteilt sind fällt auf das die Box welche "h4" definiert eine bestimmte Breite hat und nicht die Breite der Hintergrundgrafik überschreitet.
Dieses verhalten würde ich mir auch von der Box #content_main wünschen da deren Endbereich auf der rechten Seite die Hintergrundgrafik überschreitet dessen Rand. Aber meine Versuche mit einer padding bzw. margin Definition zur rechten Seite waren ergebnislos. Was mache ich an dieser Stelle falsch, bzw. wo liegt mein Denkfehler?
3: Auf den Seiten ".festival" bzw. ".foto.art" wollte ich mit Listen einen Tabelleneffekt erreichen. Soll heißen ich habe beispielsweise drei Listen. Die einzelnen Listen möchte ich nebeneinander anordnen. Die Listenpunkte jedoch möchte ich untereinander anordnen.
Zu dieser Frage hatte ich schon mal ein Beitrag eröffnet https://www.forum-hilfe.de/showthread.php?t=48285 allerdings habe ich anscheint soviel mit dem Code gespielt das ich mir irgendwo ein Eigentor geleistet habe. Nun ja das Ergebnis seht ihr ja. Daher auch hier meine Frage was mache ich falsch?
MfG
mephisto2k
Wow das ging schnell tausend Dank.
Die Anordnung der Listen ist nun korrekt nur ist jetzt das Layout irgendwie zerschossen...
Zerschossen in so fern das sich die Listen nun unter dem Navi
CSS
/*importiert normalisierung.css*/
@import url("norm.css");
/*Seitenbreite fixieren und Seite zentrieren*/
body {
position: relative;
margin: 0 auto; /*Aussenabstand oben & unten ist null*/
text-align: center;
width: 1024px;
Border: 1px solid white;
background: black; /*schwarze Seitenfarbe*/
font-size: 100.01%;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
color: #e9e9e9;
}
/*-------------------- Layoutgrafiken werden plaziert --------------------*/
/*_+++ Kopf Grafik +++ */
div#oben {
background:url(../images/layout/oben.gif) no-repeat center;
width: 1024px;
height: 129px;
}
/*_+++ Mittel Grafik +++ */
div#wrapper {
background:url(../images/layout/xmitte.gif) repeat-y center;
/* position: relative; */
width: 1024px;
text-align: left;
}
/*_+++ Inhaltsbereichs Grafik +++
div#content {
padding: 0 50px;
background:url(../images/layout/xmitte.gif) repeat-y center;
}*/
/*_+++ Fuß Grafik +++ */
div#footer {
background:url(../images/layout/unten.gif) no-repeat bottom;
height: 105px;
width: 1024px;
}
h1.logo {
background: url(../images/layout/logo.png) no-repeat; /*Hintergrundgrafik mit Logo*/
text-indent: -9999px;
/*Der Text wird weit außerhalb des Browser Fensters angezeigt,
dafür wird die Hintergrundsgrafik plaziert*/
width: 326px;
height: 89px;
position: relative;
left: 700px;
top: 20px;
padding: 10px;
}
blockquote.info {
text-indent: -9999px;
height: 0;
}
/*-------------------- Navigation wird gestaltet --------------------*/
#navi {
background: url(../images/layout/navi.png) no-repeat;
position: relative;
left: 60px;
float: left;
width: 151px;
min-height: 384px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
letter-spacing: 0.2em;
}
#unter_navi {
width: 450px;
position: relative;
left: 230px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
letter-spacing: 0.2em;
padding: 15px;
text-align: left;
background-color: white;
}
#unter_navi ul {
list-style-type: none;
display: inline;
}
#unter_navi li {
display: inline;
}
#navi h2, #unter_navi h2{
text-indent: -9999px;
height: 0;
}
#navi ul {
padding: 40px 5px 20px 20px;
}
#navi ul ul {
padding: 0px 10px 0px 20px;
}
#navi ul li a:link,
#navi ul li a:visited,
#navi ul li a:active {
display: block; /*Links sind ueber gesamte breite der Liste anklickbar*/
color: #5a6267; /*Dunkelgraue Schriftfarbe*/
text-decoration: none; /*Loescht Unterstreichung der Links*/
padding-top: 7px; /*Setzt einen Abstand unter den Links*/
padding-bottom: 7px; /*Setzt einen Abstand unter den Links*/
}
#unter_navi ul li a:link,
#unter_navi ul li a:visited,
#unter_navi ul li a:active {
color: #5a6267; /*Dunkelgraue Schriftfarbe*/
text-decoration: none; /*Loescht Unterstreichung der Links*/
}
#navi ul li a:hover,
#navi ul li a:focus,
#unter_navi ul li a:hover,
#unter_navi ul li a:focus {
color: #fff; /*Setzt die Textfarbe der Links beim ueberfahren (hover),
bzw. Navigation mittes Tastatur (focus), auf einen anderen Farbwert*/
}
#navi ul li a#current {
font-weight: bold;
color: #fff;
}
/*-------------------- Inhalt wird gestaltet --------------------*/
.clear { clear: both; }
#content_main {
margin: 0 20px 0 240px;
}
#content_main p {
font-size: .9em; /*Schriftart ist bereits im body definiert*/
line-height: 1.3; /*Zeilenabstand (ohne größenangabe = "Wert" * so hoch wie Schriftgröße*/
margin-right: 140px; /*Gibt Abstand zum folge Absatz an*/
margin-bottom: 10px; /*Gibt Abstand zum folge Absatz an*/
}
#content_main p:first-letter {
font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif;
font-size: 1.3em;
font-weight: 200;
color: #9f9f9f;
line-height: 1;
}
#content_main h3 {
text-indent: -9999px;
}
#content_main h4 {
text-align: center;
margin-right: 140px;
padding-bottom: 10px;
font-family: Baskerville, Cambria, "Times New Roman", serif;
font-weight: 100;
font-size: 1.2em
}
#content_inline ul li {
display: block;
}
#content_inline ul {
float: left;
padding-left: 80px;
}
#content img {
float: left; /*Hat den Effekt das Bild links und wird rechts vom Text umflossen*/
margin-right: 20px;
border: 1px solid #ccc;
padding: 2px;
background-color: #fff;
}
/*-------------- Listen des Inhaltes werden gestaltet --------------*/
#content_main ul li {
overflow: hidden;
padding: 10px 0; /*oberer und unterer Innenabstand (10px) und linken und rechte abstand (0)*/
/*-------------------- Fußzeile wird gestaltet --------------------*/
#site_info {
clear: both;
/*background: url(../images/navihg.png) repeat;*/
background-position: center;
padding-bottom: 15px;
}
#site_info h4 {
text-indent: -9999px;
}
div#site_info {
text-align: center;
font-size: 0.7em;
line-height: 1.3em;
}
/*-------------------- Sonstiges --------------------*/
acronym {
cursor: help;
border-bottom: 1px dotted maroon;
}HTML
<div id="content_inline" >
<div class="clear">
<ul>
<li>1 oben</li>
<li>1 mitte</li>
<li>1 unten</li>
</ul>
<ul>
<li>2 oben</li>
<li>2 unten</li>
<li>2 unten</li>
</ul>
<ul>
<li>3 oben</li>
<li>3 mitte</li>
<li>3 unten</li>
</ul>
</div>
</div>MfG
mephisto2k
Hallo,
ich stehe vor einem kleinen Problem, ich möchte meine Website ohne Tabellenlayouts gestalten, weiß aber jetzt nicht mehr weiter.
Ich möchte eine unsortierte Liste so anordnen das Listeneinträge <li></li> untereinander jedoch Listen selbst <ul></ul> nebeneinander angeordnet werden.
Wie müsste also für folgende Liste der CSS Teil aussehen?
<ul>
<li>1 oben</li>
<li>1 unten</li>
</ul>
<ul>
<li>2 oben</li>
<li>2 unten</li>
</ul>
<ul>
<li>3 oben</li>
<li>3.1 oben</li>
<li>3.2 mitte</li>
<li>3.3 unten</li>
</ul>MfG
mephisto2k