Lücke durch Form-Element

Status
Nicht offen für weitere Antworten.
D

dp25

Grünschnabel
Hallo,

ich habe folgenden Seitenaufbau

PHP: 
<div>
...
</div>
 
 
<div>
<form>
... Formular
</form>
</div>
 
 
<div>
...
</div>

Nun ist jedoch zwischen dem mittleren und dem letzten DIV aufgrund des form-Tags eine Lücke zu sehen.
Hat jemand eine Idee, wie ich die weg bekomme?

Danke!!
 
Hi,

setz mal den Außenabstand des Formular-Elements auf null:

Code: 
form {
margin: 0;
}
bzw. für den unteren Außenabstand:

Code: 
form {
margin-bottom: 0;
}
 
hi, danke, Habe aber durch Reduzieren des Codes festgestellt, dass es an dem span-Element liegt.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE">
<html>
<head>
<style type="text/css">
div, span, p, td     { font-family:Tahoma,Arial,sans-serif;
                    font-style:normal;
                    font-size:13px;
                    font-

                  }
                  
.footer           { font-size:10px;
                    color:#888888;
                  }
                  
form {
margin: 0;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>


<body style="margin:0px;">

<div style="width:100%; background-color:#FF0000;">
	<div style="text-align:center;">
		<img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" alt="" height="181" width="882" />
	</div>
</div>

<div style="width:100%; background-color:#00FF00;">
	<div style="text-align:center;">
		<img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="32" />
		<span style="line-height:63px; margin-top:10px; vertical-align:top">abc</span>
		<img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="55" />
	</div>
</div>

<div style="width:100%; background-image:url('#0000FF')">
	<div style="margin:auto; width:820px; overflow:visible;">
		<table width="100%" border="0" style="margin:0px; background-color:#999900">
			<tr><td style="width:182px; overflow:visible; vertical-align:top;">MENÜ</td>
			<td style="width:638px; overflow:visible; vertical-align:top; background-color:#009999">Content</td></tr>
		</table>
	</div>
</div>

Ich will in der Mitte des Textes (bei abc) später dann ein Input-Element anzeigen, dass ca. 10px von oben beginnen soll. Allerdings interpretieren IE und Mozilla das "line-height:63px; margin-top:10px; vertical-align:top" auch unterschiedlich.
Habt ihr eine Idee, wie ich das hinbekomme und die Lücke weg bekomme?

P.S. ich habe allen Code innerhalb der DIVs auf 1 Zeile, sodass Lücken durch Tabulator/Enter wie im o.g. Code ausgeschlossen sind; nur zum übersichtlicher darstellen.
 
Hi,

es liegt nicht an dem span-Element, sondern an den Zeilenumbrüchen und Einrückungen im HTML-Code zwischen <div> ... </div> und den Grafik-Elementen, die der IE mit Verschiebungen im Layout quittiert.

Hier mein Lösungsvorschlag:

Code: 
<div style="width:100%; background-color:#FF0000;height:181px;overflow:hidden;">
        <div style="text-align:center;">
                <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" alt="" height="181" width="882"/>
        </div>
</div>

<div style="width:100%; background-color:#00FF00;">
        <div style="text-align:center;height:63px;overflow:hidden;">
                <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="32" />
                <span style=" margin-top:10px; vertical-align:top">abc</span>
                <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" border="0" height="63" width="55" />
        </div>
</div>
 
ok, danke zumindest löst das das 2. Problem erstmal. Allerdings tritt das problem wie gesagt auch wenn ich alles auf 1 Zeile schiebe auf. An den Zeilenumbrüchen/Einrückungen kann es also nicht liegen.

Hier nochmal übersichtlich alles:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE">
<html>
<head>
<style type="text/css">
div, span, p, td     { font-family:Tahoma,Arial,sans-serif;
                       font-style:normal;
                       font-size:13px;
                     }
                   
body                 { margin:0px;
                     }
				   
div.div1             { width:100%;
                       background-color:#FF0000;
                       text-align:center;
                       height:63px;
                       overflow:hidden;
                     }

img.img1             { height:63px;
                       width:32px;
                     }
				   
span.text1           { line-height:63px;
                       margin-top:5px;
                       vertical-align:top;
                     }
</style>
</head>


<body>

<div class="div1">
	<img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" class="img1">
	<span class="text1">abc</span>
</div>

</body>
</html>

nun will ich nur noch, dass ich das "abc" in der Höhe beeinflussen kann. Das funktioniert absolut nicht!? Wer weiß Abhilfe?
 
Hierfür muß das Inline-Element span "Block-Level-Charakteristika" erhalten:

Code: 
img.img1 { 
height:63px;
width:32px;
float:left;
}
				   
span.text1  { 
display:block;
margin-top:5px;
vertical-align:top;
}
 
Nachtrag: Da das Ganze ja später durch ein Formularfeld ersetzt werden soll, lautet der dazugehörige Quellcode folgendermaßen:

Code: 
img.img1, img.img2 {
height:63px;
width:32px;
}

img.img1 { 
float:left;
}

img.img2 { 
float:right;
}
Code: 
<div class="div1">
        <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" class="img1">
        <img src="http://www.the-edge.ws/schnitzler/images/covers/gelb.jpg" class="img2">
        <form style="margin-top:5px;"><p><input type="text"></p></form>
</div>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück