zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eine etwas andere Content Positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.01.2010, 19:35
Trough the Glass
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2010
Beiträge: 2
scythe befindet sich auf einem aufstrebenden Ast
Pfeil Eine etwas andere Content Positionierung

Guten Abend,

ich möchte für eine Webseite den gesamten Inhaltsbereich immer unten-links-bündig Darstellen.

Jedoch hab ich mit meiner nicht ganz korrekten Methode das Problem das wenn das Fenster kleiner als die Hp ist das keinerlei Scrollbalken entstehen und die sachen oben weggeschnitten werden.

Gibts da eine Möglichkeit bei dem der Inhalt das immer unten Links bündig ist bei zu kleinen Auflösungen aber regulär nach unten scrollbar wird?.

hier mal bisschen Quelltext:
Code:
	
html {
	height:100%;
	width:100%;
	}	

body {
	height:100%;
	width:100%;
	background:****;
	
	}
.wrap { 
     position:absolute;
	 left:0px;
	 bottom:0px;
	}
	
.content {
float:left;
width:670px;
height:500px;
background-color:*****;}
so hab ich das mal schnell aufgezogen also html>body>wrap>content


Hoffe ihr versteht was ich meine.

danke!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.01.2010, 20:36
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Spontan fällt mir dazu folgendes ein (zur Erklärung der IE-Lösung siehe Centering (horizontally and vertically) an image in a box. Um im IE < 8 einen Umbruch von div und span bei schmalem Viewport zu verhindern, sollte man sich noch weitere Ergänzungen überlegen, z.B. per white-space: nowrap, min-width, oder einem zusätzlichen Element - je nachdem, welche IE-Versionen berücksichtigt werden sollen. Weitere Alternative: den CC vor das div und dem IE < 8 die entsprechend angepasste FAQ-Lösung geben):

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

html,
body {
	height: 100%;
	width: 100%;
	}	

html {
	display: table;
	}	

body {
	display: table-cell;
	vertical-align: bottom;
	}	

div {
	width: 670px;
	height: 500px;
	background-color: red;
	}

</style>

<!--[if lt IE 8]>
<style type="text/css">

div,
span {
	zoom: 1;
	vertical-align: bottom;
	}

div {
	display: inline;
	}

span {
	height: 100%;
	}

</style>
<![endif]-->

</head>

<body>

<div>Text</div>

<!--[if lt IE 8]><span></span><![endif]-->

</body>

</html>
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (11.01.2010 um 10:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2010, 00:54
Trough the Glass
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2010
Beiträge: 2
scythe befindet sich auf einem aufstrebenden Ast
Standard

Dankeschön. display:table und vertical align sind eine tolle und saubere lösung.
Mit Zitat antworten
Antwort

Stichwörter
absolut, background, bottom, css, left

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Abstand eines Elementes lässt sich nicht verringern zeitweise CSS 2 28.04.2009 22:19
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 18:19
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 16:30
Probleme mit Positionierungen schani CSS 3 17.02.2006 14:12
div Positionierung bei Browsern Ancient CSS 22 17.03.2005 00:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:43 Uhr.