zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden webseite komplett mittig aufbauen, trotzdem flexibel bleiben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.06.2012, 03:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2012
Beiträge: 4
moboter befindet sich auf einem aufstrebenden Ast
Standard webseite komplett mittig aufbauen, trotzdem flexibel bleiben

hallo zusammen


ich wende mich, nach aufwändiger suche in letzter not an euch.
ich versuche krampfhaft, ein kleines positionierungsproblem zu lösen und komme auf keinen grünen pfad;

die angehängte grafik soll das prinzip der webseite zeigen. dabei ist das grüne divelement immer mittig zentriert, die orangen sollen dabei jeweils mit dem gleichbleibenden abstand dazu drum rum gruppiert werden. in der skizze hat es einen kleinen fehler, die abstände von orange zum rand soll natürlich flexibel bleiben. nun habe ich ewigkeiten versucht, hab mit position und margin, z-index und ja, sogar mit tabellen experimentiert, scheitere aber immer wieder an den beziehungen zwischen den einzelnen elementen, welche sich gegenseitig immer zu verschieben scheinen. geht das überhaupt? und wie würde das in etwa aussehen?

auf jedenfall tausend dank jetzt schon!
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2012-06-19 um 02.55.29.png (16,0 KB, 15x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.06.2012, 03:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2012
Beiträge: 4
moboter befindet sich auf einem aufstrebenden Ast
Standard

Ha, nevermind, habs selber hinbekommen. soweit so skizzenhaft, jedoch richtig:

css:
Code:
div.all {
	width:792px;
	height:536px;
	position:absolute;
	top:50%;
	left:50%;
	margin: -268px 0 0 -396px;
	background-color:#CCC;
	z-index:4;
}

div.pic {
	position:absolute;
	width:724px;
	height:468px;
	top: 50%;
	left: 50%;
	margin: -234px 0 0 -362px;
	background-color:#093;
	z-index:5;

}

div.top {
	position:absolute;
	width: 230px;
	height: 14px;
	top:0px;
	left: 50%;
	margin: 0px 0 20px -115px;
	background-color:#09C;
	z-index:6;

}

div.bottom {
	position:absolute;
	width: 230px;
	height: 14px;
	bottom:0px;
	left: 50%;
	margin: 20px 0 0 -115px;
	background-color:#09C;
	z-index:6;

}

div.left {
	position:absolute;
	height: 230px;
	width: 14px;
	top:50%;
	left: 0px;
	margin: -115px 20px 0 0;
	background-color:#09C;
	z-index:6;

}

div.right {
position:absolute;	height: 230px;
	width: 14px;
	top:50%;
	right: 0px;
	margin: -115px 0 0 20px;
	background-color:#09C;
	z-index:6;

}
html dann logischerweise:
Code:
<div class="all">

	<div class="top"><p>top</p></div>
    
    <div class="right"><p>r</p></div>


	<div class="bottom"><p>bottom</p></div>


	<div class="left"><p>l</p></div>
    
    <div class="pic"><img src="test.jpg" /></div>
    
</div>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2012, 11:08
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

um eine alternative Lösung vorzuschlagen, habe ich schnell ein kleines Beispiel gebastelt, welches die Pseudo-Elemente ::before und ::after verwendet. Das Markup wird mit dieser Methode entsprechend schlank gehalten. Hier das Beispiel:

- Zentrierte Box mit Rahmen

Um das Prinzip zu demonstrieren, habe ich den Elementen einen zusätzlichen Rahmen (grau, gepunktet) verpasst und die Zuweisung der z-index Eigenschaft auskommentiert.

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #4 (permalink)  
Alt 25.06.2012, 10:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.06.2012
Beiträge: 4
moboter befindet sich auf einem aufstrebenden Ast
Standard

Super, genau das hab ich gesucht, Danke!
Mit Zitat antworten
Antwort

Stichwörter
div, flexibel, margin, position, zentriert

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-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen Fools (X)HTML 3 13.09.2010 11:57
Flash Gallerie mittig ausrichten Ashida CSS 5 15.09.2009 21:11
Webseite komplett drucken, nur wie? 1979mark CSS 2 11.05.2009 11:05
Page komplett mittig ausrichten MoRpH2k2 CSS 2 19.08.2005 20:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:11 Uhr.