✔ iPhone optimierte Seite

[Flasher111]

hi@all,
ich bin zwar nicht neu bei Tutorials.de aber leider total neu in sachen css. Deshalb entschuldigt bitte wenn ich hier so manche Fremdwörte nicht verstehe^^.
Nun aber gleich zu meinem Problem:

Ich arbeite gerade an einer iPhone optimierten Seite. Den Grundaufbau hab ich auch schon (siehe Anhang) gemacht. Allerdings scheiterts an etwas. Und zwar würde ich das ABC in Abständen machen wollen und zwischen den Buchstaben wie z.B. A würden dann homepages wie Amazon usw. eingruppiert werden. Um das ganze besser zu erklären zu können hab ich euch mal eine kleines Bild gezeichnet, wie das ganze am ende aussehen soll. Problem liegt eher darin, dass ich nicht weiß wie ich zwischen den Feldern ein neues Feld erstellen kann, dass dann auch noch eine andere Farbe hat

Danke für euer Hilfen

 

[Maik]

Hi,

du kannst die Gruppierungen mit einer verschachtelten Liste organisieren:

<ul id="home" title="Home" selected="true">
    <li>4
         <ul>
             <li><a href="http://home.arcor.de/iphone747/4Players.html">4-Players</a></li>
         </ul>
    </li>
    <li>A
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Amazon.html">Amazon</a></li>
         </ul>
    </li>
    <li>C
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Chip.html">Chip</a></li>
         </ul>
    </li>
    <li>D
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Das%20%D6rtliche.html">Das Örtliche</a></li>
         </ul>
    </li>
    <li>E
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Ebay.html">Ebay</a></li>
         </ul>
    </li>
    <li>G
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Gamestar.html">Gamestar</a></li>
             <li><a href="http://home.arcor.de/iphone747/GMX.html">GMX</a></li>
             <li><a href="http://home.arcor.de/iphone747/Google.html">Google</a></li>
             <li><a href="http://home.arcor.de/iphone747/Gelbe Seiten.html">Gelbe Seiten</a></li>
             <li><a href="http://home.arcor.de/iphone747/Giga.html">GIGA</a></li>
         </ul>
    </li>
    <li>I
         <ul>
             <li><a href="http://home.arcor.de/iphone747/ICQ.html">ICQ</a></li>
         </ul>
    </li>
    <li>J
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Jamba.html">Jamba</a></li>
         </ul>
    </li>
    <li>L
         <ul>
             <li><a href="http://home.arcor.de/iphone747/LEO.html">LEO</a></li>
         </ul>
    </li>
    <li>M
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Musicradio.html">Musicradio</a></li>
         </ul>
    </li>
    <li>P
         <ul>
             <li><a href="http://home.arcor.de/iphone747/PC-Welt.html">PC-Welt</a></li>
             <li><a href="http://home.arcor.de/iphone747/PocketMovies.html">PocketMovies</a></li>
         </ul>
    </li>
    <li>S
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Seeqpod.html">Seeqpod</a></li>
         </ul>
    </li>
    <li>T
         <ul>
             <li><a href="http://home.arcor.de/iphone747/T-Mobile Hotspot.html">T-Mobile Hotspot</a></li>
         </ul>
    </li>
    <li>W
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Wikipedia.html">Wikipedia</a></li>
         </ul>
    </li>
    <li>Y
         <ul>
             <li><a href="http://home.arcor.de/iphone747/Yahoo.html">Yahoo</a></li>
             <li><a href="http://home.arcor.de/iphone747/Yahoo! Go.html">Yahoo! Go</a></li>
         </ul>
    </li>
</ul>

und das dazugehörige Stylesheet lautet dann:

body > ul, body > ul > li > ul {
list-style:none;
margin:0;
padding:0;
}

body > ul > li {
background:#C5CCD3;
border-bottom: 1px solid #E0E0E0;
font-size: 20px;
font-weight: bold;
}

body > ul > li > ul > li {
border-bottom: 1px solid #E0E0E0;
background: #fff url(iPhoneArrow.png) no-repeat right center;
font-size: 20px;
font-weight: bold;
}

body > ul > li > ul > li > a {
    display: block;
    padding: 8px 32px 8px 8px;
    text-decoration: none;
    color: inherit;
}

 

[Flasher111]

hi Maik,
tausend Dank für deine schnelle und perfekte Lösung.