nicht angemeldet
CSS um div zu plazieren
0 0 0 0 0 
Struppi
CSS um div zu plazieren
Ich habe folgendes Dokument:
<html>
<head>
<title>Test</title>
<style type="text/css">
#services {
position: relative;
background-color: #00ffff;
margin-left: 0px;
height:140px;
padding:10px;
font-family: Courier, Monaco, Monospace;
text-align:middle;
border-style: solid;
border-color: #ff0000;
}
#serv1 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:20px;
top:20px;
}
#serv2 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
left:140px;
border: 1px solid #ff0000;
top:20px;
}
#serv3 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;;
left:260px;
top:20px;
}
#serv4 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:380px;
top:20px;
}
#serv5 {
position: absolute;
background-color: #00ffff;
height:100px;
width:100px;
border: 1px solid #ff0000;
left:500px;
top:20px;
}
</style>
</head>
<body>
<div id="services">
<div id="serv1">Service 1</div>
<div id="serv2">Service 2</div>
<div id="serv3">Service 3</div>
<div id="serv4">Service 4</div>
<div id="serv5">Service 5</div>
</div>
</body>
</html>
Der Container "Services" macht schön mit, wenn man das Fenster vergrössert. Was ich nun erreichen möchte, ist dass die anderen Container "serv1, serv2, etc.." den ganzen Raum nutzen, falls der Container "Services" sicht vergrössert. Die Container in sich sollen nicht grösser werden, nur der Abstand zwischen den soll grösser werden.
Wie kann ich das erreichen? Der Ansatz mit position:abolute ist bestimmt falsch.
-
Moin
Wie kann ich das erreichen? Der Ansatz mit position:abolute ist bestimmt falsch.
RICHTIG! ... versuch mit margin und prozentualen Werten sowie mit float zu arbeiten
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Danke für den Hinweis ^^, ich habe meine Datei nun so modifiziert aber das Verhalten ist noch merkwürdig:
<html>
<head>
<title>Test</title>
<style type="text/css">#services {
position: relative;
background-color: #00ffff;
margin-left: 0px;
height:140px;
padding:10px;
font-family: Courier, Monaco, Monospace;
text-align:middle;
border-style: solid;
border-color: #ff0000;
}.floatleft
{
float: left;
width: 100px;
height: 140px;
background-color: #F63;
border: 1px solid #F30;
margin:10%;
}</style>
</head>
<body>
<div id="services">
<div id="serv1" class="floatleft">Service 1</div>
<div id="serv2" class="floatleft">Service 2</div>
<div id="serv3" class="floatleft">Service 3</div>
<div id="serv4" class="floatleft">Service 4</div>
<div id="serv5" class="floatleft">Service 5</div>
</div>
</body>
</html>-
Hi,
Danke für den Hinweis ^^, ich habe meine Datei nun so modifiziert aber das Verhalten ist noch merkwürdig:
nun, wenn es merkwürdig ist, dann schlage ich vor, Du merkst es Dir. Falls Du "unerwartet" meinen solltest, so beschreibe bitte sowohl das beobachtete als auch das erwartete Verhalten.
Übrigens gehört "floatleft" in der Reihe der bescheuertsten Klassennamen eindeutig in die Top 10. Welche von der Darstellung zu 100% unabhängige Begründung hat dieser Bezeichner?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Moin
Danke für den Hinweis ^^, ich habe meine Datei nun so modifiziert aber das Verhalten ist noch merkwürdig:
ganz klar. reduzier das margin um die hälfte und schließe margin-top und margin-bottom aus.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Ich habe es getan:
<html>
<head>
<title>Test</title>
<style type="text/css">#services {
position: relative;
background-color: #00ffff;
margin-left: 0px;
height:140px;
padding:10px;
font-family: Courier, Monaco, Monospace;
text-align:middle;
border-style: solid;
border-color: #ff0000;}
.floatleft
{
float: left;
width: 100px;
height: 140px;
background-color: #F63;
border: 1px solid #F30;
margin-left:5%;
margin-right:5%;
}</style>
</head>
<body>
<div id="services">
<div id="serv1" class="floatleft">Service 1</div>
<div id="serv2" class="floatleft">Service 2</div>
<div id="serv3" class="floatleft">Service 3</div>
<div id="serv4" class="floatleft">Service 4</div>
<div id="serv5" class="floatleft">Service 5</div>
</div>
</body>
</html>Leider, wenn ich mein Browser-fenster verkleinere, sprint "serv5" schon bald runter anstatt der Abstand zwischen den containers neu anzupassen.
-
Moin
wie https://forum.selfhtml.org/?t=0&m=934207 bereits schrieb ist die Umsetzung deines Layoutwunsches durch % und px-Werte schwierig. Die Prozentualen Werte benötigst du aber um dynamische Abstände zwischen den innenliegenden Boxen je nach Größe der umgebenden Box zu erhalten.
Versuche die px-Werte raus zu lassen wie von Struppi beschrieben.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
.floatleft
Wozu diese Klasse?
Warum nimmst du nicht:
#services div { .... }?{
float: left;
width: 100px;
height: 140px;
background-color: #F63;
border: 1px solid #F30;
margin:10%;
}10% Abstand Link und Rechts und das fünfmal macht (10% + 10%) * 5 = 100%
d.h. deine Abstände nehmen die komplette Breite ein und es passen von den fünf Bereichen nur einige nebeneinander.Falls du die fünf mit gleichen Abstand nebeneinander darstellen, willst, hast du ein Problem, da man noch nicht mit CSS rechnen kann und du % und px mischst.
Der Abstand müßte ( 100% - (5 * 100px) ) / 6 betragen
Wenn du nur mit % arbeitest geht es:
#services { background-color: #00ffff; height:140px; border-style: solid; border-color: #ff0000; } #services div { float: left; width: 8%; height: 140px; background-color: #F63; border: 1px solid #F30; ma ~~~rgin-left: 10%; } Struppi. -- [Javascript ist toll](http://javascript.jstruebig.de/) (Perl auch!)
-
-