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

Abstand vom Kopfbereich der Seite zur Oberkante des Browserfensters ist zu groß

X

Xen

Neues Mitglied
Hallo Forum, kurze Frage:

Ich habe mit
Code: 
<div class="kopfzeile"></div>
einen Querbalken eingebunden. Leider gibt es einen Absatz zur Oberkante der Seite, den ich nicht haben möchte. Könnte das daran liegen, das <div> ein Blockelement ist? Wenn ich <span> benutze funktioniert es nicht mehr.
Hier ist noch der CSS Code:
Code: 
.kopfzeile
{
    height: 56px;
   border-width: 100%;

    BACKGROUND-COLOR:0f0f0f;

    BORDER-COLOR:0f0f0f;
}
Wer kann mir sagen, wie ich diesen Abstand wegbekomme?
Danke
 
Hallo,

tritt der Effekt bei allen Browsern auf oder nur bei bestimmten Browsern.

Du solltest dir angewöhnen in deinem CSS alles durchgängig gleich gross zu schreiben und ein einheitliches Format einhalten.

Wie sieht denn der Rest vom Code aus?
 
Hier ist erstmal der code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bin2.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="aplzer">
<meta name="generator" content="SWiSH Max3 (2009.11.30) www.swishzone.com">
<meta name="description" content="">

<!-- Created by SWiSH Max3 - The Ultimate Flash Creation Tools - SWiSH - Easy Flash Animation Software Tools and Designer Templates -->

<style type="text/css">
/*<=!=[=C=D=A=T=A=[*/
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
object
{
vertical-align: top;
}
/*]=]=>*/
</style>
</head>
<div class="kopfzeile"></div>
<body bgcolor="#FFCC33">
<body background="file 206.jpg"></body>

<center>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
id="bit20"
width="799" height="696"
>
<param name="movie" value="bit20.swf">
<param name="bgcolor" value="#FFCC33">
<param name="quality" value="high">
<param name="seamlesstabbing" value="false">
<param name="allowscriptaccess" value="samedomain">
<embed
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
name="bit20"
width="799" height="696"
src="bitan20.swf"
bgcolor="#FFCC33"
quality="high"
seamlesstabbing="false"
allowscriptaccess="samedomain"
>
<noembed>
</noembed>
</embed>
</object>
</center> <div id="fusszeile"></div>
</body>
</html>

In anderen Browsern wie IE oder chrome wird das CSS nochmal anders dargestellt.
 
Zuletzt bearbeitet:
Meines Erachtens nach liegt der beschriebene Fehler nicht am aufgezeigten CSS, möglicherweise im bin2-Stylesheet.
In diesem Versuchsaufbau, der dein HTML und die CSS-Klasse Kopfzeile enthält kann ich keinen Abstand zur Rand des Viewports erkennen, auch nicht unter verschiedenen Browsern.

http://degers.lima-city.de/42096.html

Insofern fehlen hier notwendige Informationen. Code wird mit Code-Tags übrigens schöner.
 
Dein HTML-Code ist von vorne bis hinten fehlerhaft. Schau zu, dass Du diesen erstmal richtig schreibst bevor Du dich um Fehldarstellungen kümmerst.

Beispiel:
Du hast mehrere body-Tags.
Du verwendest das veraltete Element <center>.
Du hast Elemente außerhalb des body's stehen.
CDATA im CSS-Inline-Bereich ist falsch geschrieben.

Und:
Lagere alle CSS-Eigenschaften in die externe Datei aus. Die hast Du ja schon. Und überschreibst momentan dort vorgenommene Einstellungen für html und body nochmal durch einen unnötigen Inline-Style.
 
Der Quellcode wurde vom Swish 3 Flashprogramm generiert und funktioniert, aber ich werde mal versuchen ihn anzupassen. Ob das mein Problem löst werde ich dann sehen.

Code: 
&iuml;&raquo;&iquest;<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bit2.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="aplzer">
    <meta name="generator" content="SWiSH Max3 (2009.11.30) www.swishzone.com">
    <meta name="description" content="">
    
    <!-- Created by SWiSH Max3 - The Ultimate Flash Creation Tools - www.swishzone.com -->

<style type="text/css">
/*<=!=[=C=D=A=T=A=[*/
html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}
object
{
    vertical-align: top;
}
/*]=]=>*/
</style>
    </head>
   
  <body bgcolor="#FFCC33">
      <div id="kopfzeile"></div>
      background="file 206.jpg"

    <center>
      <object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
        id="bit20"
        width="799" height="696"
      >
        <param name="movie" value="bit20.swf">
        <param name="bgcolor" value="#FFCC33">
        <param name="quality" value="high">
        <param name="seamlesstabbing" value="false">
        <param name="allowscriptaccess" value="samedomain">
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
          name="bit20"
          width="799" height="696"
          src="bit20.swf"
          bgcolor="#FFCC33"
          quality="high"
          seamlesstabbing="false"
          allowscriptaccess="samedomain"
        >
          <noembed>
          </noembed>
        </embed>
      </object>
    </center>
    <div id="fusszeile"></div>             
  </body>
</html>
 
Zuletzt bearbeitet:
Der Quellcode wurde vom Swish 3 Flashprogramm generiert
Zum Vergrößern anklicken....
Das ist auch nicht zu übersehen.

und funktioniert
Zum Vergrößern anklicken....
Nein tut er nicht. Das Ergebnis ist zufällig und somit nicht vorhersagbar sonst hättest du dich ja nicht an uns gewendet, wenn er funktionieren würde.

Ob das mein Problem löst werde ich dann sehen
Zum Vergrößern anklicken....
Dein Problem kann sonstwodran liegen, aber du musst erst mal das Fundament gerade richten, bevor du dich an weiteren Details herantastest.
Ein Fehler dort zieht meist weitere Fehler in der Darstellung nach sich .


Wenn man man alles raus wirft was nicht rein gehört bleibt nicht mehr viel übrig...
Du kannst gleich das hier nehmen, weil so sollte es aussehen:
HTML: 
 <!DOCTYPE html>
<html>
    <head>  
        <meta charset=UTF-8>
        <title>Seitenname fehlt
        </title>
        <link rel="stylesheet" type="text/css" href="bin2.css">
        <meta name="description" content="">
    </head>
    <body>
        <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="bit20" width="799" height="696" >
            <param name="movie" value="bit20.swf">
            <param name="bgcolor" value="#FFCC33">
            <param name="quality" value="high">
            <param name="seamlesstabbing" value="false">
            <param name="allowscriptaccess" value="samedomain">
            <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="bit20" width="799" height="696" src="bitan20.swf" bgcolor="#FFCC33" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain" >
            </embed>
        </object>
        <div id="fusszeile">
        </div>
    </body>
</html>
 
Hallo Danke für den Code, aber jetzt ist die Seite nicht mehr mittig, und das Hintergrundbild fehlt, aber das bekomme ich schon noch hin.
 
Ich habe den code nochmal angepasst, aber es fehlt so die Hintergrund Textur (file 206.jpg), das Theme ist nicht mittig und es fehlen die mit CSS definierten Balken "Kopfzeile" und "Fusszeile". Ansonsten ist "aufräumen" sicherlich eine gute Idee. Hier der Code:

Code: 
<!DOCTYPE html>
<html>
    <head>  
        <meta charset=UTF-8>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="bit2.css">
        <meta name="description" content="">
    </head>
    <body>
        <background="file 206.jpg">
         <div class= "kopfzeile"></div>   
        <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="bit20" width="799" height="696" >
            <param name="movie" value="bit20.swf">
            <param name="bgcolor" value="#FFCC33">
          
                
           
            <param name="quality" value="high">
            <param name="seamlesstabbing" value="false">
            <param name="allowscriptaccess" value="samedomain">
            <embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="bit20" width="799" height="696" src="bit20.swf" bgcolor="#FFCC33" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain">
            </embed>
        </object>
        <div id="fusszeile"></div>
    </body>
</html>
Wenn du Wusstersoss oder jemand anderes nochmal raufschauen könntet?
Gruß und Danke

Hier noch die CSS:
Code: 
.kopfzeile
{
    height: 56px;
   border-width: 100%;

    BACKGROUND-COLOR:0f0f0f;

    BORDER-COLOR:0f0f0f;
}
#fusszeile
         {
         height: 150px;
   border-width: 100%;

    BACKGROUND-COLOR:0f0f0f;

    BORDER-COLOR:0f0f0f;
    text-align:center:
    color:#ff33ff;

    }

Ich habe das mit W3C gecheckt, es gibt 8 Fehler und 4 Warnungen. Warum funktioniert der <background="file 206.jpg"> Tag nicht?
 
Zuletzt bearbeitet:
HTML: 
<body>
        <background="file 206.jpg">

Elemente werden in HTML mit spitzen Klammern geschrieben. Du fügst hier ein Element ein dessen Name background lautet. Solch ein Element gibt es aber bei HTML5 nicht!
Schaue dir mal die Elemente an die es gibt zum Beispiel bei HTML-Elementreferenz - SELFHTML

HTML: 
<div class= "kopfzeile"></div>
<div id="fusszeile"></div>
Du schreibst beim ersten Div als Attribut eine Klasse und beim zweiten Div als Attribut eine ID. Du solltest dir eine durchgängige Schreibweise zulegen. ID gibt es nur einmal Klassen dürfen öfter vorkommen. Mein Vorschlag ist für das erste Div auch eine ID zu verwenden:
HTML: 
<div id="kopfzeile"></div>

Dein Hintergrundbild gehört ins CSS.
schau ob es im gleichen Verzeichnis liegt und ob der Name stimmt.
Schau die an wie man mit CSS umgeht du hast da unheimlich viel durcheinandergebracht.
Wenn du eine Breite willst schreibe width:100px;
Wenn du einen Rahmen um etwas willst dann musst du angeben wie breit der Rahmen sein soll welche Farbe und welcher Art der Rahmen sein soll.
Wenn du ein Wert abschliesst musst du ein Semikolon verwenden und kein Doppelpunkt. Achte darauf, das ist eine häufige Fehlerquelle.

Lies mehr nach und schreibe im CSS alles klein, und rücke es anständig ein. Du findest sonst später nichts mehr wieder.

Code: 
body {
    background:url(206.jpg);
}

#kopfzeile {
    height: 56px;
    border-width: 100%;
    background-color: 0f0f0f;
    border-color: 0f0f0f;   
}
#fusszeile {
    height: 150px;
    border-width: 100%;
    background-color: 0f0f0f;
    border-color: 0f0f0f;
    text-align: center;
    color: #ff33ff;
}

Deine Fusszeile macht so keinen Sinn. da Rahmen und Hintergrund die selbe Farbe haben, du kannst den Rahmen also getrost weglassen.

Quellensammlung sind viele gute Hinweise und Links für Anfänger.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben