Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Abstände verringern
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Abstände verringern

Pages: [1]
geschrieben von royter am 25.03.2006 - 16:07
Hallo,

sicher eine einfache Frage, aber ich kommt nicht so recht darauf. Wenn ich folgenden Quellquote habe:

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 

<?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Allgemeines Block-Element</title>
</head>
<body>
<div align="center">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>
</body>
</html>
?>



Wie kann ich dann per CSS den Abstand zwischen der h1 überschrift und der liste verringern? Das gleiche gilt für <hr> etc., denn der haut mir da immer ein viel zu großen Abstand rein!

Vielen Dank im voraus für eure Hilfe!

Gruß,
royter

geschrieben von Micha am 25.03.2006 - 16:47
Hi,

bist Duch sicher, das Du _unbedingt_ dieses DIV brauchst?

Da Du alles zentrieren möchtest sollte ein
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

body { 
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}


schon mal ausreichen um dieses DIV vollständig zu ersetzen; wir wollen ja gleich am Anfang auf eine sematische Mischung achten und keine DIV-Suppe erzeugen.

Deine anderen "Probleme" kannst Du mit padding und margin lösen...

Micha

geschrieben von royter am 25.03.2006 - 17:00
Ich hab diesen Quelltext mal fix aus SELFHTML kopiert, da er in (vereinfachter) Form meinem eigenen entspricht. Dessen Design baut gänzlich auf CSS auf, und von daher brauch ich das div. Mir geht's auch nicht drum, dass das zentriert sein soll, sondern wirklich nur um den Abstand.

geschrieben von Micha am 25.03.2006 - 17:04
Hallo,

wie geasgt, für Deine eigentliche Frage ist margin/padding verantwortlich bzw. zu nutzen. Da Du ein CSS-Layout möchtest, was zu begrüßen ist, hatte ich darüberhinaus nur das align="xyz" in einem nicht nötigen DIV bemängelt ;)

Das ist natürlich alles wertfrei , da ich _nur_ diese Beispielseite kenne und nicht Deine ganze Bemühung.

Schöne Grüße Micha

geschrieben von royter am 25.03.2006 - 17:18
Also dann hab ich aber wirklich keine ahnung, wie ich margin bzw. padding einsetzen soll. Hier ist mal der problematische Teil des textes:

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 

<?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de">
<head>
<title>---</title>
<style type="text/css">
<!--
.uebersicht {
padding-top:10px;
padding-left:10px;
border-width:0px 1px 0px 0px;
border-style:dotted;
border-color:#ADADAD;
background-color:#FFFFFF;
float:left; width:168px;
}
hr {
border:dashed #ADADAD;
height:1px;
}
ul.navi {
font-size:0.9em;
list-style-type:square;
}
//-->
</style>

</head>
<body>
<div class="uebersicht">
<h2>ueber uns</h2>
<hr />
<ul class="navi">
<li><a href="index.htm#">12</a></li>
<li><a href="index.htm#">13</a></li>
<li><a href="index.htm#">14</a></li>
</ul>
<hr />
<h2>weiters...</h2>
</div>
</body>
</html>
?>

geschrieben von Micha am 25.03.2006 - 17:24
Hallo,

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 

h2 {
	margin:0;
	padding:0;
}

ul {
	margin:0 0 0 20px;
	padding:0;
}

hr {
	margin:0;
	padding:0;
}


schiebt bei mir alles zusammen...

Micha

geschrieben von royter am 26.03.2006 - 12:08
Lol, ja, jetzt gehts.

Leider hab ich aber noch ein Problem:

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 

<?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de">
<head>
<title>---</title>
<style type="text/css">
.bilder  {

border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#000000;
background-color:#ADADAD;
padding:0;
margin:0;
}
hr {
border:dashed #ADADAD;
height:1px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="bilder">
<img src="test.jpg" alt="test" height="95" width="722" />
</div>

<hr />
</body>
</html>
?>



Jetzt hab ich padding schon auf 0 gesetzt, aber trotzdem findet sich unter dem Bild noch ein kleiner Abstand zum Rand! Was habe ich da denn schon wieder falsch gemacht?

Außerdem zeigt mir Firefox die Trennlinie viel zu dick an, obwohl sie doch nur auf 1px Höhe steht. Opera geht sogar noch ein ganzes stück weiter und zeigt sie mir doppelt an?! Im Internet Explorer hab ich keine Probleme.

Vielen dank für die ganze Hilfe!

Gruß,
royter


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.