Paar probleme

**Luzifer** · 27.05.2007 00:22

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 !

**gruenspan** · 28.05.2007 23:04

und ich hab überhaupt keine RAND !

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.

**Luzifer** · 29.05.2007 12:37

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 !

**gruenspan** · 29.05.2007 14:29

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>

**pmmueller** · 14.06.2007 18:17

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.

Thema: Paar probleme

LinkBack

Themen-Optionen

Paar probleme

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

ICQ Probleme/ bzw Internet Explorer Probleme

Probleme mit IFrames + Tables

bräuchte paar tuts zu Truespace 3.2...

Noch ein paar mehr Probleme

Probleme bei einer Anfängerin

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen