2 Bilder untereinader positionieren
0 
Felix Riesterer
0 1 Felix Riesterer
0 0 Felix Riesterer
1
0
2 Bilder untereinader positionieren
Hallo!
Habe ein Problem- möchte in einer Division 2 Bilder untereinander positionieren und wenn ich das regulär mache mit Padding , dann drückt es mir das andere Bild soweit runter das es komplett aus dem Layout verschwindet.
Ich weiß wohl das es mit Postion absolut geht, aber ich habe mal gehört das man absolute Positionierung vermeiden soll.
Ich weiß kein Rat kann mir jemand helfen?
Gruß
Micha
-
Liebe(r) micha_eintausend,
Ich weiß kein Rat kann mir jemand helfen?
bitte gib uns ein Beispiel oder einen Link zu einer Beispielseite!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body,td,th {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 96%;
background-color:#5C5858;
}* {
margin:0;
padding:0;
}#layout {
width : 955px;
height : 600px;
margin : 36px auto 0 auto;
background-image : url(bilder/hintergrund.jpg);
background-repeat : no-repeat;
background-position : center 0%;
/*border : 1px solid green;*/
}#inhalt {
height : 550px;
margin-right: 152px;
padding: 0px;
/*border: 1px solid red;*/
}#navi {
float: right;
height : 550px;
width:150px;
padding: 0px;
/*border: 1px solid black;*/
}#fuss {
background-color:#C20339;
height : 50px;
clear: both;
padding: 0;
/*border: 1px solid blue;*/
}
#text {
padding-left:150px;
padding-top: 120px;
}#menue {
margin-top: 150px;
width:150px;
font-size:12px;}
#menue ul, #menue li {
list-style-type: none;
padding: 0px;
margin: 0px;}
#menue li a:link, #menue li a:visited, #menue li a:active {
display:block;
background-color:#C20339;
color:#fff;
text-decoration:none;
margin-bottom: 4px;
margin-top: 4px;
padding-left: 5px;
height: 24px;
line-height: 24px;
}#menue li a:hover {
background-color:#337F3F;
color:#fff;
}
#unterschrift {
padding-top: 1px;
text-align: center;
font-size: 2.4em;
color:#fff;
}
#leiste {
padding-top: 420px;}
.schriftzug {
width: 100%;
height: 100%;padding-top: 110px;
padding-left: 150px;}
h1,h2,h3 {
color: Maroon;
}
h1 {
text-align: center;
font-size: 2.3em;
color:#fff;
}h2 {
text-align: center;
font-size: 1.8em;
color:#fff;
}h3 {
font-size: 1.3em;
padding-top: 5px;
}
</style></head>
<body>
<div id="layout"><div id="navi">
<div id="menue">
<ul >
<li><a href="index.html" onfocus="this.blur()">punkt1</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt2</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt3</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt4</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt5</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt6</a></li>
</ul>
</div>
</div>
<div id="inhalt"><div id="leiste"><img src="bilder/leiste.gif" width="955" height="130" /></div>
<div class="schriftzug"><img src="bilder/schriftzug.gif" width="325" height="146" /></div></div>
<div id="fuss">
<div id="unterschrift">Meine Private Hompage
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------
Es sind die beiden Bilder Schriftzug. gif und leiste.gif in der Devision Inhalt gemeint.Danke für die schnelle Antwort gruß
Micha-
Liebe(r) micha_eintausend,
da wäre mir dann doch ein Link lieber gewesen! Dieser ellenlange Quelltext ist eine Zumutung! Hattest Du Dir die Tipps für Fragende nicht bis zum Ende durchgelesen? Da steht, dass Du Deinen Quelltext auf das Wesentliche gekürzt posten sollst!
Naja, schauen wir uns Dein Werk einmal genauer an:
<div id="navi">
<div id="menue">
<ul >
<li><a href="index.html" onfocus="this.blur()">punkt1</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt2</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt3</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt4</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt5</a></li>
<li><a href="index.html" onfocus="this.blur()">punkt6</a></li>
</ul>
</div>
</div>Wozu musst Du die Navi in ein erneutes <div> setzen? Warum reicht hier nicht
<ul id=navi">...</ul>?<div id="inhalt"><div id="leiste"><img src="bilder/leiste.gif" width="955" height="130" /></div>
<div class="schriftzug"><img src="bilder/schriftzug.gif" width="325" height="146" /></div></div>
Warum nur meinen alle Anfänger, dass man mit einer solchen <div>-Suppe richtig läge? Der ID "leiste" nach zu urteilen möchtest Du hier irgendeine Art Leiste haben. Das macht man sinnvollerweise mit einem Hintergrundbild. Du setzt hier aber ein <img>-Element ein. Und das sitzt auch wieder in einem <div>, in welchem sonst nix sitzt! Also wozu das <div>?? Ebenso verhält es sich mit dem Schriftzug. Was willst Du erreichen?
Da Du mir nur diesen Quelltext gegeben hast, und sonst nix an brauchbaren Hinweisen, kann ich hier nur meckern, ohne dass es Dir jetzt konkret weiterhilft.
Hättest Du mir stattdessen einen Link zu einer Testseite gegeben, dann hätte ich wenigstens die Grafiken sehen und daraus dann so manches erschließen können, aber so...
<div id="fuss">
<div id="unterschrift">Meine Private Hompage
</div>
</div>Gleicher Mist, wie oben. Hier würde reichen:
<p id="fuss">Meine Private Website</p>Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
erst einmal vielen Dank, habe meinen Quelltext aufgeräumt wie du es meintest und siehe da jetzt klappt es.
Aber ich hätte da noch nee Frage, dass mit den absoluten Positionen, sollte man doch vermeiden oder sehe ich das Falsch?
Viele arbeiten mit Z-Index (Ebenen), dass ist ziemlich einfach aber das sollte mann doch auch vermeiden?Vielen, Vielen Dank nochmal für deine Hilfe und der schnellen Antwort!
Gruß
Micha-
Liebe(r) micha_eintausend,
Aber ich hätte da noch nee Frage
und wo ist der versprochene Link zu dieser Frage?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix! Ist leider noch nicht im Netz deshalb konnte ich dir auch nur den Quelltext schicken bin neu und habe noch keinen Provider (kommt nächste Woche)!!
Aber zu meinen beiden letzten Fragen - sie bezogen sich nicht auf mein Quelltext, der ist ja, dank dir,super- das waren allgemeine Fragen interessehalber.
Gruß
Micha
-
-
Ciao!
Aber ich hätte da noch nee Frage, dass mit den absoluten Positionen, sollte man doch vermeiden oder sehe ich das Falsch?
Viele arbeiten mit Z-Index (Ebenen), dass ist ziemlich einfach aber das sollte mann doch auch vermeiden?Wenn Du es einfach findest und es das tut, was es soll, dann ist es okay. Absolute Positionierung ist nichts grundsätzlich Verwerfliches, aber man muß sich halt darüber im Klaren sein, daß man die betroffenen Elemente damit aus dem Fluß nimmt. Das hat weitreichende Konsequenzen: Sie nehmen dann keinen Einfluß mehr auf die Ausmaße ihrer Elternelemente, sie können weder etwas umfließen noch selbst umflossen werden etc. Diese Konsequenzen werden oft als unerwünschte Nebenwirkungen wahrgenommen, wenn sie mal wieder mehr neue Probleme schaffen als alte lösen.
Zudem neigen Leute, die vieles absolut positionieren, oft dazu, die Positionen auch noch alle pixelgenau vorzugeben - mit dem Ergebnis, daß sich die Seite dann weder der Viewportgröße anpaßt noch Schriftgrößenänderungen verträgt. Das Resultat sind dann horizontale Scrollbalken, überlappende Bereiche, versteckte Texte und ähnliche Ärgernisse. Und diese Usability-Probleme sollte man sich, egal für welches tolle Photoshop-Design, niemals einhandeln.
Viele Grüße vom Længlich
-
-
-
-
-
Tachchen!
Ich weiß kein Rat kann mir jemand helfen?
Hindert dich irgendwas, die Bilder in eine Liste zu packen oder
ihnen selbst ein Blocklevel-Verhalten zuzuweisen?Gruß
Die schwarze Piste