zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bei resize zentriert und fixed zugleich

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 23.01.2012, 17:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Hi Praktikant

das klingt alles sehr schön, nur wie du Elemente die position:fixed; sind (und das sollten die beiden Sidebars sein), floaten willst leuchtet mir jetzt nicht ein. Aber ich freue mich schon, deine Lösung hier zu sehen.


Lieben Gruß
Webcoder
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 23.01.2012, 17:51
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Da steht nirgens etwas von position:fixed;?!
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 23.01.2012, 17:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von cuginoCoso Beitrag anzeigen
Hallo,

ich versuche gerade eine Seitenstruktur aufzubauen und habe dabei Probleme.

Ich hätte gerne einen Container in der Mitte der Seite. Also wenn das Fenster resized wird bewegt sich der container mit.

Oben in dem Container ist ein Element was fixed sein soll (also nicht mitscrolled) aber dennoch sich im äußeren Container bewegt, wenn man die Fenstergröße ändert.
Darunter sind 3 weitere Elemente.
Ein Container links (sidebar) die auch wie der header fixed ist aber sich bewegt bei resize.
Dann der content container der scrolled und sich natürlich auch immer mittig hält (der container ist mit dem 960 grid formatiert, also 960 breit, eigentlich glaube ich nicht so wichtig)
und dann noch eine weitere sidebar, rechts, die auch fixed ist

Zur Anschauung hier noch eine skizze
http://dl.dropbox.com/u/4193224/css_problem.jpeg

wenn man das fenster klein zieht dürfen die 3 elemente natürlich nicht umbrechen und untereinander angezeigt werden …

Ich weiß nicht richtig wie man diese Struktur möglichst browserkompatibel aufbaut und freue mich sehr über Tips und Ansätze

Danke
Ich schätze du hast Recht!
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #14 (permalink)  
Alt 23.01.2012, 18:39
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von Webcoder Beitrag anzeigen
Ich schätze du hast Recht!
Das macht es nicht einfacher, funktioniert aber ähnlich. Die Elemente werden halt festgetackert. Könnte Probleme mit verschiedenen Größen geben. Aber das kann man mit geschicktem CSS umgehen
Das einzige unlösbare Problem dürfte die Positionsänderung der Elemente bei resize werden.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #15 (permalink)  
Alt 23.01.2012, 19:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Praktikant Beitrag anzeigen
Das einzige unlösbare Problem dürfte die Positionsänderung der Elemente bei resize werden.
Genau deshalb habe ich geschrieben, dass es nur mit Java-Script geht oder vielleicht in Zukunft mit CSS 3 (siehe Link im ersten Post). Du müsstest nämlich bei jedem rezise die Position neu berechnen, auch direkt beim verändern der Fenstergröße könnte es zu unschönen Effekten kommen (springen der Sidebars oder so).

Darum auch mein Vorschlag zu einem anderen Layout.
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #16 (permalink)  
Alt 23.01.2012, 19:21
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.990
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Klar, leuchtet ein. Ich hatte es überlesen
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #17 (permalink)  
Alt 23.01.2012, 20:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von cuginoCoso Beitrag anzeigen

ich hab das ganze schon irgendwie halbwegs hingeschoben bekommen, aber es war wirklich dirty und sehr trail & error mäßig.
Dann zeig doch bitte, was du gemacht hast. Die Skizze enthält viel zu wenig Information. Wo sind welche Inhalte, wo soll gescrollt werden, welche Dimensionen sind bekannt? Was soll passieren, wenn die Inhalte mehr Platz brauchen, als zur Verfügung steht?
Es gibt durchaus auch ohne Javascript Möglichkeiten.
Mit Zitat antworten
  #18 (permalink)  
Alt 25.01.2012, 10:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.01.2012
Beiträge: 8
cuginoCoso befindet sich auf einem aufstrebenden Ast
Standard

also ich hab mich nochmal hingesetzt und mal was zusammen gebaut …
was scheinbar funktioniert …

vielleicht mag ja mal jemand drauf gucken und abschätzen ob das so okay ist … oder man das besser anders macht …

mir ist nicht ganz klar warum der page wrapper nicht die elemente umschließt …

wahrscheinlich wohl, weil die elemente nicht relative sind, oder?

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Volker Racho">
	<!-- Date: 2011-10-24 -->
	<link rel="stylesheet" type="text/css" href="style.css" type="text/css" />
</head>
<body>

<div id="pageWrapper">
	<div id="header"></div>
	<div id="leftSidebar"></div>
	<div id="contentWrapper">
		<div id="contentContainer">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</div>
	<div id="rightSidebar"></div>
</div>

</body>
</html>

Code:

#pageWrapper {
border: 1px solid red;
width: 1000px;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 0;
}

/* warum ist der pageWrapper nicht so hoch wie der content inhalt? kann man das irgendwie machen?*/


#header {
border: 1px solid red;
width: 1000px;
height: 200px;
position: fixed;
background-color: white;
z-index: 2;

}
#leftSidebar {
border: 1px solid red;
width: 200px;
height: 600px;
position: fixed;
background-color: gray;
}

#contentWrapper {
border: 1px solid red;
width: 600px;
background-color: aqua;
position: absolute;
left: 200px;
top: 200px;
}

.item {
width: 130px;
height: 300px;
background-color: red;
border: 2px dashed blue;
float: left;
margin: 2px;
}

#rightSidebar {
border: 1px solid red;
width: 200px;
height: 600px;
background-color: black;
position: fixed;
margin-left: 800px;
}
Mit Zitat antworten
  #19 (permalink)  
Alt 25.01.2012, 11:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von cuginoCoso Beitrag anzeigen
also ich hab mich nochmal hingesetzt und mal was zusammen gebaut …
was scheinbar funktioniert …
Ja, "scheinbar".
Bitte beantworte alle Fragen, die ich oben gestellt habe. Bisher ist nur die eine Frage "wo soll gescrollt werden" durch dein Beispiel beantwortet. Es soll also im Browserfenster gescrollt werden, nicht in einem Element selbst?
Ganz wichtig: Setz Inhalte ein. Man kann ein Layout nicht mit ein paar leeren Boxen testen.

Zitat:
vielleicht mag ja mal jemand drauf gucken und abschätzen ob das so okay ist … oder man das besser anders macht …
Es ist sicher nicht okay, wenn Inhalte für Besucher unerreichbar sind. Das ist aber zwangsläufig so, wenn man das Scrollen zum größten Teil unterbindet.
Daher ist das gesamte Konzept äußerst fragwürdig. Wenn es nicht ausschließlich in einer kontrollierten Umgebung eingesetzt wird halte ich es für gänzlich untauglich.
Du kannst dir mal dieses Beispiel von Stu Nicholls anschauen. Dort wird in Inhaltsbereichen selbst gescrollt, nicht im Browserfenster. Das ist nicht schön und nicht besonders benutzerfreundlich. Doch wenigstens sind die Inhalte (etwas besser) erreichbar.

Zitat:
mir ist nicht ganz klar warum der page wrapper nicht die elemente umschließt …
Alles was absolut oder fixed positioniert ist hat keinen Einfluss mehr auf die Umgebung. Kein "Wrapper" wird diese Elemente einschließen.
Dein Inhaltsbereich müsste nicht absolut positioniert sein.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
clear, css, fixed, float, resize, scroll

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
CSS tabelle wird im FF nicht zentriert dargestellt neugierig_asdf CSS 2 08.02.2009 13:23
Positionierung einiger Elemente falsch CrAzYs CSS 4 09.10.2008 20:45
3 Spalten, mitte fixed width und immer horizontal zentriert - realisierbar?! vXel CSS 0 05.05.2008 23:33
Positionierte Tabelle - fixed, zentriert, vertikal zentriert nick CSS 0 20.08.2006 02:33
Zweispaltenlayout - Zentriert + Position fixed Mikronesien CSS 1 03.07.2006 22:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:49 Uhr.