Antworten zum Thema „NavigationProblem“

andy1189 · 10.11.2009

Haii

ich bin neu hier im Forum und newbi in Sachen Photoshop cs3!
Um mal kurz mein Problem zu erklären: ich möchte für mich/meine freundin/freunde/familie eine Homepage machen und bin hier auf tolle Tutorials gestoßen wo ich auch soweit alles verstanden habe, nur nen kleinen hänger hab und hoffe ihr könnt mir weiterhelfen

Ich setzte die erstellte Ebene mit den Buttons genau drunter, damit die Buttons beim draufklicken ne helle Farbe bekommen, Bild von 1 Button hab ich eingefügt damit ihr des mal seht^^ Nun die Buttons auswählen mit slices und nun weiß ich net weiter:'( Ich speicher die Navileiste für webgeräte und da soll ich nen webbalken in die mitte setzen?
Wisst ihr was damit gemeint ist??

Freundliche Grüße aus Nürnberg

masterluke77 · 10.11.2009

AW: NavigationProblem

Slice deine HP in Photoshop und dann machst du mit einem Html Editor wie Dreamweaver zb. die passenden CSS Sachen dazu. Alles andere ist keine gute Lösong und ich wusste ehrlich nicht, das man mit PS RollOver Navis zaubern kann.. Dafür gab es mal ImageReady und Fireworks meine ich..

Wie gesagt, PS-Datei in Html und Bilder speichern und dann der Navi das CSS zuweisen...
in etwa so:

stylesheet.css

Code:

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#333333 url("images/seperator.gif") bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #2580a2 url("images/hover.gif") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }

der Html Code dazu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style media="all" type="text/css">@import "menu/stylesheet.css";</style>
<div class="menu">
<ul>
<li><a href="" target="_self" >Link1</a>
<ul>
<li><a href="" target="_self">CSS2</a></li>
<li><a href="" target="_self">Css2.0</a></li>
<li><a href="" target="_self">Fertig</a></li>
</ul>
</li>
</ul>
</div>
bilder müsstest du mit deinen austauschen.. so würde ich es jedenfalls machen..

Gruss

MasterLuke