• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Paar probleme

Status
Für weitere Antworten geschlossen.
L

Luzifer

Neues Mitglied
Hallo,
ich habe ein paar Probleme ..
So ich habe das Buch "little boxes" gelesen . und möchte nun soetwas machen . ( reine Übungssache.. )
Nur ich kriege das nicht hin , indem ich nicht nur Copy & pasta mchen will hab ich hier meine sources :

die HTML Datei :
Code: 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>Startseite - El Kassem</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
<div id="wrapper">
 <div id="header">
        <img src="logo.jpg" id="logo" alt="El Kassems Homepage - Video Tutorials , Applikationen und vieles mehr " />
      <span id="untertitel">Das ist hier meine Privat Homepage wo ihr etliches finden k&ouml;nnt!</span>
 </div><!-- Ende von header -->
 <div id="navigation">
   <ul>
      <li id="startseitepage"><a href="index.html">Startseite</a></li>
      <li id="scriptspage"><a href="scripts.html">Scripts</a></li>
      <li id="programmpage"><a href="applikationen.html">Applikationen</a></li>
      <li id="tutorialspage"><a href="tutorials.html">Tutorials</a></li>
      <li id="kontaktpage"><a href="kontakt.html">Kontakt</a></li>
   </ul> 
  </div> <!-- Ende navigation -->
  <div id="content">
  <p>Hallo</p>
  
  </div><!-- Ende von content -->
    
    
    
</div><!-- Ende von wrapper -->
  </body>
</html>

Hier die CSS datei :
Code: 
/*****************************************************
Cascading Style Sheets Datei 
El Kassem 
******************************************************/ 

body{
    background: #1E1E1E;
    }

#wrapper{
        width: 75%;
        margin: 0px auto 30px auto;
        }

#header{
        background: #FFDA38; 
        padding-left: 1%; padding-right: 50%; padding-top: 1%; padding-bottom: 0; 
        border-bottom: 1% solid #1E1E1E;
        }
        
#untertitel{
      position:absolute;
      padding-top: 1%;padding-right: 3%; padding-bottom: 10%; padding-left: 4%;
      font-weight: bold;
          }
        
#logo{
      padding: 5px;
      }
      
#navigation { 
   text-align: right;  
   background: #FFDA38; 
  padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%;
} 

      #navigation ul { 
      margin-bottom: 0; 
   } 
   #navigation li { 
      display: inline; 
      list-style-type: none; 
      margin: 0 ;  
   }
   #navigation a { 
      color: black; 
      background-color: #ffeda0;  
      border: 1px solid #8c8c8c;
      text-decoration: none;
      padding-bottom: 1%; padding-top: 0; padding-left: 2%; padding-right: 2%;
   }  
   #navigation a:hover,
   #navigation a:focus,
   #Startseite #startseitepage a, 
   #Scripts #scriptspage a,
   #Applikationen #programmpage a,
   #Tutorials #tutorialspage a,
   #Kontakt #kontaktpage a { 
      color: black; 
      background-color: white; 
      border-bottom-color: white; 
   }  
   #navigation a:active { 
      color: black;
      background-color: white;
      border-bottom: 0; 
   }  

                
    #content {
    background: white;
    padding-left: 1%; padding-right: 50%; padding-top: 1%; padding-bottom: 0; 
    border-top: 0;
    }

So , nun hier noch die Page : Little Boxes - CSS lernen - Startseite
Also wie man sieht.. wenn ich auf diese Navigation klicke bleibt das nicht so weißt .. und ich hab überhaupt keine RAND ! .. joa das sind so meine jetzigen Probleme ..

Danke !
 
und ich hab überhaupt keine RAND !
Zum Vergrößern anklicken....
och du armer, hast keine rand. das tut mir aber leid.

ich hab "little boxes" nicht gelesen. und? soll ich das jetzt tun, damit ich begreife was du willst?!

bitte teile uns mit was du tun willst und umschreibe dein problem so, das es jeder versteht.
 
na klar , ich probiers .. also habs mal "geuppt" .. ist hier zu erreichen .. Startseite - El Kassem .. nur die startseite und kontakt funktioniert.. für die anderen hab ich noch keine site erstellt
----
Oke zu meinem Problem .. (2)
Mein erstes Problem ist wenn ich drüberfahr ( mouseover ) wird ja der BG und so weiter schon weiß und alles ist super... nur .. ( und jetzt kommts..xD) Er macht nur seine "border bottom" weiß, aber nicht auch von der ganzen umrandung..somit sieht das nicht so aus als wie würde das einfließen .. :) .. ich denke das liegt daran weil ich das in % gemacht habe..

Aber ich hoffe man versteht(sieht das .. irgendwie.. )


Oke nächstes Problem :
Wenn ich auf z.B. Startseite klicke.. dann sollte das so bleiben wie wenn ich drüberfahre..das heißt.. border-bottom:white; .. und halt das ganze wenn ich drüberfahre das das wieder so "ineinander greift"..

Danke , falls man nicht ganz versteht was ich meine.. schaut man sich einfach Little Boxes - CSS lernen - Startseite an ! .. PS: ( das logo dient nur als Platzhalter ;) )


Danke !
 
sollte in etwa so gehen: (hatte ich irgendwie schon mal :-?)
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
A{
display:block;
height:30px; /* irgendeinefixegrösse */
width:70px; /* irgendeinefixegrösse */
background-color:#FFCC66;
border:1px solid black;
}
A:hover{
background-color:#FFF;
border-bottom:1px solid #FFF;
}
</style>
<body>
<a href="#">Link</a>
</body>
</html>

vergiss den ganzen mist mit aktiv und visited. oben siehst du den hoverzustand. in der jeweils aktuellen seite setzt du diesen zustand eben als normal voraus (mit einer Klasse).
Code: 
...

A.aktiv{
background-color:#FFF;
border-bottom:1px solid #FFF;
}
</style>
<body>
<a href="#" class="aktiv">Link</a>
</body>
</html>
 
Hallo Luzifer,

ich bin gerade über deine Frage gestolpert und da ich "Little Boxes" recht gut kenne, wollte ich dich schnell auf ein paar Stellen in deinem Quelltext hinweisen:

1. DOCTYPE
Im Buch wird XHTML 1.0 Transitional verwendet. Wenn du XHTML1.1 nimmst, solltest du sicherstellen, dass der Code validiert. Der XML-Vorspann könnte im IE für Probleme sorgen.

2. <body>
Hier fehlt die ID. Z. B. <body id="Startseite">, damit die Selektoren wie #Startseite #startseitepage a richtig greifen.

3. #header
Da fehlt noch position:relative, falls du #untertitel irgendwann tatsächlich absolut positionieren möchtest (wobei dort dann noch top o.ä. fehlt).

3. padding
Die Kurzschreibweise ist auf Dauer echt besser lesbar ;-)

Klappt es denn inzwischen mit deiner Navigation? Der Link zur Beispielseite funktioniert leider nicht.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben