Ergebnis 1 bis 5 von 5

Thema: Hilfe bein Menü

  1. #1
    HTML Newbie
    Registriert seit
    06.02.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hilfe bein Menü

    Hallihallo ich bräuchte im Moment etwas Hilfe beim erstellen des Menüs. Ich bin noch Anfänger, hab aber soweit erstmal alles an seinem Platz, jetzt gehts mit dem Menü weiter, aber ich bekomme es einfach nicht hin, hab schon einiges ausprobiert, aber irgendwie hängts bei mir. Vielleicht kann mir ja jemand von euch helfen, ich erkläre mal kurz was ich vor habe.
    Das Menü soll position: fixed sein, oben am Rand und zentriert und sich beim verkleinern und vergrößern des Browsers parallel mit vergrößern.
    Die Menübuttons habe ich als PNG, die Schrift ist in den Bildern schon eingebettet.
    Ich habe 3 verschidene Bilder
    1x weiße Schrift= nicht offene Seiten
    1x gelbe Schrift = gerade offene Seite
    1x Schrift weiß+ gelbe Umrandung = Hover

    Mein Problem, ich weiß nicht wie ich das Menü erstellen muss bzw. wie html und css dazu aussehen müssen.
    Sollte man alle buttons einzeln machen oder kann man alle buttons als eine grafik einfügen und dann den jeweiligen Button irgendwie markieren?
    Wäre über Hilfe sehr dankbar

    nav.png
    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 !!!!!
    Geändert von s123i (06.02.2015 um 19:04 Uhr)

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    06.02.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hilfe bein Menü

    Das Menü hab ich jezt erstmal irgendwie hin bekommen, sodas es zumindest zu sehen ist.

    1. Ich weiß aber nicht wo ich die Angaben machen muss um die Grafiken zu verkleinern, da die Buttons noch viel zu groß sind und
    2. ich habe keinen Plan wo ich was ändern oder hinzufügen muss um Abstände zwischen den Buttons zu bekommen und
    3. wenn ich die seite minimiere oder maximiere bleibt das menü nicht zentriert, liegt warscheinlich daran, das ich margin-left: 130px; habe, aber wie bekomm ich nun das ganze ding zentriert?
    weiß einer rat?
    Und Bitte nicht meckern, ich bin echt noch Anfänger und google mir schon die Finger wund, aber irgendwie klappt das alles nicht oder ich steh aufm Schlauch.

    ue.jpg

    HTML-Code:
    <!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>
    
    <title>Hier name der Seite</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta name="keywords" content="suchbegriffe..............................."/>
    <meta name="content-language" content="de"/>
    <meta name="robots" content="index, follow"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/javascript" src="..."></script>
    <style type="text/css">.auto-style2 { margin-left: 0px; } </style>
    
    </head>
    
    
    
    <body>
    
        
        <div id="nav">
        <ul id="navigation">
            <li id="aktuell"><a class="home" href="index.html"></a></li>
            <li ><a class="about" href="about.html"></a></li>
            <li ><a class="shop" href="shop.html"></a></li>
            <li ><a class="blog" href="blog.html"></a></li>
        </ul>
        </div>      
                          
        <div id="footer"></div>
        
        
        <div id="text_middle_eckig">orem ipsum dolor sit amet, consectetuer adipiscing elit.
            Integer tempus malesuada pede. Aliquam vel nibh.Donec rutrum venenatis dui. Pellentesque et arcu. Suspendisse lectus. 
            Aliquam metus. Morbi turpis arcu,egestas congue, condimentum quis, tristique cursus, leo.
            Praesent aliquet, neque pretium congue mattis, ipsum
            nibh.Donec rutrum venenatis dui. Pellentesque et arcu. Suspendisse lectus. 
            Aliquam metus. Morbi turpis arcu,egestas congue, condimentum quis, tristique cursus, leo.
            Praesent aliquet, neque pretium congue mattis, ipsum laoooolaaa
            blsjrjd ejjerjke dkek ekkeme ekek dekd ekeker e jsksd ö äqiwi d<br/ >
            <hr></hr>
            <b>Steffi Krause</b>
          </div>
         
     
    </body>    
    
    
    </html>

    Code:
    html, body {
        
        height: 100%;
        background-color: #000000;
        background-image: url('img/background2.png');
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center;
        background-attachment: fixed;
        z-index: 1;
        
        font-family: 'Arial';
        color: #000000;
        font-size: 13px;
        text-align: justify;
    }
    
    
    
    /* NAVIGATION POSITION */
    
    #navigation {
    
        margin-left: 130px;
        position: fixed;
        text-align: center;
    }
     
    #navigation li {
    
        float: left;
    }
    
    #navigation li a {
    
        background-image: url('img/nav_sprites.png');
        display: block;
        
    }
    
    .home {
        
        background-position: 0px 0px;
        width: 243px;
        height: 70px;
    }
     
    .about {
        
        background-position: -243px 0px;
        width: 243px;
        height: 70px
    }
     
    .shop {
    
        background-position: -486px 0px;
        width: 243px;
        height: 70px
    }
     
    .blog {
    
        background-position: -729px 0px;
        width: 243px;
        height: 70px
    }
    
    
    
    /* NAVIGATION HOVER */
    
    #navigation a hover {
        
        background: url('img/nav_sprites.png') no-repeat;
        display: block;
    }
         
    #navigation a.home:hover {
        
        background-position: -0px -70px;
    }
    
    #navigation a.about:hover{
        
        background-position: -243px -70px;
    }
        
    #navigation a.shop:hover {
        
        background-position: -486px -70px;
    }
        
    #navigation a.blog:hover {
        
        background-position: -729px -70px;
    }
        
    
    
    /* NAVIGATION ACTIVE */  
    
    #navigation a active {
        
        background: url('img/nav_sprites.png') no-repeat;
        display: block;
    }
         
    #navigation a.home:active {
        
        background-position: -0px -140px;
    }
    
    #navigation a.about:active {
        
        background-position: -243px -140px;
    }
    
    #navigation a.shop:active {
        
        background-position: -486px -140px;
    }
        
    #navigation a.blog:active {
        
        background-position: -729px -140px;
    }
        
    
    
    /* NAVIGATION AKTUELL OFFENE SEITE (in jeder einzelner HTML abändern*/
    
    #navigation #aktuell a {
        
        background: url('img/nav_sprites.png') no-repeat;
        display: block;
    }
         
    #navigation #aktuell a.home {
        
        background-position: -0px -140px;
    }
    
    #navigation #aktuell a.about {
        
        background-position: -243px -140px;
    }
    
    #navigation #aktuell a.shop {
        
        background-position: -486px -140px;
    }
    
    #navigation #aktuell a.blog {
        
        background-position: -729px -140px;
    }
    
    
    
    /* FOOTER */
        
    #footer {
    
        background-image: url('img/footer.png');
        background-repeat: no-repeat;
         background-position: center;
         background-size: auto 100%;
         position: fixed;
         float: none;
         bottom: 0px;
         left: 0px;
          width: 100%;
         height: 222px;
         z-index: 3;
    }
    
    
    
    /* TEXT MITTE AUF HOME/INDEX SEITE */
    
    #text_middle_eckig {
        
        position: relative;
        margin: 0 auto;
        padding-top: 11px;
        padding-left: 11px;
        padding-right: 11px;
        padding-bottom: 13px;
        top: 120px;
        width: 710px;
        height: 126px;
        background-color: rgb(243, 231, 200);
        z-index: 2;
        
        -moz-border-radius: 0px 15px; /* Firefox */
        -webkit-border-radius: 0px 15px; /* Chrome, Safari */
        khtml-border-radius: 0px 15px; /* Konqueror */
        border-radius: 0px 15px; /* CSS3 */
        behavior: url(border-radius.htc); /* Internet Explorer */ 
        
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-rule: 1px dotted #999;
        -webkit-column-rule: 1px solid #999;
        column-rule: 1px solid #999;
    }

  3. #3
    Bandit
    Gast

    Standard AW: Hilfe bein Menü

    Poste bitte einen Link zur Seite, damit man sich das ansehen kann. Da uns die erforderlichen Images fehlen, kann man das nicht nachvollziehen.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    06.02.2015
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hilfe bein Menü

    Die ist noch nicht online

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Hilfe bein Menü

    Mal so als Beispiel.
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <title>Hover</title>
    <meta charset="UTF-8">
    <style>
    
    * {
     margin:0;
     padding:0;
     list-style:none;
     border:none;
     outline:none;
     box-sizing:border-box;
    }
    header {
     position:fixed;
     height:70px;
     width:80%;
     top:0;
     left:0;
     right:0;
     margin:auto;
     background: #aaa;
    }
    
    nav ul {
     position:relative;
     float:left;
     width:100%;
    }
    
    nav li {
     float: left;   
     width:25%;
    }
    
    nav li a {
     background:url(deinbild.jpg) no-repeat center #ada;
     height:70px;
     display: block;
     text-align:center;
    }
    
    #text_middle_eckig {
     background:#ada;
     width:80%;
     margin:100px auto 0 auto;
    }
    </style>
    </head>
    <body>
     <header>   
        <nav>
        <ul>
            <li><a class="home" href="index.html">Home</a></li>
            <li><a class="about" href="about.html">Ich</a></li>
            <li><a class="shop" href="shop.html">Shop</a></li>
            <li><a class="blog" href="blog.html">Blog</a></li>
        </ul>
        </nav>      
     </header>                     
    <div id="text_middle_eckig">Lorem ipsum dolor sit amet, .....
    </div>
    </body>
    </html>
    Geändert von djheke (08.02.2015 um 01:12 Uhr)

Ähnliche Themen

  1. problem bein Gta SanAndreas
    Von im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 03.04.2008, 19:10
  2. Bild bein Mausberührung spiegeln
    Von Smoz im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 30.05.2007, 23:30
  3. Bein Bruch
    Von Gastilein Sandra im Forum Off Topic und Quasselbox
    Antworten: 7
    Letzter Beitrag: 20.04.2005, 18:07
  4. Hilfe bein Foto Script
    Von famly im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 15.12.2004, 12:29
  5. Probleme bein starten von NFSU
    Von Drivehopper im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 02.11.2004, 16:42

Stichworte

Berechtigungen

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