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

Abstand entfernen

Status
Für weitere Antworten geschlossen.
M

MichaSG

Neues Mitglied
So, ich bin ziemlich neu im Bereich HTML (und CSS) eingestiegen. Nun, ich habe nun in letzter Zeit desöfteren versucht, Designs zur HP weiterverarbeiten - eigene Designs versteht sich. Jetz stehe ich vor einem Problem. Folgender Screen sollte mein Problem etwas verdeutlichen:
[ IMG]http://xs223.xs.to/xs223/08036/button_prob871.png[/ IMG]

Ich bringe es einfach nicht hin, den Abstand zwischen den beiden Buttons zu entfernen. So sollte es aussehen.
[ IMG]http://xs223.xs.to/xs223/08036/button_prob2112.png[/ IMG]

Weiss einer, wie ich den Abstand wegbringe?

Danke!
 
margin und padding 0 und nichts geändert ?

poste doch den Code von den 2 "buttons" und den Css teil dazu, falls extern.

mfg
 
Gerne!

HTML-Code für die 2 Buttons:
Code: 
      <div id="navi">

         <img src="img/s_dark_blue/navi/button_home_on.png" border="0" height="58" width="282" />
          <img src="img/s_dark_blue/navi/button_forum_on.png" border="0" height="58"  width="206" />

      </div>

CSS habe ich nichts, was die Buttons betrifft. Könnte das Problem etwa daran liegen?
 
Hallo,

da diese Frage oft auftaucht und mich gruenspan dankenswerter Weise darauf hingewiesen hat ist hier die Lösung für alle ungeklärten weißen Streifen oder Abstände:

Füge am Anfang deiner CSS Datei einfach folgendes ein:
Code:
* {
margin:0px;
padding:0px;
}
Falls du (noch) keine Stylesheets oder derartige Angaben in deiner Datei hast füge folgenden Abschnitt in den HEAD-Bereich des Skriptes:

Code:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
</style>
Falls du diese Tipps/Tricks befolgt hast und immer noch "komische" oder "unerklärliche" Abstände hast kannst du gerne weiterhin einen Thread eröffnen!
Zum Vergrößern anklicken....
Link : http://www.html.de/html-und-xhtml/14582-faq-woher-kommen-die-abstaende.html
Das ist der Thread de Maxi gemeint hat, wenn du kein CSS hast, hast ihn ja auch nicht befolgt.

Probiers mal so wies da steht und schau ob sich was ändert, ansonsten wieder posten ;)
 
Eine externe .css Datei habe ich. Ich habe auch die Anweisungen befolgt, jedoch ohne Erfolg. Ich meinte, meine .css Datei enthält keine Befehle, welche Auswirkungen auf die Navigation bzw. auf die Buttons hätten.
 
dann schreib mal in deine CSS :
Code: 
#navi {
   margin: 0px;
   padding: 0px;
}
und rücke dann die Bilder ganz zusammen, also so, dass kein Space mehr dazwischen ist ( denke es liegt an dem ;) )
also so :
HTML: 
 <div id="navi">

         <img src="img/s_dark_blue/navi/button_home_on.png" border="0" height="58" width="282" /><img src="img/s_dark_blue/navi/button_forum_on.png" border="0" height="58"  width="206" />

      </div>
mfg
 
Hi,

das Phänomen heißt "whitespace".
Bei mit display:inline; erstellten horizontalen Navigationen kommt es zwischen den Listenelementen zu einem Abstand.

Der Grund liegt im HTML-Quelltext, wg. Zeilenumbrüchen und Einrückungen gibt es jede Menge Leerstellen und die werden in dem Fall zu einer Leerstelle zusammengefaßt.

Lösung:
1. Die ganze Liste ohne Umbrüche oder Leerstellen in eine Reihe schreiben. Da wird der HTML-Code sehr unübersichtlich.

2. Ein negativer rechter margin für die Listenelemente.

3.Eine weitere Leerstelle einfügen:
Code: 
<li><a href="index.html">Startseite  </a></li>
und zwar direkt vor </a>.

4. Die Listenelemente statt mit display:inline; mit float:left; nebeneinzustellen.
 
koslowski schrieb:
Hi,

das Phänomen heißt "whitespace".
Bei mit display:inline; erstellten horizontalen Navigationen kommt es zwischen den Listenelementen zu einem Abstand.

Der Grund liegt im HTML-Quelltext, wg. Zeilenumbrüchen und Einrückungen gibt es jede Menge Leerstellen und die werden in dem Fall zu einer Leerstelle zusammengefaßt.

Lösung:
1. Die ganze Liste ohne Umbrüche oder Leerstellen in eine Reihe schreiben. Da wird der HTML-Code sehr unübersichtlich.

2. Ein negativer rechter margin für die Listenelemente.

3.Eine weitere Leerstelle einfügen:
Code: 
<li><a href="index.html">Startseite  </a></li>
und zwar direkt vor </a>.

4. Die Listenelemente statt mit display:inline; mit float:left; nebeneinzustellen.
Zum Vergrößern anklicken....

er hat ja gar keine Liste, er hat nur 2 bilder nebeneinander ;)
 
Hi,

er hat ja gar keine Liste, er hat nur 2 bilder nebeneinander
Zum Vergrößern anklicken....
hab nur die beiden Buttons gesehen und sofort an Linkliste gedacht (wie es ja auch korrekterweise gecodet gehört hätte).

Ursache des "whitespaces" und Behebung desselben waren auf jeden Fall korrekt von mir beschrieben, wenn auch etwas zu ausführlich.

Margin/padding auf null setzen hilft da nämlich nix.:smile:
 
Habe nun versucht, die Navigation per <ul> einzufügen. Jedoch, wie kriege ich es hin, dass die Liste vertikal dargestellt wird? Was genau muss ich in meiner externen .css Datei einfügen? Kann da leider nichts finden auf selfhtml. Bloss ( vertical-align ) wobei dies nicht geht bzw. wohl gar nicht gehen kann... Sry für die ständige Fragerei. :)
 
Mit float :
HTML: 
  #nav {
margin : 0px;
padding : 0px;
list-style : none; 
}
  #nav img {
display : block;
border : none;
}
  #nav li {
float : left;
/* Stellt li nebeneinander da */
}
.clearer {
clear : both;
/* Stellt normalen Elementenfluss wieder her */
}
Für diese Liste:
HTML: 
<ul id="nav">
<li>
<img src="button_links.png" alt="home" width="227" height="43" />
</li>
<li>
<img src="button_rechts.png" alt="forum" width="205" height="42" />
</li>
<br class="clearer"/>
</ul>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben