Neuaufbau einer Hompage

[goefi-chiangmai]

Das geht bei diesem Untermenü leider nicht bei npage, ausser du würdest für jedes Untermenüpaket eine eigenen Style erstellen

[Eragon-02]

okay dann halt so wie auf ihrer seite

[goefi-chiangmai]

Ok fangen wir an, und machen es so einfach wie möglich!

SCHRITT 1

In deiner CSS musst du bei der ID Navigation eine Class machen, das ist einfach das # auswechseln mit einem .

Vorher

Code: Alles auswählen

#navigation a {
background:url("http://file2.npage.de/011827/41/bilder/13.png") no-repeat;
width:150px;
height:50px;
display:block;
padding-left:22px;
margin:2px 0;
font-size:14px;
color: #333333;
text-decoration:none;
line-height:45px;
}

#navigation a:hover {
background-position:0 bottom;  
}

Zusätzlich noch eine neue Klasse dazu (direckt darunter), für die Untermenüs, ich bennenne sie einfach Navigation2

Beide zusammen (habe Dir bereits die grösse und alles eingegeben, kannst ja austauschen)

Code: Alles auswählen

.navigation a {
background:url("http://file2.npage.de/011827/41/bilder/13.png") no-repeat;
width:150px;
height:50px;
display:block;
padding-left:22px;
margin:2px 0;
font-size:14px;
color: #333333;
text-decoration:none;
line-height:45px;
}

.navigation a:hover {
background-position:0 bottom;  
}

.navigation2:link, A.menulink:visited, A.menulink:active { 
background:none; 
width:150px; 
height:28px; 
display:block; 
padding-left:22px; 
margin:2px 0;
font-size:14px; 
color: #333333;
text-decoration:none; 
line-height:28px;
}

a.navigation2:hover { 
background-position:0 bottom;  
}

Danach müssen wir änderungen machen im HTML Teil (Design Header)

an der Stelle wo Steht

Code: Alles auswählen

<div id="navigation">

Musst du ersetzen in class

Code: Alles auswählen

<div class="navigation">

--------------------------------------
CACHE leeren und gucken, dann sollte mal wieder alles funktionieren wie bisher, mach mal diese Vorbereitung soweit und dann kommen wir zum Untermenu

[Eragon-02]

Okay Habe ich soweit

Code: Alles auswählen

body {
margin:0;
font:12px Tahoma;
color:black;
background:url("http://file2.npage.de/011827/41/bilder/bg1001.jpg") 50% 0 #151921 fixed;
}
 
#ev_bg {
background:url("http://file2.npage.de/011827/41/bilder/ev_bg.png") repeat-y;
width:1064px;  
margin:0px auto;
}

#everything {
width:1000px;
margin:0 32px;  
background:url("http://file2.npage.de/011827/41/bilder/parchment-light2.jpg");
border:1px solid black;
border-width:0px 0px;
}

#header {
height:176px;
background:url("http://file2.npage.de/011827/41/bilder/wow_header.gif") right no-repeat;
padding:0 20px;
}

#header h1 {
padding-top:115px;
margin:0;
color: #333333;
}

#middle {
clear:both;
background:url("../bilder/border-red.gif") repeat-x;
padding:20px 10px;
}  
  
#left_column {
width:160px;
float:left;
}

.navigation a {
background:url("http://file2.npage.de/011827/41/bilder/13.png") no-repeat;
width:150px;
height:50px;
display:block;
padding-left:22px;
margin:2px 0;
font-size:14px;
color: #333333;
text-decoration:none;
line-height:45px;
}

.navigation a:hover {
background-position:0 bottom;  
}

.navigation2:link, A.menulink:visited, A.menulink:active {
background:none;
width:150px;
height:28px;
display:block;
padding-left:22px;
margin:2px 0;
font-size:14px;
color: #333333;
text-decoration:none;
line-height:28px;
}

.navigation2 a:hover {
background-position:0 bottom;  
}

#middle_column {
float:left;
width:78%;
margin:0px 20px;
}

.post {
background:url("../bilder/parchment-light3.jpg");
border:1px solid #545454;
margin-bottom:35px;
line-height:18px;
}

.post h1 {
background:url("http://file2.npage.de/011827/41/bilder/title-gold_2.png") repeat-x #0d2368;
padding:2px 10px;
margin:0;
font-size:15px;
color:white;
}

.post_body {
padding:5px 15px;
}

ul {
margin:20px; padding:10px;
}

li {
list-style:none;
background:url("../bilder/bullet.gif") 0 5px no-repeat;  
padding-left:30px; line-height:25px;  
}

#right_column {
width:25%;
float:left;
}

.box {
background:url("../bilder/parchment-light3.jpg");
border:1px solid #545454;
margin:0;
padding:10px;
}

#footer {
clear:both;
padding:20px
}

#subnav { margin:10px 0;}  
#subnav a { color:#7A0C0C; }
#subnav a:hover { color:#E51414 }

.copyright {
font-size:10px;
color:#666666;
}

.copyright a{
text-decoration:none;
color:#666666;
}

[goefi-chiangmai]

Ok gut!

Jetzt weiter in deinem HTML (Design Header)
Da Du es ja zimmlich schnell begreifst, lass ich mir lange Worte, sonnst nachfragen!

Hier ist eine Gruppe von Untermenüs baue Sie einfach mal zwischen 2 links rein!

Code: Alles auswählen

<!--Anfang Untermenuegruppe 1-->
<a target="_self" href="javascript:untermenu('untermenu1');">Untermenü</a>
<div id="untermenu1" style="display: none">

<a class="navigation2" href="#">Link 1</a>
<a class="navigation2" href="#">Link 2</a>
<a class="navigation2" href="#">Link 3</a>
<a class="navigation2" href="#">Link 4</a>

</div>
<!--Ende Untermenuegruppe 1-->

Will trozdem noch was kürz erklären:
im link muss immer class="navigation2" stehen, da diese klasse ja keine Grafik hat und der link anders Aussieht

Falls Du eine 2. gruppe machst, musst du das Untermenü anders Betitteln (ein name darf nur einmal vorkommen), sonnst weiss das Javascript nicht welche datei es öffnen soll!
<a target="_self" href="javascript:untermenu('untermenu1');">Untermenü</a>
<div id="untermenu1" style="display: none">

[Eragon-02]

also so ? und dann die seiten zu weisen ?

Code: Alles auswählen

<!--Anfang Menupunkte-->
<a href="../willkommen.html">Willkommen</a>
<a href="../ueber-mich.html">Über Mich</a>
<a href="../freunde.html">Freunde</a>
<a href="../drachen-sprueche.html">Drachen Sprüche</a>
<a href="../drachen-bilder.html">Drachen Bilder</a>
<a href="../download-ecke.html">Download Ecke</a>
<a href="../guestbook.html">Gästebuch</a>
<a href="../test.html">Test</a>
<!--Ende Menupunkte-->
<!--Anfang Untermenuegruppe 1-->
<a target="_self" href="javascript:untermenu('untermenu1');">Untermenü</a>
<div id="untermenu1" style="display: none">
<a class="navigation2" href="#">Link 1</a>
<a class="navigation2" href="#">Link 2</a>
<a class="navigation2" href="#">Link 3</a>
<a class="navigation2" href="#">Link 4</a>
</div>
<!--Ende Untermenuegruppe 1-->

[goefi-chiangmai]

Fast Richtig, das ende Menüpunkte kommt darunter wenn es richtig Beschriftet haben möchtest
Link setzten wie üblich!


Beispiel so:

Code: Alles auswählen

<!--Anfang Menupunkte-->
    <a href="../willkommen.html">Willkommen</a>
    <a href="../ueber-mich.html">Über Mich</a>
    <a href="../freunde.html">Freunde</a>
    <a href="../drachen-sprueche.html">Drachen Sprüche</a>

    <!--Anfang Untermenuegruppe 1-->
    <a target="_self" href="javascript:untermenu('untermenu1');">Untermenü</a>
    <div id="untermenu1" style="display: none">
    <a class="navigation2" href="#">Link 1</a>
    <a class="navigation2" href="#">Link 2</a>
    <a class="navigation2" href="#">Link 3</a>
    <a class="navigation2" href="#">Link 4</a>
    </div>
    <!--Ende Untermenuegruppe 1-->

    <a href="../drachen-bilder.html">Drachen Bilder</a>
    <a href="../download-ecke.html">Download Ecke</a>
    <a href="../guestbook.html">Gästebuch</a>
    <a href="../test.html">Test</a>
    <!--Ende Menupunkte-->

[Eragon-02]

ja ich habe es ihn bekommen jezt

Code: Alles auswählen

<!--Anfang Menupunkte-->
<a href="../willkommen.html">Willkommen</a>
<a href="../ueber-mich.html">Über Mich</a>
<a href="../freunde.html">Freunde</a>
<a href="../drachen-sprueche.html">Drachen Sprüche</a>
<a href="../drachen-bilder.html">Drachen Bilder</a>
<a href="../download-ecke.html">Download Ecke</a>
<a href="../guestbook.html">Gästebuch</a>
<a href="../test.html">Test</a>
<!--Ende Menupunkte-->
<!--Anfang Untermenuegruppe 1-->
<a target="_self" href="javascript:untermenu('untermenu1');">Kramkiste</a>
<div id="untermenu1" style="display: none">

<a class="navigation2" href="/kramkiste-1.html">Kramkiste 1</a>
<a class="navigation2" href="/kramkiste-2.html">Kramkiste 2</a>
<a class="navigation2" href="#">Kramkiste 3</a>
<a class="navigation2" href="#">Kramkiste 4</a>

</div>
<!--Ende Untermenuegruppe 1--> 

Kann ich das jezt so lasen ? wenn ja
wie kann mann die schrift art im Buton ändern bzw wo mach ich das

[goefi-chiangmai]

Ja aber nimm das ganz nach unten dann ist es richtig Beschriftet, Falls wieder was änderst

Code: Alles auswählen

<!--Ende Menupunkte-->

Naschtrag:

Schrift kannst in der CSS ändern unter .navigation2 genau gleich wie es unter .navigation ja bereits gemacht hast, sonnst gehst in diesem Thema mal etwa 3 seiten zurück und liesst alles nach

[Eragon-02]

wir haten nur die frabe gemacht
an der stele

Code: Alles auswählen

  text-decoration:none; 

die schrift austauchen und mit welchen befehl veranda zbs ?

Code: Alles auswählen

.navigation2:link, A.menulink:visited, A.menulink:active {
background:none;
width:150px;
height:28px;
display:block;
padding-left:22px;
margin:2px 0;
font-size:14px;
color: #333333;
text-decoration:none;
line-height:28px;