Hallo,
Ich habe vier Fotos die links unten positioniert sind mit einer margin von 20px. Das haut auch hin bei 1024x768 Auflösung . Wenn ich jedoch die Auflösung verändere schieben sich die Fotos entweder aus dem content bzw. der Text fliesst hinter die Fotos. Die margin beträgt 20px. Es soll so sein, das das die Position immer gleich bleibt auch bei verschiedenen Auflösungen und der text um die Fotos herumfliesst.
Gruß Rico
Ich habe vier Fotos die links unten positioniert sind mit einer margin von 20px. Das haut auch hin bei 1024x768 Auflösung . Wenn ich jedoch die Auflösung verändere schieben sich die Fotos entweder aus dem content bzw. der Text fliesst hinter die Fotos. Die margin beträgt 20px. Es soll so sein, das das die Position immer gleich bleibt auch bei verschiedenen Auflösungen und der text um die Fotos herumfliesst.
HTML:
<body>
<div id="content"> <img src="bilder/lupa.png" alt="logo" width="262" height="105" hspace="20" vspace="20" />
<div id="tabsC">
<ul>
<!-- CSS Tabs -->
<li><a href="beratung.html"><span>Beratung</span></a></li>
<li><a href="coaching.html"><span>Coaching</span></a></li>
<li><a href="mediation.html"><span>Mediation</span></a></li>
<li><a href="impressum.html"><span>Impressum</span></a></li>
<li><a href="About.html"><span>Über uns</span></a></li>
</ul>
</div>
<h1 align="center">Willkommen bei lupa communication</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p id="einzug">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. </p>
<div id="bilder"> <img id="rahmen" src="bilder/kolibri.jpg" alt="kolibri" vspace="1"/> <img id="rahmen" src="bilder/kugel.jpg" alt="kugel" vspace="1"/> <img id="rahmen" src="bilder/tropfen.jpg" alt="tropfen"/> <img id="rahmen" src="bilder/landschaft.jpg" alt="landschaft"/> </div>
<div align="center" id="footer">TEST </div>
</div>
<!--finish content -->
Code:
body{
background-image:url(../bilder/hintergrund.gif);
background-repeat:repeat;
}
#content {
width:80%;
background-color:#FFFFFF;
color:#000000;
margin: 30px auto 20px auto;
border:#000000 solid 1px;
border-color: #B7FFB7;
}
#logo {
background-image:url(../bilder/lupa.png);
position: relative; margin-left:20px;
background-repeat:no-repeat;
margin:0;
}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: small; font-weight:lighter;
margin: 16px;
}
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 18px; color:#000000;
margin-top:90px;
}
#footer{
width: auto;
height:14px;
background-color:#CAFFCA;
font-weight:100;
color:#464E42;
font-size:9px;
}Gruß Rico
Anhänge
Zuletzt bearbeitet:
.
