✔ Wie Homepage für verschiedene Auflösungen passend machen?

Habe ich :)

Das ist super

Danke Maik

Ich werde morgen Abend mal anfangen damit zu arbeiten.
Ich melde mich dann wenn Fragen kommen
Außerdem werde ich mir dein Tut mal in Ruhe ansehen

Nochmals Danke für die nette und schnelle Hilfe

Gruss
Netzjunkie
 
Da fällt mir schon eine Frage ein....

Wenn in der Mitte (content) ein Text steht, der für eine Auflösung passt aber für eine andere Auflösung zu lang ist.... wie mache ich das das der mittlere Bereich dann gescrollt wird - und nur der mittlere Bereich.
Oder ist das nicht möglich ?

Gruss
Netzjunkie
 
Ja die beiden Beispielseiten sehen genial aus.
So würde mir das schon gefallen :) (eher wie der 2. Link)

Und jetzt habe ich gerade deinen oben stehenden Code in ein 4images als Test eingearbeitet und war so stolz das es geklappt hat :)

Gruss
Netzjunkie
 
Hallo Maik

es klappt auch eigentlich schon ganz gut das Ganze mit DIVs zu machen.
Aber schon taucht eine Frage auf.

Das mittlere DIV habe ich als Test mal so gestaltet, indem ich einfach ein Wort eingesetzt habe.

Code: 
<div id="mitte">
 <div align="center">test
</div>
</div>

Wie mache ich dem Inhalt denn nun klar das er immer in der Mitte erscheinen soll ?
Bei Tabellen mache ich das mit dem Befehl: valign="center".
Dann erscheint das Eingegebene immer in der MItte der Tabelle.
Geht das auch mit DIVs ?

Gruss
Netzjunkie
 
Hi,

sprichst du von der vertikalen Mitte?

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>
<title>Vertical-align an element of unknown height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
.outer {
        position:relative;
        display:table;
        height: 200px;
        width: 200px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #CCCCCC;
        background:red;
        float:left
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
}
p{background:blue;border:1px solid #000;text-align:center;}
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->
</head>
<body>
<h1>Vertical align elements of different heights (based on xerxos's method)</h1>
<div class="outer">
  <div class="inner">
    <p>This is some random text : </p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : </p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : This is some random text : This is some random text :</p>
  </div>
</div>
<div class="outer">
  <div class="inner">
    <p>This is some random text : This is some random text : This is some random
      text : This is some random text :</p>
  </div>
</div>
</body>
</html>

mfg Maik
 
Muss ich denn da mit OUTER und INNER arbeiten ?
Bei meinem Code funktiniert das middle im mittleren DIV leider nicht

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Beispiel 1: position_fixed</title>

<style type="text/css">
<!--
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}
body {
	overflow: hidden;	/* Scrollbalken im Fenster unterbinden */
	margin-left: 0px;
}
#mitte {
	position: absolute;
	left: 0px;		/* Abstand zum linken Fensterrand */
	top: 70px;		/* Abstand zum oberen Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	bottom: 50px;		/* Abstand zum unteren Fensterrand */
	overflow: auto;		/* Scrollbalken, falls notwendig */
	vertical-align: middle;
/* nur für IE: */
	width: expression((document.body.clientWidth - 300) + "px");
				/* left-Wert + right-Wert = 300 */
	height: expression((document.body.clientHeight - 200) + "px");				/* top-Wert + bottom-Wert = 200 */
}
#mitte .inhaltDiv {
	margin: 20px;		/* Abstand des Inhalts zum Blockrand */
}
#oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 70px;		/* Blockhöhe */
	padding: 0;		/* Interpretation Boxmodell! */
	background-color: #fff;
	overflow: hidden;	/* Scrollbalken unterbinden */
/* nur für IE: */
	width: expression(document.body.clientWidth + "px");
				/* left-Wert + right-Wert = 0 */
}
#oben .inhaltDiv {
	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
}
#unten {
	position: absolute;
	left: 0px;		/* Abstand zum linken Fensterrand */
	bottom: 0 !important;	/* Abstand zum unteren Fensterrand */
	bottom: -1px;		/* nur für IE */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 75px;		/* Blockhöhe */
	padding: 0;		/* Interpretation Boxmodell! */
	background-color: #fff;
	overflow: hidden;	/* Scrollbalken unterbinden */
/* nur für IE: */
	width: expression((document.body.clientWidth - 200) + "px");
				/* left-Wert + right-Wert = 200 */
}
#unten .inhaltDiv {
	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
}
.Stil39 {	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF0000;
	font-weight: bold
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #FF0000;
}

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div id="mitte">
<div align="center">test
</div>
</div>

<div id="oben">
<div class="inhaltDiv">
</div>
</div>

<div id="unten">
<div class="inhaltDiv">
</div>
</div>

</body>
</html>
 
Puh, jetzt war ich froh das ich das mit dem 3 DIVs so halbwegs hinbekomme :)
Wie gehe ich denn jetzt vor wenn ich das OUTER und INNER bei meinem mittleren DIV nutzen möchte ?

Gruss
Netzjunkie
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück