Hover Effekt in Bild "Area"

explanator

Den Doctype, erste Zeile bitte auch noch ändern in !doctype html mehr nicht in spitzen Klammern. Der Editor verschluckt das hier, deshalb war der nie zu sehen.

Nächster Schritt. Aufteilung der Seite in Sektoren oder Blöcke, ganz wie man will.
Man erkennt ja schon das du einen Kopfbereich hasst und einen unteren Teil, nennen wir ihn mal Hauptteil.
Einen Fussbereich hat deine Seite nicht.

Das heisst wir haben 2 divs.
header und main
header ist ja schon vorhanden und kann bleiben.
div main werden erstellen.

TiBo007

Geändert.
Brauche ich einen Fußbereich?

Die Boxen auf der rechten Seite brauchen keinen eigenen Sektor?

explanator

Ob du einen Fussbereich brauchst, weiss ich nicht, liegt an dir.

Der Mainbereich beginnt also unterhalb des Headers und den fügen wir jetzt ein.

Du hast

HTML

<div id="hauptfenster"></div>
<div id="header">


<div id="header-links">


    <img src="http://file1.npage.de/008939/32/bilder/maus-logo.png" border="0"></div>


  <div id="header-rechts">


    <img src="http://file1.npage.de/008939/32/bilder/logo2.png" border="0"></div>




 <div id="navi">

Alles anzeigen

Daraus wird:

HTML

<div id="header">
    <div id="header-links">
        <img src="http://file1.npage.de/008939/32/bilder/maus-logo.png" border="0">
    </div>
    <div id="header-rechts">
        <img src="http://file1.npage.de/008939/32/bilder/logo2.png" border="0">
    </div>
</div>


<div id="main">


    <div id="navi">

Alles anzeigen

und da wir ein div zusätzlich geöffnet haben, müssen wir das auch wieder schliessen. Dazu fügst du am Ende vor dem body ein schliessendes div ein.
So dass das dann so aussieht:

HTML

</div>
</body> 
</html>

somit haben wir jetzt den Block Main erstellt.

TiBo007

Jetzt ist die Navigation weg Weil div=Navi und div=Main übereinander liegen?

explanator

Die kommt schon wieder, das liegt an den konfusen Einstellungen im CSS.
Erstmal das HTML in Ordnung bringen.

Ab div main bitte das komplette Navi austauschen, hier kommt die korrekte Version:

HTML

<div id="main">


<div id="navi">
    <h3 class="headernavi">Navigation</h3>  
    <ul>          
        <li><a href="">Home</a></li>            
        <li><a href="">Die Ausgaben</a></li>               
        <li><a href="">Über das Magazin</a></li>              
        <li><a href="#">Chefredakteure</a>            
            <ul>                    
                <li><a href="l">Poldi</a></li>                    
                <li><a href="">Teo</a></li>                    
                <li><a href="">Smarty</a></li>                    
                <li><a href="">Marsi</a></li>                
            </ul>                
        </li>            
        <li><a href="" target="_blank">Nagerspiele</a></li>    
        <li><a href="">Klein und Smart TV</a></li>  
        <li><a href="">Ideen</a></li>   
        <li><a href="" target="_blank">Forum</a></li>   
        <li><a href="">Interessante Links</a></li>
    </ul>
</div>

Alles anzeigen

TiBo007

Da hat sich doch jetzt nichts geändert, oder habe ich da was übersehen?

explanator

Da hast du was übersehen ul h3 ausserhalb etc.

TiBo007

Ah, stimmt jetzt sehe ich es. Was bringt denn <ul>, wenn ich fragen darf?

synaptic

ul ist eine unordered list, sprich eine liste mit aufzählungspunkten statt zahlen, buchstaben, bauklötze oder sonstwas, das man zum zählen nutzen könnte.
in eine ul oder eine ol gehören nur LI- elemente und sonst nichts

TiBo007

Ah gut, dass heißt ul kommt immer zusammen mit li. li sind dann die "Stichwortpunkte" neben den einzelnen Wörtern in der Navigationsbar?

explanator

'So wir sind bald durch.

Als nächstes bitte alles löschen vom letzten schliessenden div der navi bis zum Ende.

HTML

<li><a href="">Interessante Links</a></li>     
</ul> 
</div>


<-- ab hier alles nach unten löschen  -->

und dann das hier einfügen:

HTML

<div id="aside">
            <h3>News:</h3>
            <div id="infobox">
                <p>Wir sind offiziell eine Kooperation mit dem Portal "degupedia.de" eingegangen. Alle weiteres Informationen gibt es dann in der Januar-Ausgabe! Schaut gerne schonmal im Forum vorbei, ihr findet den Link in der Navigation.
                </p>
                <p>Nimm an unserem <a href="https://www.facebook.com/groups/147206222001603/?fref=ts">Facebook-Gewinnspiel</a> teil und gewinne einen Gutschein im Wert von 15,-€ für 'die-nager-kueche.com'
                </p>          
            </div>
            <div id="infobox">
                <p>
                    <a href="https://www.facebook.com/groups/147206222001603/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Facebook_icon.svg" alt="Facebook" width="100" height="100"></a>
                </p>
            </div>
        </div>

        <div id="content">
            <img alt="Regal" src="http://file1.npage.de/010182/58/bilder/regaljanuar.png">
        </div>

    </div>
  </body>
</html>

Alles anzeigen

TiBo007

Habe ich gemacht. Den letzten Teil über das Regal sollte ich aber nicht übernehmen, da dieses ja nur auf eine Seite soll und die Datei, die wir gerade bearbeiten sich auf alle Seiten bezieht, oder?

explanator

Ok wenn du das als Vorlage haben willst hast du recht, aber für die Willkommensseite brauchst du das dann wieder, da muss ja noch die Hoveränderung dran.
Mach es erst mal so damit man ein Ergebnis sieht.

Die CSS-Datei bitte komplett ersetzen durch diese hier:

Code

body {
    margin: 0;
    background-color: white;
    min-width: 1115px;
}
#header {
    height: 130px;
    background: rgb(181,234,19);
    width: 100%;
    moz-border-radius: 50px;
    border-radius: 50px;
    khtml-border-radius: 50px;
}
#header-links {
    height: 130px;
    float: left;
    margin-left: 50px;
}
#header-rechts {
    float: right;
    height: 130px;
    margin-right: 50px;
}
#main {
    padding: 20px 10px;
}
#aside {
    float: right;
    width: 200px;
}
#infobox {
    background-color: #b5ea13;
    padding: 5px;
    text-align: center;
    border: 3px double black;
    margin-bottom: 5px;
}
#infobox > a {
    text-align: center;
}
#content {
    background-color: white;
    width: 720px;
    margin: 0px auto;
    padding: 2%;
}
#navi {
    float: left;
    width: 180px;
}
#navi li ul {
    display: none;
    margin-top: 2px;
}
#navi li a:hover {
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_2.png);
}
#navi li:hover ul {
    display: block;
    color: black;
    background: none;
}
#navi ul li a {
    font: normal 12px Arial;
    color: black;
    background: white;
    display: block;
    padding: 5px 0;
    line-height: 30px;
    padding-left: 20px;
    text-decoration: none;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_1.png);
    margin-top: 10px;
}
#navi ul {
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    list-style-type: none;
}
#navi ul li a:visited {
    color: black;
}
#navi ul li a:hover {
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_2.png);
}
.headernavi {
    font: bold 13px Verdana;
    color: black;
    background: white;
    background-image: url(http://file1.npage.de/008939/32/bilder/button_1.png);
    margin: 0;
    text-transform: uppercase;
    padding: 5px 0 5px 10px;
    line-height: 30px;

Alles anzeigen

TiBo007

Check!

explanator

Wo ist die CSS-Datei?

TiBo007

Hier: http://file1.npage.de/010182/58/html/stylesimpel.css
Sieht nur etwas kryptisch aus
Ich dachte erst es läge daran, dass ich es mit OpenOffice erstellt habe, aber mit dem Editor sieht es genau so aus...

P.S.
Die Datei, die ich mit dem Editor erstellt habe funktioniert aber, jetzt sieht die HP wieder gut aus

explanator

Nicht ganz, aber um die Feinheiten kümmern wir uns morgen, da hast du nicht alles ganz richtig übernommen im unteren Teil mit dem Div content.

Verwende nie ein anderes Programm als einen Texteditor für Webseiten, Schreibprogramme, wie OpenOffice eigenen sich nicht dafür.

TiBo007

Was ich mich auch noch frage: ich habe jetzt wie vorgeschlagen zu einem kostenpflichtigen Hoster gewechselt, One.com. Dort werde ich dann das valide Design einfügen. Diese ganze Sache, mit dem Header und den div-Containern, kommt die in das Stylesheet, da sie für die ganze Website gilt oder in irgend eine andere Datei. Auf npage war es nämlich so, dass man da den Punkt Design hatte, in den man den HTML-Text einfügt und dann war das Design auf der ganzen HP, ich vermute damit hat man das zweite Stylesheet, von dem explanator ja schon gesprochen hat, verändert.
In kurz: das seitenübergreifende Design (Header, div, etc.) kommt ins Stylesheet?

Gastl

Du solltest dich wirklich mit den Grundlagen von HTML und CSS beschäftigen.
Die ganze Sache mit dem Header und den div-Containern gehört in beides rein. In HTML das Grundgerüst, der Inhalt, in CSS das "Aussehen" und "Verteilung".

TiBo007

Deswegen bin ich ja hier im Forum angemeldet und lese mich ins Thema ein: http://www.html-seminar.de/ftp-filezilla.htm

Tags