[css oder doch java?] Wachsender Div Container zentriert

[Qrt]

Bei meinem folgenden Szenario kam mir die Frage, ob es möglich sei dieses nur mit css umzusetzen.

Und zwar wenn der Browser verkleinert wird, soll der div-container immer mittig bleiben, was natürlich nicht schwer ist. Aber sobald links und rechts nur noch ca 10% Platz ist, soll die Grafik verkleinert werden, von 700px auf 300px z.B. und die 10% links und rechts sollen erhalten bleiben. Rückwärst betrachtet soll die Grafik auf maximal 700px wachsen und danach die spalten links und rechts. Kann man hierbei auf java verzichten?

 

[patrick_l]

AW: [css oder doch java?] Wachsender Div Container zentriert

Stichwort: Media Queries

Liebe Grüße, Patrick

 

[mwxx]

AW: [css oder doch java?] Wachsender Div Container zentriert

Ich würde versuchen, mit min-width/min-height und max-width/max-height zu arbeiten. Diese CSS-Eigenschaften sind eigentlich genau für dieses Verhalten zuständg.

 

[Pascal Bajorat]

AW: [css oder doch java?] Wachsender Div Container zentriert

Hi Qrt,

ich kann mich Patrick und mwxx nur anschließen genau dafür gibt es prozentuale Werte, EM-Angaben und Media Queries in CSS.

Sollte sich darüber ohne weiteres lösen lassen, JavaScript brauchst du dafür nicht wirklich, wäre vermutlich sogar umständlicher.

Wenn ich deine kleine Grafik richtig deute, sollte folgender CSS-Code bereits ausreichen:

HTML:

<div id="container"></div>

CSS:

#container{max-width:700px; min-height:80px; background:#f00; margin:0 auto;}

@media (max-width: 840px) {
	#container{max-width:300px;}
}

Beste Grüße
Pascal

 

[layoutbraut]

AW: [css oder doch java?] Wachsender Div Container zentriert

Meiner Meinung nach solltest Du wie schon erwähnt mit MediaQueries arbeiten.
Und dabei dann auch dem Container einen Prozentwert geben, damit er flexibler ist. Bezüglich des Abstandes nach Links und rechts, sowie oben und unten, würde ich mit margin: 0 auto; rangehen.

 

[Qrt]

AW: [css oder doch java?] Wachsender Div Container zentriert

Hi, danke für die links etc!

Habe mir den Link von Patrick genauer angeschaut.
Das mit den Media Queries funktioniert auch soweit! Nur werden einige alte Angaben trotz des Media Queries übernommen?!

Bei dem Video (9:20) http://www.youtube.com/watch?list=P...v=nHuJSr9XNe0&feature=player_detailpage&t=562
"löscht" er das padding, da er dem Container vorher ein anderes padding gegeben hat.

Getrennt funktioniert mein Code ohne Probleme. Sobald ich aber beides mithlilfe des Media Queries nutzen möchte mixed er quasi den code. margin, padding könnte ich auf 0 setzen aber wie sieht das mit der position aus? :/

@Pascal: Danke für den Code! Werde damit mal arbeiten!

Mein Code, ich vermute mal, dass ich noch altmodisch/newbie like arbeite?

<div id="bg_pattern">
  <div id="content_wrapper">
	<div id="content_a"></div>
	<div id="content_b">
	   <img src="file:///C:/cqrt/Projekte/Test/v01/img/world.png"/>
        </div>
	<div id="content_c"></div>
  </div>
</div>

Auflösung x > 975px

body {
    background: #1a1e24;
	background: -webkit-gradient(radial 100 200, 300, 100 200, 0,
				color-stop(3%, #17334e)
				color-stop(100%, #5d84a9)	
				);
	background: -moz-radial-gradient(circle, #162a3b 3%, #1a1e24 45% );
	background:-o-radial-gradient(center, #162a3b, #1a1e24); /* Opera */
	background:-ms-radial-gradient(center, #162a3b, #1a1e24); /* IE */
	background:radial-gradient(center, #162a3b, #1a1e24); /* W3C Standard */
}


#bg_pattern {
	background: url(../img/pattern.png);
	height: 100%;
	width: 100%;
	background-repeat:repeat;
}

#content_b {
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -215px 0 0 -390px;
	max-width: 780px;
	height: 430px;
}

Auflösung x < 975px

@media only screen and (max-width : 975px) {  
#content_wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 25%;
}

#content_a {
	float: left;
	width: 10%;
	height: 100%;
 }
 
#content_b {
	float: left;
	width: 80%;
	height: 100%;
 }

img {
	max-width: 100%;
	height: auto;
}
 
#content_c {
	float: left;
	width: 10%;
	height: 100%;
 }				
}

 

[Myhar]

AW: [css oder doch java?] Wachsender Div Container zentriert

Nur werden einige alte Angaben trotz des Media Queries übernommen?!

Welche denn genau?
Aber ich denke, ich kann trotzdem erraten, wo dein Problem liegt: Dort, wo viele, welche zum ersten Mal mit mediaqueries arbeiten, Verständnisprobleme haben.
Mediaqueries funktionieren nicht so, dass, auf dein Beispiel bezogen, bei einer Auflösung < 975 nur die Styles von "@media only screen and (max-width : 975px) " genommen werden. Es werden alle Styles genommen, welche passen. Also auch diese ohne media-queries. Es gilt auch hier auf die Gewichtung der einzelnen Anweisungen zu achten, bei gleicher Gewichtung wird der Style angewandt, welcher als letzter notiert wurde, egal ob der in einem mediaquery steht oder nicht. Auch kann es sein, dass mehrere mediaqueries auf eine Auflösung zutreffen, dann werden natürlich auch die Stile von allen ausgewertet.
Beispiel, was ich damit meine:
Fügst du noch folgenden mediaquery hinzu "@media only screen and (max-width : 600px) ", dann werden bei einer Breite von 550px folgende Stile angewandt: Die, welche ohne spezifisches mediaquery angegeben werden, die Stile von <975px und die von <600px.
Du musst also in den einzelnen mediaquery Blöcken die Stile, welche du nicht brauchst, überschreiben.

 

[Qrt]

AW: [css oder doch java?] Wachsender Div Container zentriert

jo, habe es! wusste nicht, wie ich "position" überschreibe. nun gehts!