• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

zu bewältigende Aufgabe :-(

A

anfängerin

Neues Mitglied
Hallo ihr Lieben, ist hier jemand dabei..der mir bei dieser Aufgabe helfen kann?? ich hab extrem keinen Durchblick (nicht mein Fachgebiet) und muss diese Aufgabe bewältigen. Vielleicht kann mir ja jemand von euch helfen. tausend dank
Aufgabe:
Schreibt in einer html-Datei zwei Listen, die Links enthalten.
Definiert in der CSS-Datei folgende Eigenschaften:
Erste Liste:
– Listenpunkte entfernen
– Schriftgröße 14px
– Schriftfarbe weiß
– Hintergrundfarbe der Listenpunkte schwarz
– Genügend Abstand zwischen den List-Items (per padding)
– Beim Überfahren mit der Maus wird der Hintergrund weiß, das List-Item bekommt
einen schwarzen 1px breiten Rahmen, die Schriftfarbe wird schwarz
Zweite Liste:
– Jeder Listenpunkt hat auf der linken Seite einen 15px breiten Rahmen in dunkelblau
– Hintergrundfarbe der Listenpunkte hellblau
– Rahmen oben, unten, rechts 2 px mit einem 3D-Effekt
– Abstand Schrift zu Rahmen 5px
– Schriftfarbe und Schriftgröße beliebig
– Beim Überfahren mit der Mouse soll der Rahmen auf der linken Seite orange werden. Wählt
für die Border den jeweils entgegengesetzten 3D-Effekt.
 
Also ich würde die sache dann in etwa so machen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Zwei Listen</title>
        <style type="text/css">
            #liste1 {
                list-style-type: none;
                font-size: 14px;
                color: #FFF;
                width: 200px;
            }
            
            #liste1 li {
                background-color: #000;
                padding-top: 3px;
                padding-bottom: 0px;
            }
            
            #liste1 li:hover {
                color: #000;
                background-color: #FFF;
                border: 1px solid #000;
            }
            
            #liste2 { width: 200px; }
            
            #liste2 li {
                border-left-width: 15px;
                border-left-style: solid;
                border-left-color: #009;
                background-color: #09F;
                border-top-width: 2px;
                border-right-width: 2px;
                border-bottom-width: 2px;
                border-top-style: solid;
                border-right-style: solid;
                border-bottom-style: solid;
                border-top-color: #069;
                margin-top: 5px;
                border-right-color: #0CF;
                border-bottom-color: #00F;
                padding: 5px;
            }
            
            #liste2 li:hover {
                border-left-width: 15px;
                border-left-style: solid;
                border-left-color: #F90;
                background-color: #09F;
                border-top-width: 2px;
                border-right-width: 2px;
                border-bottom-width: 2px;
                border-top-style: solid;
                border-right-style: solid;
                border-bottom-style: solid;
                border-top-color: #FF0;
                margin-top: 5px;
                border-right-color: #FF9;
                border-bottom-color: #F96;
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <ul id="liste1">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
        <ul id="liste2">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </body>
</html>

für weitere erläuterungen einfach fragen... :?: ich habs jetzt nur schnell nebenbei fertig gemacht :D
du müsstest jetzt nurnoch die hyperlinks in den li-tags reinmachen... auf die hab ich jetzt einfach mal großzügig verzichtet :twisted:
 
Danke :D:D

wow, vielen lieben dank. du glaubst gar nicht wieviel du mir damit geholfen hast ;) ich werd mir das direkt mal genauer angucken. bist du vielleicht zufällig gerade hier?? und kannst mir sagen, welche möglichkeiten es gibt css in eine html datei einzubinden (drei stichpunkte) ???? tausend dank :D:D

anfängerin schrieb:
Hallo ihr Lieben, ist hier jemand dabei..der mir bei dieser Aufgabe helfen kann?? ich hab extrem keinen Durchblick (nicht mein Fachgebiet) und muss diese Aufgabe bewältigen. Vielleicht kann mir ja jemand von euch helfen. tausend dank
Aufgabe:
Schreibt in einer html-Datei zwei Listen, die Links enthalten.
Definiert in der CSS-Datei folgende Eigenschaften:
Erste Liste:
– Listenpunkte entfernen
– Schriftgröße 14px
– Schriftfarbe weiß
– Hintergrundfarbe der Listenpunkte schwarz
– Genügend Abstand zwischen den List-Items (per padding)
– Beim Überfahren mit der Maus wird der Hintergrund weiß, das List-Item bekommt
einen schwarzen 1px breiten Rahmen, die Schriftfarbe wird schwarz
Zweite Liste:
– Jeder Listenpunkt hat auf der linken Seite einen 15px breiten Rahmen in dunkelblau
– Hintergrundfarbe der Listenpunkte hellblau
– Rahmen oben, unten, rechts 2 px mit einem 3D-Effekt
– Abstand Schrift zu Rahmen 5px
– Schriftfarbe und Schriftgröße beliebig
– Beim Überfahren mit der Mouse soll der Rahmen auf der linken Seite orange werden. Wählt
für die Border den jeweils entgegengesetzten 3D-Effekt.
Zum Vergrößern anklicken....
 
um die css in die html einzubinden, muisste einfach

HTML: 
<link rel="stylesheet" type="text/css" href="pfad/zum/stylesheet.css">

und danach kannst du halt ganz normal damit arbeiten. :mrgreen:
 
danke danke danke. und wenn du mir jetzt vielleicht noch folgendes beantworten kannst : wie oft darf man <h1id=dunkelblau">in einem html dokument verwenden? wie oft darf man <h1class="grosse schrift"> in einem html dokument verwenden?

sorryyyy ich studiere eigentlich kulturwissenschaften und muss diesen kurs eben absolvieren und hab da echt null plan :-// haha bewundere alle die es haben :D
 
danke :D :D :D ich lerne hier ja richtig. kannst du mir vielleicht noch drei eigenschaften nennen, die vererbt werden und drei die nicht vererbt werden?? und weißt du was mit einer kaskade gemeint ist? welche css angaben haben vorrang a) nach ursprung und b) nach spezifität????
 
Hehe, Hausaufgabe erledigt, Moderator html.de 1 setzen..... :mrgreen:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben