StartseiteForumTutorialsArtikelBattlesDownloadsArtworkWebhosting
Webdesign in Siegen

Links verrutschen

Fragen zum Thema HTML und CSS können hier gestellt werden

Moderatoren: Basti, Ingo

Antwort erstellen

Links verrutschen

Beitragvon veNom am 16.05.2006, 08:56

So,

mir reicht es ich zuck hier gleich aus seit 4 stunden sitze ich in der schule vor eine website und ich komm ned weiter.

Ich habe eine ziemlich aufwendige Website, die ich normale Weise zuhause innhalb von 1 Stunde fertig Programmiert habe wenn ich mcih reinhänge, aber es gibt ein fettes problem...

Das Problem?
Meine Mitschüler und meine Lehrer hatten so etwas noch nie gesehen...
zum Problem selbst: Ich hab meine Seite mit div Tags aufgebaut und und ziemlich viele buttons oben einzlen ausgerichtet, dafür habe ich eine einzelne CSS angefertigt mit den Namen buttons.css. Dann gibt es noch eien style.css wo die Seite ausgerichtet ist mit allen positionen des Contents und Submenüs...

Erst war das Problem bei den Submenüs, das wenn ich etwas in den COntainer geschrieben habe alles gepasst hat, habe ich einen Link daraus gemacht und darauf geklickt ist der Text total verrutscht....

Im Submenü habe ich es so gelöst das ich meine Links in ein extra Div COntainer mit Positionierung gesteckt habe. Allerdings habe ich jetzt bemerkt das, dass selbe Problem im COntent ist und ich kann da schwer die Links in einen enzelnen Container stecken...

Was also kann ich machen?

Ich habe scshon herausgefunden das der Fehler irgendwie an der buttons.css liegt, wenn ich die verlinkung wegnehme zur buttons.css funktioeren die Links normal...

HILFEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!!

PS: ich hab den ganzen Thread editiert nicht wundern ;)
All you get is all you need
Benutzeravatar
veNom
Mitglied
 
Beiträge: 1560
Registriert: 29.12.2005
Wohnort: Wien
Nach oben

Beitragvon C4D_Joe am 16.05.2006, 13:00

Wär vielleicht nicht schlecht, wenn du die Stylsheets und die HTML-Datei mal hochladen würdest ;)
Cinema 4D 9.5 XL
GIMP 2
C4D_Joe
Mitglied
 
Beiträge: 110
Registriert: 06.07.2005
Wohnort: Bissingen Teck
Nach oben

Beitragvon veNom am 16.05.2006, 14:31

schule.htm bzw index.htm
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="buttons.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>

<body>
<div id="root">
  <div id="bg">
 

   
  <div id="home" ><a href="index.htm"></a></div>
   
  <div id="homet"><a href="index.htm">Home</a></div>
      
   
  <div id="schule" ><a href="schule.htm"></a></div>
   
  <div id="schulet"><a href="schule.htm">Schule</a></div>
    
   
  <div id="betriebe" ><a href="betriebe.htm"></a></div>
   
  <div id="betriebet"><a href="betriebe.htm">Betriebe</a></div>
   
   
  <div id="kontakt" ><a href="kontakt.htm"></a></div>
   
  <div id="kontaktt"><a href="kontakt.htm">Kontakt</a></div>
   
   
  <div id="impressum" ><a href="impressum.htm"></a></div>
   
  <div id="impressumt"><a href="impressum.htm">Impressum</a></div>

    <div id="menu">
      <div id="menulink1"><a href="klassen.htm">Klassen</a></div>
      <div id="menulink2"><a href="schueler.htm">Schüler</a></div>
     <div id="menulink3"><a href="works.htm">Arbeiten</a></div>
      <div id="menulink4"><a href="lehrer.htm">Lehrkräfte</a></div>
      <div id="menulink5"><a href="lehrplan.htm">Lehrplan</a></div>
      <div id="menulink6"><a href="absolventen.htm">Absolventen</a></div>
      <div id="menulink7"><a href="#">Forum</a></div>
      <br>
    </div>
    
    <div id="content">
   <b>Schule.</b>
   <br><br>
   Alles über die Schule
  </div>
</div>
</body>
</html>


style.css
Code: Alles auswählen
body {
   font-family: Verdana, Helvetica, etc;
   font-size: 10px;
   background-color: #FFFFFF;
}

a, a:visited, active {
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

a:hover {
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

#root {
   margin: 0px auto;
   border : 0px;
   width : 762px;
}

#bg {
   position : absolute;
   width : 762px;
   height : 768px;
   border : 0px none;
   background-image : url('images/background.jpg');
   background-repeat : no-repeat;
   bottom : 0;
   /*text-align : left;*/
   overflow : hidden;
   margin : 0 auto;
}

#content {
   position: absolute;
   left: 291px;
   top: 278px;
   border: 0px none;
   width:  360px;
   height: 420px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-base-color : #A6EDFF;
   scrollbar-track-color : #A6EDFF;
   scrollbar-face-color : #A6EDFF;
   scrollbar-highlight-color : #FFFFFF;
   scrollbar-3dlight-color : #FFFFFF;
   scrollbar-darkshadow-color : 000000;
   scrollbar-shadow-color : 000000;
   scrollbar-arrow-color : #1F6990;
}


buttons.css
Code: Alles auswählen
#home a{
   background-image: url(images/button_norm.gif);
   background-repeat: no-repeat;
   height: 23px;
   width: 23px;
   position: absolute; left:100; top:125;
   
}
#home a:hover{
   background: url(images/button_hover.gif);
   background-repeat: no-repeat;
}
#home a:active{
   background: url(images/button_klick.gif);
   background-repeat: no-repeat;
}

#homet a, a:active {
   color:#000000;
   height: 23px;
   width: 50px;
   position:absolute; left:125; top:130;
   text-decoration:none;
   font-size: 12;
   font: Verdana;
   valign: absmiddle;
   
}

#homet a:hover{
   color:#ff6600;
}

/* Schule links */
#schule a{
   background-image: url(images/button_norm.gif);
   background-repeat: no-repeat;
   height: 23px;
   width: 23px;
   position:absolute; left:190; top:142;
   
}
#schule a:hover{
   background: url(images/button_hover.gif);
   background-repeat: no-repeat;
}
#schule a:active{
   background: url(images/button_klick.gif);
   background-repeat: no-repeat;
}

#schulet a, a:active {
   color:#000000;
   height: 23px;
   width: 50px;
   position:absolute; left:215; top:146;
   text-decoration:none;
   font-size: 12;
   font: Verdana;
   vertical-align: middle;
   
}
#schulet a:hover{
   color:#ff6600;
}
/* Betriebe Link */
#betriebe a{
   background-image: url(images/button_norm.gif);
   background-repeat: no-repeat;
   height: 23px;
   width: 23px;
   position:absolute; left:285; top:160;
   
}
#betriebe a:hover{
   background: url(images/button_hover.gif);
   background-repeat: no-repeat;
}
#betriebe a:active{
   background: url(images/button_klick.gif);
   background-repeat: no-repeat;
}

#betriebet a, a:active {
   color:#000000;
   height: 23px;
   width: 50px;
   position:absolute; left:310; top:165;
   text-decoration:none;
   font-size: 12;
   font: Verdana;
   vertical-align: middle;
   
}
#betriebet a:hover{
   color:#ff6600;
}
/* Kontakt link */
#kontakt a{
   background-image: url(images/button_norm.gif);
   background-repeat: no-repeat;
   height: 23px;
   width: 23px;
   position:absolute; left:375; top:171;
   
}
#kontakt a:hover{
   background: url(images/button_hover.gif);
   background-repeat: no-repeat;
}
#kontakt a:active{
   background: url(images/button_klick.gif);
   background-repeat: no-repeat;
}

#kontaktt a, a:active {
   color:#000000;
   height: 23px;
   width: 50px;
   position:absolute; left:400; top:175;
   text-decoration:none;
   font-size: 12;
   font: Verdana;
   vertical-align: middle;
   
}
#kontaktt a:hover{
   color:#ff6600;
}

/* Impressum links */
#impressum a{
   background-image: url(images/button_norm.gif);
   background-repeat: no-repeat;
   height: 23px;
   width: 23px;
   position:absolute; left:465; top:175;
   
}
#impressum a:hover{
   background: url(images/button_hover.gif);
   background-repeat: no-repeat;
}
#impressum a:active{
   background: url(images/button_klick.gif);
   background-repeat: no-repeat;
}

#impressumt a, a:active {
   color:#000000;
   height: 23px;
   width: 50px;
   position:absolute; left:490; top:178;
   text-decoration:none;
   font-size: 12;
   font: Verdana;
   vertical-align: middle;
   
}
#impressumt a:hover{
   color:#ff6600;
}


menu.css
Code: Alles auswählen
#menulink1  {
   position:absolute;
   left: 107px;
   top: 290px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink1 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink1 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menülink2 */
#menulink2  {
   position:absolute;
   left: 107px;
   top: 305px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink2 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink2 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menulink3 */
#menulink3  {
   position:absolute;
   left: 107px;
   top: 320px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink3 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink3 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menulink4 */
#menulink4  {
   position:absolute;
   left: 107px;
   top: 335px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink4 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink4 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menulink5 */
#menulink5  {
   position:absolute;
   left: 107px;
   top: 350px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink5 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink5 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menulink6 */
#menulink6  {
   position:absolute;
   left: 107px;
   top: 365px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink6 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink6 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}

/* menulink7 */
#menulink7  {
   position:absolute;
   left: 107px;
   top: 380px;
   border: 0px none;
   width: 140px;
   height: 15px;
}

#menulink7 a {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000000;
   text-decoration: none;
}

#menulink7 a:hover {
   top:0;
   left:0;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #3398CC;
   text-decoration: none;
   font-weight: bold;
}


Viel Spass damit man kann ziemlich viel sehen wenn mand iese Dateien verlinkt ;) falls es hilft, kann es von hier leide rnicht online stellen
All you get is all you need
Benutzeravatar
veNom
Mitglied
 
Beiträge: 1560
Registriert: 29.12.2005
Wohnort: Wien
Nach oben

Beitragvon veNom am 16.05.2006, 14:50

ich hab so nen dummen fehler gemacht omfg !!!

ich habs gefunden

ich hatte bei buttons.css immer definiert zb: impressumt a:active

jetzt hab ich "impressumt active {" und jetzt gehts es, ich könnt mich sooo,, aargh!!!!
All you get is all you need
Benutzeravatar
veNom
Mitglied
 
Beiträge: 1560
Registriert: 29.12.2005
Wohnort: Wien
Nach oben

Beitragvon Manuel am 16.05.2006, 20:47

*hehe* Hatte gerade schon einen Schock bekommen weil ich den riesen Post gesehen hab und dir natürlich helfen wollte.

Was sehr oft hilft: Anderen erklären was du genau machst und plötzlich merkst du: Nein, das mach ich ja doch gar nicht und schon ist der Fehler gefunden. ;)

Lg,
Manuel ;-]
Benutzeravatar
Manuel
Site Admin
 
Beiträge: 8740
Registriert: 10.12.2004
Wohnort: Asbach
Nach oben
Antwort erstellen

Zurück zu HTML/CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Deutsche Übersetzung durch phpBB.de
Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2008           top ▲