Login  Regeln Aktuelles Datum und Uhrzeit: 05.12.2008, 04:24  
Startseite
Registrieren
Profil
Suchen
Mitgliederliste
Verzeichnis
Impressum



Partner
kostenlose Homepage
Fussball
Kostenloses Forum
SMS kostenlos
Webhosting
Webmasterportal
Kostenlos
Kredit ohne Schufa
Esoterik-Forum
Selbsthilfeforum
Artikel Backlink
Datenrettung
CSS Boxen verschoben und Links in falscher Farbe

 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> HTML & CSS
Vorheriges Thema anzeigen Nächstes Thema anzeigen 
Autor Nachricht
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 07.10.2007, 19:09    Titel: CSS Boxen verschoben und Links in falscher Farbe Antworten mit Zitat
HTML Text:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="kendl.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="mainbox">
<div id="logobox"></div>
<div id="bannerbox"></div>
</div>
<div id="linebox"></div>

<div id="navigationbox">
<table width="210" height="580" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
    <td valign="top"><p><br />
        <span class="H1menu">Home</span><br />
        <span class="linkmenu">- Vorwort</span><br />
        <br />
        <span class="H1menu">News</span><br />
        <br />
        <span class="H1menu">Unser Dorf</span><br />
        <span class="linkmenu">- Geschichte</span><br />
        <span class="linkmenu">- Heute<br />
          <br />
          </span><span class="H1menu">Fotos</span><span class="linkmenu"><br />
          - Landschaft<br />
          - Verantstaltungen<br />
          - Ausfl&uuml;ge<br />
          - Projekte<br />
          - Diverse<br />
          <br />
          </span><span class="H1menu">Kalender</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Links</span><span class="linkmenu"><br />
          - Gewerbetreibende<br />
          - Beh&ouml;rden und Vereine<br />
          - Rat und Hilfe<br />
          <br />
          </span><span class="H1menu">Dorferneuerung</span><span class="linkmenu"><br />
          - vergangene Projekte<br />
          - zuk&uuml;nftige Projekte<br />
          <br />
          </span><span class="H1menu">G&auml;stebuch</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Downloads</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Kontakt</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Impressum</span><span class="linkmenu"><br />
          <br />
                                    </span></p>
      </td>
  </tr>
</table>

</div>

<div id="textbox"></div>

</body>
</html>




CSS:
Code:

@charset "utf-8";
/* CSS Document DGM Kendl v 3.0*/



.text {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 0,8em;
   color: #000;
   }
   
   
.H1menu {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12pt;
   color: FFF;
   font-weight: bold;
   }
   

.linkmenu {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: FFF;
   font-weight: bold;
   }
   
   
.linkbody {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 0,8em;
   color: #000;
   font-style: bold;
   }
   
   
   
#mainbox {
   width: 64em;
   height: 58em;
   background-color: #FFF;
   border: 0em;
   padding: 0em;
   margin: 0em;
   }
   
   
   
#logobox {
   width: 15em;
   height: 6em;
   background-image: url(logo.jpg);
   background-repeat: no-repeat;
   border: 0em;
   padding: 0em;
   margin: 1em;
   float: left;
   }
   
   
#bannerbox {
   width: 45em;
   height: 6em;
   background-image: url(banner.jpg);
   background-repeat: no-repeat;
   border: 0em;
   padding: 0em;
   margin: 1em;
   float: right;
   }
   
   
#linebox {
   width: 64em;
   height: 1em;
   background-image: url(line.jpg);
   border: 0em;
   padding: 0em;
   margin: 0em;
   float: left
   }
   
   
#navigationbox {
   width: 15em;
   height: 47em;
   background-image:url(navigation.jpg);
   background-repeat: no-repeat;
   border: 0em;
   padding: 0em;
   margin: 1em;
   float: left
   }
   
   
#textbox {
   width: 45em;
   height: 47em;
   background-color: #FFF;
   border: 0em;
   padding: 0em;
   margin: 1em;
   float: right;
   }



Wenn ich die Seite im IE oder Firefox aufrufe, ist alles komplett verschoben bzw. sind die Links nicht in weiß sondern schwarz. Warum ist das so?
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
sejuma
Beliebter [User]
Beliebter



Anmeldung: 08.05.06
Beiträge: 493
BeitragVerfasst am: 07.10.2007, 19:49    Titel: Antworten mit Zitat
Lösche mal das aus der CSS-Datei:
Code:
@charset "utf-8";


und weise der logobox noch ein
Code:
display: inline;
zu.
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 07.10.2007, 19:53    Titel: Antworten mit Zitat
ändert nichts
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
sejuma
Beliebter [User]
Beliebter



Anmeldung: 08.05.06
Beiträge: 493
BeitragVerfasst am: 07.10.2007, 19:56    Titel: Antworten mit Zitat
Achte darauf, wo du die div's schließt. Die mainbox soll bestimmt zum Schluss geschlossen werden und nicht bereits nach der Bannerbox?
Wenn du Elemente gefloatet hast und willst ein nächstes Element wieder darunter setzen, dann musst du clearen. Also dem Element das unter ein gefloatetes kommt noch ein
Code:
clear: both;
zuweisen.
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 07.10.2007, 20:01    Titel: Antworten mit Zitat
das mit dem clear: both versteh ich noch nicht ganz


die links sind trotzdem schwarz
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 07.10.2007, 20:17    Titel: Antworten mit Zitat
hm, im internetexplorer stimmt jetzt die anordnung, im firefox nicht;
links in beiden nicht
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
sejuma
Beliebter [User]
Beliebter



Anmeldung: 08.05.06
Beiträge: 493
BeitragVerfasst am: 08.10.2007, 06:47    Titel: Antworten mit Zitat
Bei deinen Angaben für die Schriftfarbe fehlt die vorangestellte Raute:
Zitat:
.H1menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFF;
font-weight: bold;
}


.linkmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFF;
font-weight: bold;
}


Deine "Links" sind auch noch keine richtigen. Dazu brauchst du nicht unbedingt spans, sondern kannst das über "a" lösen.

Floaten und clearen ist eigentlich gar nicht so kompliziert, wie manchmal beschrieben:
http://www.css4you.de/float.html
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Inwiefern stimmt jetzt die Anordnung im FF nicht? Bitte ggf. nochmal aktuellen Quelltext posten.

Vielleicht hilft dir auch dieser CSS-Einsteigerkurs weiter.
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 08.10.2007, 14:48    Titel: Antworten mit Zitat
also hier nochmal die aktuelle .css - Datei


/* CSS Document DGM Kendl v 3.0*/



.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
}


.texthover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
font-weight: bold;
}


.H1menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFF;
font-weight: bold;
}


.linkmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFF;
font-weight: bold;
}


.linkbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 0,8em;
color: #000;
font-style: bold;
}



#mainbox {
width: 64em;
height: 58em;
background-color: #FFF;
border: 0em;
padding: 0em;
margin: 0em;
}



#logobox {
width: 15em;
height: 6em;
background-image: url(logo.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 1em;
float: left;
display: inline;

}


#bannerbox {
width: 45em;
height: 6em;
background-image: url(banner.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 1em;
float: right;

}


#linebox {
width: 64em;
height: 1em;
background-image: url(line.jpg);
border: 0em;
padding: 0em;
margin: 0em;
float: left;
clear:both;
}


#navigationbox {
width: 15em;
height: 47em;
background-image:url(navigation.jpg);
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 1em;
float: left;
clear: both;
display: inline;

}


#textbox {
width: 45em;
height: 47em;
background-color: #FFF;
border: 0em;
padding: 0em;
margin: 1em;
float: right;
clear: both;
}
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
sejuma
Beliebter [User]
Beliebter



Anmeldung: 08.05.06
Beiträge: 493
BeitragVerfasst am: 08.10.2007, 16:35    Titel: Antworten mit Zitat
Änderungen:
Code:

#linebox {
margin-left: 1em;
}


Code:
#textbox {
margin-left: 18em;
margin-top:1em;
}


Code:
<body>
<div id="mainbox">
<div id="logobox">logobox</div>
<div id="bannerbox">bannerbox</div>

<div id="linebox">linebox</div>

<div id="navigationbox">
<table width="210" height="580" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
    <td valign="top"><p><br />
        <span class="H1menu">Home</span><br />
        <span class="linkmenu">- Vorwort</span><br />
        <br />
        <span class="H1menu">News</span><br />
        <br />
        <span class="H1menu">Unser Dorf</span><br />
        <span class="linkmenu">- Geschichte</span><br />
        <span class="linkmenu">- Heute<br />
          <br />
          </span><span class="H1menu">Fotos</span><span class="linkmenu"><br />
          - Landschaft<br />
          - Verantstaltungen<br />
          - Ausfl&uuml;ge<br />
          - Projekte<br />
          - Diverse<br />
          <br />
          </span><span class="H1menu">Kalender</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Links</span><span class="linkmenu"><br />
          - Gewerbetreibende<br />
          - Beh&ouml;rden und Vereine<br />
          - Rat und Hilfe<br />
          <br />
          </span><span class="H1menu">Dorferneuerung</span><span class="linkmenu"><br />
          - vergangene Projekte<br />
          - zuk&uuml;nftige Projekte<br />
          <br />
          </span><span class="H1menu">G&auml;stebuch</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Downloads</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Kontakt</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Impressum</span><span class="linkmenu"><br />
          <br />
                                    </span></p>
      </td>
  </tr>
</table>

</div>

<div id="textbox">textbox</div>
</div>
</body>


Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 08.10.2007, 18:23    Titel: Antworten mit Zitat
dann passt gar nix mehr zam
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
sejuma
Beliebter [User]
Beliebter



Anmeldung: 08.05.06
Beiträge: 493
BeitragVerfasst am: 08.10.2007, 19:26    Titel: Antworten mit Zitat
Ist zwar kein "Mach-mir-Forum", aber so sollte es hinhauen. Die Hintergrundfarben musst du wieder durch die bg.images ersetzen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Kein Titel</title>

<style type="text/css">

body {margin:0; padding:0;}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
}


.texthover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
font-weight: bold;
}


.H1menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFF;
font-weight: bold;
}


.linkmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFF;
font-weight: bold;
}


.linkbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 0,8em;
color: #000;
font-style: bold;
}



#mainbox {
width: 64em;
height: 58em;
background-color: #Ff0099;
}



#logobox {
width: 15em;
height: 6em;
background: red;
background-repeat: no-repeat;
margin: 1em 0 1em 1em;
float: left;
display: inline;

}


#bannerbox {
width: 45em;
height: 6em;
background:blue;
background-repeat: no-repeat;
margin: 1em 0 1em 1em;
float:left;
}


#linebox {
clear:both;
width: 61em;
height: 1em;
background:green;
margin: 0 0 0 1em;
}


#navigationbox {
width: 15em;
height: 47em;
background:magenta;
background-repeat: no-repeat;
border: 0em;
padding: 0em;
margin: 1em 1em 1em 1em;
float: left;
clear: both;
display: inline;

}


#textbox {
width: 45em;
height: 47em;
background:yellow;
border: 0em;
padding: 0em;
margin: 1em 1em 1em 17em;
}
</style>

</head>

<body>
<div id="mainbox">
<div id="logobox">logobox</div>
<div id="bannerbox">bannerbox</div>

<div id="linebox">linebox</div>

<div id="navigationbox">
<table width="210" height="580" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr>
    <td valign="top"><p><br />
        <span class="H1menu">Home</span><br />
        <span class="linkmenu">- Vorwort</span><br />
        <br />
        <span class="H1menu">News</span><br />
        <br />
        <span class="H1menu">Unser Dorf</span><br />
        <span class="linkmenu">- Geschichte</span><br />
        <span class="linkmenu">- Heute<br />
          <br />
          </span><span class="H1menu">Fotos</span><span class="linkmenu"><br />
          - Landschaft<br />
          - Verantstaltungen<br />
          - Ausfl&uuml;ge<br />
          - Projekte<br />
          - Diverse<br />
          <br />
          </span><span class="H1menu">Kalender</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Links</span><span class="linkmenu"><br />
          - Gewerbetreibende<br />
          - Beh&ouml;rden und Vereine<br />
          - Rat und Hilfe<br />
          <br />
          </span><span class="H1menu">Dorferneuerung</span><span class="linkmenu"><br />
          - vergangene Projekte<br />
          - zuk&uuml;nftige Projekte<br />
          <br />
          </span><span class="H1menu">G&auml;stebuch</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Downloads</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Kontakt</span><span class="linkmenu"><br />
          <br />
          </span><span class="H1menu">Impressum</span><span class="linkmenu"><br />
          <br />
                                    </span></p>
      </td>
  </tr>
</table>

</div>

<div id="textbox">textbox</div>
</div>
</body>
</html>


Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 08.10.2007, 20:26    Titel: Antworten mit Zitat
okay danke, habs jetzt selbst auch fast hingekriegt;

was muss man machen, dass der Firefox "float:inherit" versteht?
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Pez
Erfahrener [User]
Erfahrener



Anmeldung: 24.05.07
Beiträge: 58
BeitragVerfasst am: 09.10.2007, 18:50    Titel: Antworten mit Zitat
hab jetzt diese version oben durchgearbeitet, und im IE passt alles wunderbar nur im Firefox wird keine einzige Grafik angezeigt;

hab die css - Datei extern angelegt
Nach oben
Private Nachricht senden Website dieses Benutzers besuchen
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

Gehe zu:  

Ähnliche Beiträge
Thema Autor Forum Antworten Verfasst am
Keine neuen Beiträge biete Links zur Vermittlung jeder Art... reinhard Linktausch 0 03.12.2008, 17:08 Letzten Beitrag anzeigen
Keine neuen Beiträge Biete Links auf Handyseiten rmo Linktausch 0 30.11.2008, 23:24 Letzten Beitrag anzeigen
Keine neuen Beiträge Biete Links Segeln, Ostsee / Reisen D... rmo Linktausch 0 30.11.2008, 23:20 Letzten Beitrag anzeigen
Keine neuen Beiträge Bot für Links Hesoyam HTML & CSS 3 29.11.2008, 17:29 Letzten Beitrag anzeigen
Keine neuen Beiträge Content gegen Links / Contenttausch bydlo Linktausch 0 28.11.2008, 22:49 Letzten Beitrag anzeigen
Threadübersicht