✔ Bildposition bei unterschiedlicher Auflösung

Status
Nicht offen für weitere Antworten.
Wenn du aus dem gezeigten Beispiel die Höhe von 400px auf "X"px verringert hast, dann wird da wohl in der Box zu wenig Platz für den Inhalt sein, der evtl. noch zusätzlich mit diversen margin-Angaben formatiert ist.

Für sachdienlichere Hinweise solltest du auch mal den ganzen Quellcode deiner Seite zeigen, damit man hier auf dem Stand der Dinge ist, und sich nicht alles zusammenreimen muß.
 
Hier der Code

HTML: 
<!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;}*/

#bilder{
    position:relative;
    top:0px;
    height: 190px;
    width: 210px; margin-bottom:0; margin-right:20px; margin-left:20px; margin-top:0;
    float:left;
    }

#footer{
        width: auto;
        height:14px;
        background-color:#CAFFCA;
        font-weight:100;
        color:#464E42;
        font-size:9px;
        clear:left;
        }
	
#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>
  <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>
<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 align="center" id="footer">TEST</div>
</div>
<!--finish content -->
</body>
</html>

Code: 
/* lupa layout green */

body{ 
	background-image:url(../bilder/hintergrund.gif); 
	background-repeat:repeat;
	}

#content { 
	width:80%; 
	height: 600px;
	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:90px;
	}

/*#footer{
	width: auto;
	height:14px;
	background-color:#CAFFCA;
	font-weight:100;
	color:#464E42;
	font-size:9px;
	}*/
 
Ich sehe einen vertikalen Scrollbalken im Browserfenster, wenn ich von 1280*1024 auf 1024*768 switche, da für die Box content eine Höhe von 600px und ein vertikaler Außenabstand von insgesamt 50px definiert wurde, was nach dem Boxmodell eine Boxhöhe von 650px ergibt, der Anzeigebereich meines eingesetzten Browsers bei der genannten Auflösung aber nur eine Höhe von 570px besitzt. ;)
 
Hi,
Ich habe auch in der 1024x768 Auflösung keinen vertikalen Scrollbalken. Ich nutze Firefox( mit der Web-Developertoolleiste) dort sehe ich nur bei 800x600 Auflösung den Scrollbalken. Ich vermute das ist ein Breitbildproblem.:confused:
Gruß Rico
PS.: Mei Inet hat sich am Weekend verabschiedet, deshalb erst heute eine Antwort
 
Wie gesagt, es dürfte an der von mir beschriebenen Boxhöhe für das DIV content liegen, dass im Browserfenster der vertikale Scrollbalken erscheint.
 
Hi,
Ist irgendwie schlecht mit einem Breitbild-tft das nachzuvollziehen, Auflösung 1680x1050. Habe auch die content-box auf 85% genommen aber der Balken war immer nur bei 800x600 da. Habe dann spaßeshalber die Maße von einem 19"CRT "übertragen", keine Änderung :confused:
Gruß Rico
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück