Ergebnis 1 bis 6 von 6

Thema: CSS Einsteiger

  1. #1
    ROG
    Gast

    Standard CSS Einsteiger

    Guten Abend,

    wie schon im Titel erwähnt versuch ich mein ersten Gehversuche mit CSS. Ich möchte eine Navileiste erstellen, für diese hab ich mir den HTML-Code und den dazu passenden CSS-Code heruntergeladen. Diese Navileiste würde ich nun gerne in meine Hompage einbetten, leider wird aber nur der blanke Text angezeigt und die Bilder wollen sich nicht zeigen^^.

    Hier mein Hompage Ordner Aufbau:

    [] Blog (wird automatisch über die URL aufgerufen, muss meines wissens also nicht mehr bei der Verlinkung in der CSS-Datei angegeben werden)
    -> folgende Dateien befinden sich in diesem Ordner:

    [] images (dieser Ordner enthält die Bilder für die Navi leiste)
    - dropdown-menu.css (dies ist der CSS code für die Navileiste)
    - index.html (hier habe ich den HTML Code für die Navileiste drin)

    Hier der CSS Code:
    #navigation {
    margin:0;
    padding: 0;
    clear:both;
    width:950px;
    height:51px;
    background: #d6eaf8 url(http://test.rogfrog.com/images/dropdown-bg.gif) repeat-x left top;
    }


    ul.nav-main,
    ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
    }


    ul.nav-main {
    position: relative;
    z-index: 597;
    }

    ul.nav-main li:hover > ul {
    visibility: visible;
    }


    ul.nav-main li.hover,
    ul.nav-main li:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(http://test.rogfrog.com/images/dropdown-bg-hover.gif) repeat-x left top;
    }



    ul.nav-main li {
    float:left;
    display:block;
    height: 51px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    background: url(http://test.rogfrog.com/images/separator.gif) no-repeat right center;
    }

    ul.nav-main li a {
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #999;
    font: 14px Arial, Helvetica, sans-serif;
    text-decoration:none;
    }

    ul.nav-main li a:hover {
    color:#D6D6D6;
    }



    ul.nav-main *.list {
    padding-right: 22px;
    background: url(http://test.rogfrog.com/images/navigation-arrow.gif) no-repeat right top;
    }



    ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(http://test.rogfrog.com/images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    }


    ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:145px;
    border-bottom: 1px solid #5a5a5a;
    background: none;
    }

    ul.nav-sub li a {
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Arial, Helvetica, sans-serif;
    }



    Und Hier der HTML-Code der Index.html-Datei
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="de-ch">
    <head>
    <meta content="text/html;charset=ISO-8859-1"
    http-equiv="Content-Type">
    <title>ROGFROG Blog</title>
    <meta content="ROG" name="author">
    <meta content="Der Blog für zwischendurch!"
    name="description">
    </head>
    <body>
    <br>
    <br>
    <ul id="navigation" class="nav-main">
    <li><a href="http://test.rogfrog.com/">Home</a></li>
    <li class="list"><a href="#">Freebies</a>
    <ul class="nav-sub">
    <li><a href="http://test.rogfrog.com/">Backgrounds</a></li>
    <li><a href="http://test.rogfrog.com/">Buttons</a></li>
    <li><a href="http://test.rogfrog.com/">Graphics</a></li>
    <li><a href="http://test.rogfrog.com/">HTML
    &amp; CSS</a></li>
    <li><a href="http://test.rogfrog.com/">Icons</a></li>
    <li><a href="http://test.rogfrog.com/">PSD</a></li>
    <li><a href="http://test.rogfrog.com/">Templates</a></li>
    <li><a href="http://test.rogfrog.com/">Tutorials</a></li>
    </ul>
    </li>
    <li class="list"><a href="#">About</a>
    <ul class="nav-sub">
    <li><a href="http://test.rogfrog.com/">About
    PSDGraphics</a></li>
    <li><a href="http://test.rogfrog.com/">Commercial
    Use</a></li>
    <li><a href="http://test.rogfrog.com/">Terms
    Of Use</a></li>
    </ul>
    </li>
    <li><a href="http://test.rogfrog.com//">Advertise</a></li>
    <li><a href="http://test.rogfrog.com/">Contact</a><img
    src="chrome://editor/content/images/tag-comment.gif"><!-- Kommentar: LOGO Start --></li>
    </ul>
    <div style="text-align: center;"><img
    style="width: 800px; height: 165px;" alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/ROGFROGBlogLogo.png"><!-- Kommentar: LOGO Start END --><!-- Kommentar: Intro Start -->
    <div style="text-align: center;"><img
    style="width: 800px; height: 392px;" alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/rogfrogintrobild.png"><!-- Kommentar: Intro END --><!-- Kommentar: mobil Blog Start -->
    <div style="text-align: center;"><a
    href="http://m.rogfrog.com/"><img
    style="border: 0px solid ; width: 800px;"
    alt="ROGFROG Blog Logo.png"
    src="http://test.rogfrog.com/thenewblogforyour.png"></a><!-- Kommentar: mobil Blog END --></div>
    </div>
    </div>
    </body>
    </html>


    Ich würde mich über hilfreiche Antworten sehr freuen =)



    Mit freundlichen Grüssen
    Euer ROG
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: CSS Einsteiger

    Du hast die CSS-Datei nicht mit dem HTML-Code verbunden.

  3. #3
    ROG
    Gast

    Standard AW: CSS Einsteiger

    Vielen Dank für die schnelle Antwort.

    Verbinde ich die CSS-Datei nicht hier:

    <ul id="navigation" class="nav-main">

    mit der HTML-Datei?
    Falls nein, wie und wo müsste ich die verbinden?^^ Wie schon gesagt versuch mich zum Erstenmal darin.

  4. #4
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: CSS Einsteiger

    Im Head

    HTML-Code:
    <html>
    <head>
    <link href="pfad zur css/dateiname.css" rel="stylesheet" type="text/css">
    <title>Titel</title>
    </head>
    <body>
    </body>
    </html>


  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS Einsteiger

    Siehe auch hier Ziffer 2

  6. #6
    ROG
    Gast

    Standard AW: CSS Einsteiger

    Yeaaa funktioniert ja prima - vielen Dank für eure schnelle und kompetente Hilfe =)


    Ich wünsche euch noch einen schönen Abend




    Mit freundlichen Grüssen

    Euer ROG

Ähnliche Themen

  1. Einsteiger Gamer PC
    Von Thonixx im Forum Computer - Internet Forum
    Antworten: 8
    Letzter Beitrag: 09.08.2010, 23:32
  2. PHP - Einsteiger Problem
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 27.10.2009, 13:36
  3. cms für einsteiger?
    Von onas im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 09.05.2007, 18:09
  4. hilfe für einsteiger
    Von Basti_rhr im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 15.08.2006, 15:33
  5. Bin ein einsteiger: Hilfe
    Von Maoukil im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 01.04.2006, 20:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •