✔ Bildposition bei unterschiedlicher Auflösung

buddha · 25. Mai 2007

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

buddha · 25. Mai 2007

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. Mai 2007

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

buddha · 25. Mai 2007

Hi,

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;
	}
	
#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. Mai 2007

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?

buddha · 25. Mai 2007

Hi,
Irgendwie kriege ich das nicht gebacken mit der scrollbaren Box. Ich suche noch. Habe gedacht overflow:auto reicht aus. Mal schaun.
Gruß

Maik · 25. Mai 2007

Ansonsten studier mal das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.

buddha · 25. Mai 2007

Hallo,
Hier habe ich mal ein Beispiel gefunden.

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>test</title>
<style type="text/css">
<!--
.links {
		font-family:Arial, Helvetica, sans-serif;
		font-size:10px;
		line-height:16px;
		}

.rechts {
		font-family:Arial, Helvetica, sans-serif;
		font-size:10px;
		font-style:italic;
		line-height:16px;
		}

.mitte {
		font-family:Arial, Helvetica, sans-serif;
		font-size:10px;
		line-height:16px;
		}

.headline {
		font-family:Arial, Helvetica, sans-serif; 
		font-size:50px; 
		font-style:italic; 
		font-weight:bold; 
		color: #C1FFC1;
		}

#content{ 
		position:relative;
		width: 740px;
		left: 0px;
		margin:auto;
		}


#test { 
		position: absolute;
		left:0px;
		top:10px;
		width:740px;
		height:100px;
		z-index:1;
		background-color: #006600;
		padding:5px;
		}

#spalte_links {
		position:absolute;
		left:0px;
		top:130px;
		width:150px;
		height:400px;
		z-index:2;
		background-color: #006600; 
		padding:10px;
		}

#spalte_mitte {
		position: absolute;
		left:180px;
		top:130px;
		width:380px;
		height:400px;
		z-index:3;
		background-color: #006600;
		padding:10px;
		}

#spalte_rechts {
		position: absolute;
		left:590px;
		top:130px;
		width:140px;
		height:400px;
		z-index:4;
		background-color: #006600;
		padding:10px;
		}

body	{
		background-color: #C1FFC1;
		margin-left:0px;
		margin-top:0px;
		}
body,td,th {
		color: #C1FFC1;
		}

-->

</style>
</head>
<body>
<div id="content">
<div class="mitte" id="spalte_mitte">spalte mitte</div>
<div class="links" id="spalte_links">spalte links</div>
<div class="rechts" id="spalte_rechts" style="overflow:auto">
  <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>
<div class="headline" id="test">
  <div align="center">TEST</div>
</div></div>
</body>
</html>

Gruß Rico

Maik · 26. Mai 2007

Hi,

ich weiß nicht, wo "Hier" ist, aber in meinen empfohlenen Quellen findest du doch auch Beispiele - nur mit dem feinen Unterschied, dass die Höhe dieser Box(en) relativ ist, sprich: sie verändert sich, wenn das Browserfenster in der Vertikalen skaliert wird.

Wenn dir jetzt aber eine feste Höhe vorschwebt, soll es mir auch recht sein.

buddha · 26. Mai 2007

Hi,

Ich habe dem content ein overflow -auto zugewiesen und die Höhe verringert, das klappt auch soweit der Scrollbalken ist aber auch bei wenig Inhalt zu sehen.
Gruß Rico

✔ Bildposition bei unterschiedlicher Auflösung

buddha

Erfahrenes Mitglied

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Maik

buddha

Erfahrenes Mitglied

Neue Beiträge