html/css Grafik ohne Lücke untereinander

MetalForLive · 14. März 2014

Hi,

ich setze mich gerade ein bisschen mit web Programmierung auseinander.
Allerdings habe ich ein Poblem für das ich gerade keine Lösung finde.

Ich habe oben ein leiste mit mehren Feldern die man anklicken kann und unten soll eine Leiste drann, allerdings ist da immer 10 pixel oder so Platz dazwischen, ich will jetzt die Pixel da weg bekommen, so das es wie eins aussieht.

der Code sieht so aus:

Code:

<img usemap="#menu" src="/img/menu.png">
<map name="menu">

<area href="index.html" shape="circle" coords="86, 89, 83">
<area href="gaestebuch.php" shape="rect" coords="172, 73, 367, 97">
<area href="ftp://XXX" target="_blank" shape="rect" coords="389, 73, 449, 97">
<area href="game.php" shape="rect" coords="471, 73, 667, 97">
<area href="Seite2.html" shape="rect" coords="689, 73, 763, 97">

<body>
<br>
 
<style type="text/css">
<!--
.bildvorschau {
   border:2px;
   float:left;
}
-->
</style>
<img class="bildvorschau" src="/img/leiste.png" />

Wenn ich das <br> weg mache, ist es nebeneinander.

Im Anhang ist noch mal ein Bild das verdeutlicht was ich meine.

Wäre super wenn mir da jemand weiter helfen könnte.

itsfun · 14. März 2014

1. Was macht der verlorene Body-tag da in der mitte? Sollte dort nicht alles "Sichtbare" rein? Also auch der img-tag ganz oben?

2. Über den body-tag kannst du mittels margin und padding Abstände definieren!
http://de.selfhtml.org/css/eigenschaften/randabstand.htm
http://de.selfhtml.org/css/eigenschaften/innenabstand.htm

3. Über CSS kannst du die Positionen auch definieren.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Code:

    <style type="text/css">
    <!--
    .bildvorschau {
    border:2px;
    float:left;
    }
    -->
    </style>

    <body>
    <img usemap="#menu" src="/img/menu.png">
    <map name="menu">
     
    <area href="index.html" shape="circle" coords="86, 89, 83">
    <area href="gaestebuch.php" shape="rect" coords="172, 73, 367, 97">
    <area href="ftp://XXX" target="_blank" shape="rect" coords="389, 73, 449, 97">
    <area href="game.php" shape="rect" coords="471, 73, 667, 97">
    <area href="Seite2.html" shape="rect" coords="689, 73, 763, 97">
     
    <img class="bildvorschau" src="/img/leiste.png" />

tiwa86 · 14. März 2014

Hi, also wenn ich das richtig sehe, dann ist das Bild "leiste.png" der linke graue Balken, der unter dem Home-Kreis zu sehen ist.

Fangen wir mal oben an:

- Das Menü samt area map sollten auch innerhalb des <body> tags verschoben werden. Bessere Alternative zu area-maps ist es über CSS-Position oder Background-Position zu lösen.
- im CSS Style zu ".bildvorschau" steht ein border:2px drin. Der sorgt schonmal für eine 2px Kontur, die um die Grafik gelegt wird, also auf 0px setzen
- der Umbruch <br> sorgt dann auch für weiteren Leerraum

Generell solltest du erstmal ein Gerüst aus <div> Elementen bauen, dann funktioniert das auch mit dem "float: left;" besser.

Beispiel

Code:

<div class="rahmen">
<!-- Das horizontale Menü -->
 <div class="menu">
   <img src="menu.png">
   <area map.....>
 </div>
<!-- Die linke Leiste -->
 <div class="leiste">
   <img src="leiste.png">
 </div>
<!-- Für deinen Inhalt -->
 <div class="content">
   <div class="teamspeak">....</div>
 </div>
</div>

die beiden DIVs "leiste" und "content" könntest du dann mit float:left nebeneinander setzen. Standardmässig sind ja DIVs (Block-Element) immer untereinader angeordnet.

MetalForLive · 14. März 2014

Okey, danke für die Antworten, ich versuch mich dann mal daran.

Die "Divs" sind nur zur übersicht oder ?

edit: Achh neee quatsch, damit kann man dann sagen class content soll abstände haben usw.

So hat geklappt mit den Divs, jetzt ist das auch viel übersichtlicher.
Danke schon mal !

Ergänzung (14. März 2014)

Oh man aus irgend einem Grund wird mir plötzlich die TS3 implemetierung nicht mehr angezeigt.

Suche

html/css Grafik ohne Lücke untereinander

MetalForLive

Admiral

itsfun

Lieutenant

tiwa86

Lt. Commander

MetalForLive

Admiral

Ähnliche Themen