Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[css oder doch java?] Wachsender Div Container zentriert“

Qrt

Noch nicht viel geschrieben

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

divbox.png


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?
 

mwxx

Nicht mehr ganz neu hier

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.
 
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:
HTML:
<div id="container"></div>

CSS:
Code:
#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

Codegirl

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

Noch nicht viel geschrieben

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?

HTML:
<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
Code:
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
Code:
@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%;
 }				
}
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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

Noch nicht viel geschrieben

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

jo, habe es! wusste nicht, wie ich "position" überschreibe. nun gehts! :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.875
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben