Bildposition bei unterschiedlicher Auflösung @ tutorials.de: Tutorials, Forum & Hilfe

buddha · 25.05.07 11:51

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.

HTML-Code:

<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>&Uuml;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

Maik · 25.05.07 12:45

Hi,

kannst du mal die CSS-Regeln für das DIV bilder posten, und falls vorhanden, auch die der Grafiken, denn von einer Positionierung der Bilder kann ich in deinem geposteten Quellcode nichts entdecken - derzeit wird das DIV bilder nicht vom Text umflossen, sondern erzeugt einen neuen Absatz, und die Bilder liegen in einer Reihe nebeneinander.

buddha · 25.05.07 13:10

Hallo,
Hier der Quelltext.

HTML-Code:

<!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>lupa communication</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
#bilder{ 
	position:absolute; top:440px;
	height: 190px;
	width: 210px;
	margin: 20px;
	}
	
#rahmen{ border:#003300 solid 1px;
	}
	
#einzug{ margin-left:250px
	}


 -->
</style>
</head>
<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>&Uuml;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. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</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 -->
</body>
</html>

Maik · 25.05.07 13:19

Versuch es mal so:

Code :

#bilder{
        [b]position:relative;[/b]
        [b]top:0px;[/b]
        height: 190px;
        width: 210px;
        margin: 20px;
        [b]float:left;[/b]
        }
 
#footer{
        width: auto;
        height:14px;
        background-color:#CAFFCA;
        font-weight:100;
        color:#464E42;
        font-size:9px;
        [b]clear:left;[/b]
        }

Code :

1
2
3

<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>
[b]<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>[/b]
<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>

buddha · 25.05.07 14:42

Hallo,
Das hat geklappt

.
Wie kann ich verhindern das auf der Seite gescrollt erden muß? In meinem ersten Versuch habe ich den content so bestimmt

Code :

#content { 
    width:800px; 
    background-color:#FFFFFF;
    color:#000000;
    margin: 30px auto 20px auto; 
    border:#000000 solid 1px;
    border-color: #B7FFB7; 
    }

Im zweiten Anlauf so, in der Annahme das man nicht scrollen muß?

Code :

#content { 
    width:80%; 
    background-color:#FFFFFF;
    color:#000000;
    margin: 30px auto 20px auto; 
    border:#000000 solid 1px;
    border-color: #B7FFB7; 
    }

In beiden Modellen habe ich die Höhe vom content festgelegt, aber ich muß trotzdem scrollen, zumindest auf dem Notebook 15" 1024x768 Auflösung. Weiß jemand Rat

Danke

Maik · 25.05.07 14:50

Der Inhalt deiner Beispielseite ist nunmal so groß, dass bei der genannten Auflösung die Seite im Browserfenster vertikal gescrollt werden muß.

buddha · 25.05.07 14:58

Hi,
Wenn ich das recht verstehe gibt es da keine Möglichkeit, ausser Abstände und font-size zu verringern bzw, den content mit weniger zu auszufüllen?
Gruß Rico

Maik · 25.05.07 15:03

Warum willst du denn das Scrollen der Seite verhindern?

buddha · 25.05.07 15:08

Ich wollte das probieren ob es so eine Möglichkeit gibt, aber das hängt ja vom Inhalt des contents ab-in diesem Falle gehts nicht.
Gruß Rico

Maik · 25.05.07 15:14

Alternativ könntest du eine scrollbare Content-Box einrichten, mit feststehendem Header und Footer, wie z.B. http://www.cssplay.co.uk/layouts/bodyfix.html.

buddha · 25.05.07 15:20

Das ist eine Möglichkeit, werde ich mal machen.
Danke

buddha · 25.05.07 16:41

Hi,
Naja ist eigentlich nicht schlecht, aber wie bekomme die horizontale scrollbar weg.
Ich habe im content den Befehl - overflow - mit verschiedenen Anweisungen probiert (hidden,auto etc. ) kein Erfolg.
Gruß Rico

Maik · 25.05.07 16:55

Im Original ist keine horizontale Scrollleiste vorhanden. Wie lautet denn der neue vollständige Quellcode (HTML + CSS) deines Dokuments?

buddha · 25.05.07 18:04

Hi,

HTML-Code:

<!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>lupa communication</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
#bilder{ 
	position:absolute; top:440px;
	height: 190px;
	width: 210px;
	margin: 20px;
	}
	
#rahmen{ border:#003300 solid 1px;
	}
	
#einzug{ margin-left:250px
	}

 -->
</style>
</head>
<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>&Uuml;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. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</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">&copy;RMPC-Internet 2007 </div>
</div>
<!--finish content -->
</body>
</html>

Code :

/* lupa layout green */
 
body{ 
    background-image:url(../bilder/hintergrund.gif); 
    background-repeat:repeat;
    }
 
#content { 
    width:800px; 
    background-color:#FFFFFF;
    color:#000000;
    margin: 30px auto 20px auto; 
    border:#000000 solid 1px;
    border-color: #B7FFB7; 
    overflow:auto;
    }
 
#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:60px;
    }
#footer{
    width: 800px;
    height:14px;
    background-color:#CAFFCA;
    font-weight:100;
    color:#464E42;
    font-size:9px;
    }

Ich habe eine horizontale und eine vertikale Leiste

Gruß Rico

Maik · 25.05.07 18:34

Bei mir taucht da kein horizontaler Scrollbalken auf. Und wo ist die scrollbare Box à la Stu Nicholls' Beispiel http://www.cssplay.co.uk/layouts/bodyfix.html?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bildposition ermitteln

Bildposition ändert Seiteninhalt

Bildposition eigeben zum Ausrichten?

Linkfarbe ändern/ Bildposition bestimmten

Videos mit unterschiedlicher Auflösung

E-Mail:

Abonnieren Abbestellen