Einzelne Elemente der Steuerung hervorheben

DArkSouL

Hallo,
ich möchte die Navigation meiner Seite gerne so ähnlich gestalten wie auf dieser Seite: DE100.eu
Heißt, wenn man dort auf Forum, Mitglieder, Spenden etc. klickt ändert sich die Hintergrundfarbe und die Schrift wird dicker/größer, so wie es bei Portal ist.
Ich habe schon stundenlang gegooglet und versucht aber schaffe das einfach nicht.
Kann mir jemand einen Beispielcode oder so geben?

MfG

Achso hier noch meine Codes^^

HTML

<!DOCTYPE html>
<html>




<head>
    <title>Blackwater Security Investigation</title>




    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">




    <link href="style.css" type="text/css" rel="stylesheet">
</head>




<body>
    <img class="ubild" src="BSI.jpg" />
    <div class="navi">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="info.html">Info</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="bewerbung.html">Bewerbung</a></li>
        </ul>
    </div>
    <div class="indexbox">
Hallo
    </div>
</body>
</html>

Alles anzeigen

CSS

html, body
{
 background-color: #800000;
}
#ubild{
 margin-left: auto;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: auto;
}
.navi {
    text-align: center;
    font-size: 25px;
}
.navi ul{
    list-style: none;
}
.navi li {
    float: left;
    margin-left: 15px;
    width: 130px;




    background-color: #D1EEEE;
    border-left: 2px black solid;
    margin-right: 0px;
    margin-left: 0px;
}




.navi a:link    { color:black;   text-decoration:none; }
.navi a:visited { color:black;}
.navi a:focus   { color:green;}
.navi a:hover   { color:red;}
.navi a:active  { color:red;}




.indexbox{
    background-color: #B4CDCD;
    margin-top: 55px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: auto;
}

Alles anzeigen

Basi

Hi, bitte mache dich mit dem von dir gelesenen und akzeptierten Regelwerk vertraut, ich beziehe mich dabei auf den von dir gewählten Titel und den Doppelpost (beides behoben).

Du musst in dem Fall einfach mit Klassen arbeiten. Auf der derzeit besuchten Seite (zum Beispiel index.html oder forum.html) gibst du dem entsprechenden Link einfach eine Klasse:

HTML

<ul>
    <li><a href="index.html" class="aktiv">Home</a></li>
    <li><a href="info.html">Info</a></li>
  ...

CSS

.aktiv {
  font-weight: bold;
}

Wenn du mit includes arbeitest musst du mit PHP den Dateinamen auslesen und dementsprechend auswerten.

DArkSouL

Hallo Basii,
ich werde mir das Regelwerk gleich noch einmal durchlesen, wahrscheinlich war es gestern einfach zu spät und ich habe deshalb nicht alles ganz verstanden Entschuldigung
33
Aber trotzdem erst einmal danke für die schnelle Antwort ich werde das gleich einmal versuchen.

So habe jetzt ein wenig an meiner Seite weitergearbeitet. Hier ist mal der Link BSI

So mein Problem: Wenn man jetzt heraus oder herein zoomt verschient sich das alles und man sieht das Bild ganz oben auch nicht mehr richtig sondern nur zur Hälfte. Beim Reiter Preise verschiebt sich das Wort "Preisliste" auch immer.
Meine Frage ist nun: Kann man irgendwie einen maximalen (zB 100%)/minimalen (zB 20%) "scroll"wert zum heraus/herein zoomen festlegen?

MfG

CSS

html, body
{
 max-width: 1920px;
 background-color: #490101;
}
#ubild{
 margin-left: 40px;
 margin-top: 0px;
 margin-right: 40px;
 margin-bottom: auto;
}
.navi {
    text-align: center;
    font-size: 25px;
}
.navi ul{
    list-style: none;
}
.navi li {
    float: left;
    margin-left: 15px;
    width: 130px;




    background-color: #D1EEEE;
    border-left: 2px black solid;
    margin-right: 0px;
    margin-left: 0px;
}
.navi a:link    { color:black;   text-decoration:none; }
.navi a:visited { color:black;}
.navi a:focus   { color:green;}
.navi a:hover   { color:red;}
.navi a:active  { color:red;}
.indexbox{
    background-color: #B4CDCD;
    margin-top: 55px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: auto;
    font-size: 20px;
    padding-bottom: 10px;
}
.aktiv {
    float: left;
    margin-left: 15px;
    width: 130px;




    background-color: #B4CDCD;
    border-left: 2px black solid;
    margin-right: 0px;
    margin-left: 0px;
}
.textinhalt{
    margin-left: 50px;
    margin-right: 50px;
    font-size: 22px;
}
#preishead{
    text-align: center;
}
#homebild{
    margin-top: 40px;
    text-align: center;
}

Alles anzeigen

Basi

Du kannst nicht festlegen ob und wie weit gescrollt werden kann, du kannst aber dementsprechend arbeiten.

Warum ist die Überschrift überhaupt zentriert, der restliche Inhalt ist ja auch rechtsbündig, das wäre ein Problem weniger.

Das Abschneiden des Bildes im Kopfbereich kannst du theoretisch mit CSS verhindern, dafür weißt du dem body die Grafik als Hintergrund zu, änderst padding dementsprechend ab und nutzt background-size:

CSS

body {
  background: #490101 url(BSI.jpg) no-repeat;
  background-size: 100%;
  padding-top: 200px;
}

DArkSouL

Okay danke wiedermal für die schnelle Antwort!
Ich werde die Tipps gleich mal umsetzen

Jetzt mitmachen!