Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Abstand“

D

Drag1on

Guest

Hallo,
wie bekomme ich den Abstand zwischen Header und Trennbalken weg/verringert? (Pfeil rechts im Bild)



P.S
Der Header ist in Html da es zum Inhalt gehört (Logo)

Danke

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
</head>

<body>





<div id="kopf">
      <img src="Bilder/Header.png" border="0" height="151" width="1000" alt="" />
</div>

<div id="trennbalken">

</div>


<div id="wrapper">


<div id="steuerung">
         Steuerung
</div>



<div id="inhalt">
         Inhalt
</div>



<div id="spaltelinks">
           Spalterlinks
</div>



<div id="spalterechts">
           Spaltelrechts
</div>



<div id="fuss">
          Fuss
</div>







</div>

</body>
</html>
Code:
* {
    margin: 0;
    padding: 0;
}


body {
    text-align: center;
}


#wrapper {
    background-color: #590505;
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}


#kopf {

}

#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;

}

#steuerung {
     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
}



#inhalt {
     background-color: #008000 ;
     margin-left: 170px;
     margin-right: 170px;
}



#spaltelinks {
     background-color:  #FF0000;
     width: 165px;
     float: left;
}




#spalterechts {
      background-color:  #0000FF;
      width: 165px;
      float: right;
}



#fuss {
      background-color:  #000000;
      width: 1000px;
}
 

D

Drag1on

Guest

AW: Abstand

Das sind 2 Grafiken die müsste man in CSS oder HTML irgendwie verschieben können. es sollten auch 2 Grafiken bleiben möchte keine einzelne daraus machen falls ich den Header mal ändern möchte.
 

hubspe

display:schwarzgelb;

AW: Abstand

Moin,

wenn es ein Schmuckbild ist hat es im Markup nichts zu suchen, sondern gehört als HG-Bild ins CSS.

Wie wärs denn mal mit einem Link zum Problem, damit man nicht so rumraten muss?
 

westob

Nicht mehr ganz neu hier

AW: Abstand

wo tritt denn der abstand auf? ist er zb. in dreamweaver oder auch im browser zu sdehen? im ie oder auch im firefox? leider verhalten sich nicht alle programme gleich.
 

agielen

Aktives Mitglied

AW: Abstand

Hi

da steht ja gar nichts im div "Kopf"? Das geht nicht. Du musst dem schon sagen wo und wie der zu stehen hat, auch wenn Du da im code das Bild als img einpackst.
Der Kopf weiß ja gar nicht, wo er stehen soll oder wie er sich gegenüber den anderen Elementen zu verhalten hat? Im IE z.B. wird der so von seiner vermeintlichen Lage in DW oder im Editor abweichen, dass der alles andere mit verrücken wird.
Vermutlich liegt das daran. Du könntest auch dann mit z-index arbeiten und Ebenen schaffen, um dann den Trennbalken über den Kopf zu legen und damit höher zu schieben.
Gruß,

agielen

Edit: das gilt übrigens auch für alle anderen Elemente. Schau Dir die Seite mal in Internet Explorer an und Du wirst auf einmal den Trennbalken in China wiederfinden ;)
 
Zuletzt bearbeitet:

GaMbIt_

Noch nicht viel geschrieben

AW: Abstand

Hi

da steht ja gar nichts im div "Kopf"? Das geht nicht. Du musst dem schon sagen wo und wie der zu stehen hat, auch wenn Du da im code das Bild als img einpackst.
Im Div mit der Id Kopf steht ein img Tag ... das sollte doch erst mal als Inhalt genügen... Was sollte da nicht gehen?
Der Kopf weiß ja gar nicht, wo er stehen soll oder wie er sich gegenüber den anderen Elementen zu verhalten hat? Im IE z.B. wird der so von seiner vermeintlichen Lage in DW oder im Editor abweichen, dass der alles andere mit verrücken wird.
Der Kopf weiss was die Hände nicht tun .. :D
Also generell verhält sich ein div in jedem Browser als Blockelement und nimmt per default 100% Breite ein. Zusätzlich ist im CSS ein reset mit margin:0 und padding:0 gesetzt. Da ist schon ausreichend definiert wie sich das Div Kopf zu anderen Elementen verhält...
Vermutlich liegt das daran.
Ich vermute nicht ;)
Du könntest auch dann mit z-index arbeiten und Ebenen schaffen, um dann den Trennbalken über den Kopf zu legen und damit höher zu schieben.
Naja.. das würde den Code nur unnötig aufblähen und die gesamte bis jetzt recht einfache Struktur verkomplizieren... keep it as simple as possible
Gruß,

agielen

Edit: das gilt übrigens auch für alle anderen Elemente. Schau Dir die Seite mal in Internet Explorer an und Du wirst auf einmal den Trennbalken in China wiederfinden ;)

Hmm ich wusste garnicht das China zum Viewport des Browsers gehört :D *g*
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben