XHTMLforum - Darstellung aller Textelemente anders als von Links

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Darstellung aller Textelemente anders als von Links (http://xhtmlforum.de/showthread.php?t=73110)

Darstellung aller Textelemente anders als von Links

Ich habe jetzt eine Lösung für meine Umstellung von Frames auf Stylesheets gefunden. Jetzt habe ich dabei nur noch ein Problem mit einer Darstellung. Als ich Frames verwendet habe wurden im Content alle Text Elemente mit selben Abstand zum oberen Frame angezeigt. Wenn ich nun bei den Stylesheets Links mit anderen Textelementen wie Überschriften und Absätze vergleiche ist bei den Links alles wie mit Frames und die anderen Elemente werden mit größerem Abstand angezeigt.

Hier meine CSS Datei.

Code:

#container {

  position:fixed; 

  top:110;

  left:0;

  bottom:30; 

  right:0; 

  overflow:auto; 

  background:#ffffff;

  }

#container * {margin-left:287; margin-right:25}



#header {

  position:absolute; 

  top:0; 

  left:0; 

  width:100%; 

  height:110; 

  overflow:hidden; 

  background:#53829d;

  }



#footer {

  position:absolute; 

  bottom:0; 

  left:0;

  width:100%; 

  height:30; 

  overflow:hidden; 

  background:#73a2bd;

  border-top:1px solid #000000;

  }



P {Font-Family:Candara; Font-weight:normal}



A {font-size:16pt; Color:#380536; Font-Family:Candara}



h1{Font-Family:Candara; Font-weight:lighter}



h2{Font-Family:Candara; Font-weight:normal}



h3{Font-Family:Candara; Font-weight:normal}



ul{Font-Family:Candara; Font-weight:normal}

Woran kann das nun liegen und wie kann ich das beheben.

Vielen Dank schon mal im Vorraus

Warum versuchst du nicht zuerst CSS zu lernen, bevor du es verwendest?

Das von dir benutze CSS kann in einer validen Seite nicht funktionieren.
Das bedeutet das dein HTML Code fehlerhaft ist.

Dann ist es natürlich nicht möglich anhand wager Beschreibung ein Problem zu erkennen, geschweige denn zu lösen. Dazu brauchen wir ein vollständigen Beispielcode, anhand dem dein Problem nachvollziehbar ist.

Hier der HTML Code in dem ich das oben angegebene Stylesheet verwende. Im Code ist die Stelle an der mir das Problem aufgefallen ist kommentiert.

HTML-Code:

<html>



<head>

<title></title>

</head>



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



<body>



<div id="header">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">

  <tr height="5">

    <td></td>

  </tr>

  <tr align="left">

    <td rowspan=2 width=25"></td>

    <td><a href="seiten/news.htm" style="text-decoration: none; font-family: Candara; color:#380536">

      <center><img border="0" src="bilder/logo.png"><br>

      CranioSacrale<br>

      Körper- und Energiearbeit</center></a></td>

    <td rowspan=2 width="20"></td>

    <td rowspan=2><a href="seiten/news.htm">News</a></td>

    <td rowspan=2 width="10"></td>

    <td rowspan=2><a href="seiten/info.htm">Über Mich</a></td>

    <td rowspan=2 width="10"></td>

    <td rowspan=2><a href="seiten/craniosacral.htm">Craniosacral</a></td>

    <td rowspan=2 width="10"></td>

    <td rowspan=2><a href="seiten/links.htm">Links</a></td>

    <td rowspan=2 width="10"></td>

    <td rowspan=2><a href="seiten/kontakt.htm">Kontakt</a></td>

  </tr>

  

</table>



</div>



<div id="container">

<H1>Cranio Sacral</H1> // Hier tritt das genannte Problem auf. Wenn ich es als Link definiere gibt es keinen Abstand zur oberen Box und wenn ich alle andere Text-Elemente nutze gibt es einen größeren Abstand zur oberen Box.

</div> 



<div id="footer">

<center><a style="font-size:16pt" href="seiten/impressum.htm" target="inhalt">&copy; 2015 Andrea Zinser</a> | <a style="font-size:16pt" href="seiten/impressum.htm" target="inhalt">Impressum</a></style></center>

</div>



</body>

</html>

Ich hoffe ihr könnt mir nun mit meinem Problem helfen und mir sagen was ich generell am HTML Code und dem CSS Code machen könnte.

Danke

Wie gesagt, dein HTML ist fehlerhaft. Du verwendest keinen DOCTYPE, daher wird die Seite im Quirksmodus dargestellt.
Du kannst deinen Code z.b. damit validieren https://validator.w3.org/

Das sind Grundlagen, daher mal ein Hinweis auf Quellen, mit deren Hilfe du CSS lernen kannst:
Little Boxes online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)
https://wiki.selfhtml.org/wiki/CSS

Dadurch das die Seite in einem falschen Modus dargestellt werden, stimmen die Abstände nciht mehr mit dem Boxmodell überein, dein Problem sind aber vermutlich die vom Browser vordefinierten Werte.
Es ist üblich diese mit einem "CSS Reset" zu eliminieren.
CSS-Reset: Rücksetzen der Browservorgaben - CSS - Tutorials, Tipps und Tricks für Webmaster auf Webmasterpro.de

Der einfachste wäre z.b.

Code:

* {

    margin: 0;

    padding: 0;

}

Aber ich würde mir an deiner Stelle wirklich mal ein Buch in die Hand nehmen oder wenigstens ein Tutorial durcharbeiten, deine Selektorenwahl deuten darauf hin, dass du sie noch nicht verstanden hast. Und eine Tabelle als Gestaltungselement ist ähnlich verpöhnt wie ein Frame, sowas braucht man heute nicht mehr.