Div: vertikale Ausrichtung von Text & Bild - geht nicht..

Status
Nicht offen für weitere Antworten.
Hallo zusammen,
Ich bin recht neu hier und habe auf dieser Community trotzdemschon viele Tutorials durchgelesen. Zur Frage:
Ich habe ein Problem im Div. Ich kriege den Text nicht mit Vertical-Align nach oben geschoben. Egal was ich versuche. Ich habe die Forumsuche benutzt und keine Lösung gefunden.

Hier ist die fehlerhafte Seite:
http://www.plattenzerstoerer.com/help

Oben neben den Banner "SaureWelt" soll der Text und der Button nach oben geschoben werden.

Der CSS-Code:
Code:
body{
color:black;
background:#ebf3e9;
background-image: url(images/hg2.gif);
padding:0;
margin:0;
font:13px verdana, sans-serif;}

#head{
color:black;
background-image: url(images/hg2.gif);
border-bottom:0px solid black;
padding-top:20px;
margin:0 0 30px 0;

}
#head2{

color:white;
min-height:138px;
max-height:138px; 
background-image: url(images/hg1.gif);
background-repeat: repeat;
padding-top:138px;
padding:0px;
margin:0;
vertical-align:text-top;
border-top:0px solid black;
font:bold 10px tahoma;
}

#menu{
background-image: url(images/hg2.gif);
float:left;
width:150px;}
#menu ul{
background-image: url(images/hg2.gif);
margin:0 0 20px 10px;
padding:0;
list-style:none;
width:150px;}
#menu li{
padding:0 0 2px 0;

/*der abstand zw den menupunkten kann wegen dem ie nicht mit margin gesetzt werden*/
margin:0;
background-image: url(images/hg2.gif);}
#menu a{
width:120px;
/*die breitenangabe wir nur vom ie benoetigt*/
display:block;
color:white;
background:#538c4a;
border:1px solid black;
padding:4px 4px 4px 10px;
font-weight:bold;
font-size:12px;
text-decoration:none;}
#menu a:hover{
color:black;
background:#a9d69e;
border:1px solid black;}


#content{margin:0 80px 20px 190px;}
#content h2{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 16px verdana, sans-serif;
border-left:10px solid #538c4a;
border-bottom:1px solid #538c4a;}



Und hier der HTML-Code von der Index.php:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>...SaureWelT.</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="old.css" />
<style type="text/css">
<!--
@import url(main.css);
-->
</style>
</head>
<body>
<div id="head">
</div>

<div id="head2">
<img alt="" border="0" src="images/index_01.gif" >
jo123
<img alt="" border="0" src="images/btn/home.gif" >
</div>

<div id="menu">
<ul>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
</ul>

<ul>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
</ul>

<ul>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
	<li><a href="#">Irgendwas</a></li>
</ul>
</div>

<div id="content">
<h2>Zweite &Uuml;berschrift</h2>

<p><a href="www.google.de"><strong>Google</strong></a><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>


</div>
</body>
</html>

Ich hoffe ihr könnt mir helfen, Ich bin schon ganz verzweifelt.

Liebe Grüße von mir.
:)
 
Code:
#head2{

color:white;
min-height:138px;
max-height:138px; 
background-image: url(images/hg1.gif);
background-repeat: repeat;
padding-top:138px;
padding:0px;
margin:0;
vertical-align:text-top;
border-top:0px solid black;
font:bold 10px tahoma;
}

das beisst sich, einfach das padding-top verringern

mfg

edit meint: da steht ja noch ein padding: 0; drunter.

versuch es einfach mal mit:
Code:
#head2{

color:white;
height:138px; // <-- besser als min und max-height
overflow: hidden; // wegen max. höhe
background-image: url(images/hg1.gif);
background-repeat: repeat; // <-- ist die Grafik so breit wie der gesamte Header sonst repeat-x
padding: 100px 0px 0px 0px; // top right bottom left hab den oberen Abstand verringert
margin:0;
vertical-align:text-top;
border-top:0px solid black;
font:bold 10px tahoma;
}
 
Zuletzt bearbeitet:
Hi,

nimm mal im Selektor #head2 die padding-top:138px heraus, bzw. verringere den gesetzten Wert, damit der Inhalt zum oberen Elementrand wandert.

Die vertical-align-Eigenschaft lässt sich zudem nicht auf Blockelemente, wie z.B. das div-Element, sondern nur auf Inline-Elemente anwenden.
 
Also Ich habe Padding top etc. rausgemacht.
Das ganze funktioniert zwar wunderbar, aber nur wenn das Logo "SaureWelt" entfernt wird. Ansonsten gehen die nächsten Bilder und Texte nach unten zum ende des Bildes.

Das Problem könnte, glaube Ich, gelöst werden, indem Ich ein weiteres Div rechts neben den Logo erstelle.

Ich weiß aber nicht wirklich wie ich das anstellen kann.

Tut mir Leid, falls ich euch bischen Aufwand mache.

Liebe Grüße, Saurerregen_
 
Setz mal im ersten Grafikelement vertical-align:top ein, damit der umfliessende Text am oberen Elementrand ausgerichtet wird.

Code:
<img alt="" border="0" src="images/index_01.gif" style="vertical-align:top">
 
Sorry für die kleine Störung. Aber es gibt ein weiteres Problem. Mit Texten und Grafiken funktioniert die Lösung. Allerdings wird bei Verwendung eines Formulars das Formular unter dem Banner angezeigt.

Ich würde mich freuen wenn ihr mir dabei irgendwie helfen könntet. Ich habs mit Paddingwerten und mit vertikaler Ausrichtung probiert, aber es scheint einfach nicht zu klappen.

Liebe Grüße,
Saurerregen :)
 
Hi,

das sollte sich mit der float-Eigenschaft einrichten lassen, da das form-Element zu den Blockelementen gehört, und daher einen Absatz im Textfluss erzeugt.

Code:
<img alt="" border="0" src="images/index_01.gif" style="float:left;"><form action="">...</form>
 
Status
Nicht offen für weitere Antworten.
Zurück