Autor |
Nachricht |
Amy666
Threadersteller
Dabei seit: 18.06.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Mi 18.06.2008 13:16
Titel Divs auf Seite fest zentrieren |
|
|
Hallo, ich bin vollkommener Anfänger und habe folgendes Problem:
1. möchte mein Chef Schlagschatten um den Rahmen, dafür soll aber kein Bild verwendet werden.
Ich habe jetzt eine Lösung mit mehreren divs gefunden, ist nicht annähernd perfekt aber viel. ein Anfang. (Es gibt so viele Seiten mit Schatten, wo keine Bilder verwendet werden, wie machen die das nur alle *grübel*)
Vielleicht hat ja jemand noch ne Idee...
2. anderes Problem - meine divs möchte ich zentriert auf der Seite haben, aber nicht das sie sich mit der Seite vergrößern, sondern die Größe gleich bleibt und sie nur in die Mitte rutschen. Ich hab mich schon dusselig gesucht aber es funzt nicht das die Größe konstant bleibt, meine divs wachsen immer mit der Seite.
Hier mal der Code- ist bestimmt nur ein Ding oder so falsch es es nicht geht - hat jemand ne Idee?!
Ach ja bitte für Anfänger verständlich schreiben
<head>
<style type="text/css">
.center {
display:block;
text-align:center;
}
.content {
width:780px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
.out {
display:block;
background:#f2f3e3;
border:2px solid #f2f3e3;
position:relative;
margin:1em 0;
}
.in5 {
display:block;
background:#edeed0;
border:2px solid #edeed0;
position:relative;
padding:1px;
margin:1px;
}
.in4 {
background:#e0e497;
border:2px solid #e0e497;
position:relative;
padding:1px;
margin:1px;
}
.in3 {
background:#d6db69;
border:2px solid #d6db69;
position:relative;
padding:1px;
margin:1px;
}
.in2 {
background:#ccd337;
border:2px solid #ccd337;
position:relative;
padding:1px;
margin:1px;
}
.in {
background:#ffffff;
border:2px solid #bfc80b;
position:relative;
pading:5px;
font-weight:normal;
height:600px;
}
</style>
</head>
<body>
<div id="center">
<div id="content">
<div class="out normal">
<div class="in5">
<div class="in4">
<div class="in3">
<div class="in2">
<div class="in">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
Amy666
Threadersteller
Dabei seit: 18.06.2008
Ort: -
Alter: 39
Geschlecht:
|
Verfasst Mi 18.06.2008 14:05
Titel ich bekomms einfach nicht hin... |
|
|
hab versucht meine Seite dem Beispiel anzupassen, es bleibt das alte Problem, das sich die Divs mit der ganzen Seite vergrößern....
wo ist bloß der sch*** Fehler
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#fff;
color:#fff;
font:100.01%/1.4 Futura Book, Verdana, Arial, sans-serif;
text-align:center; /* horizontal centering for IE Win quirks */
}
.content {
height:600px;
width:955px;
clear:left;
margin:0 auto;
position:relative;
text-align:left;
}
.distance {
width:1px;
height:50%;
margin-bottom:300px;
float:left;
}
.out {
display:block;
background:#f2f3e3;
border:2px solid #f2f3e3;
position:relative;
margin:1em 0;
}
.in5 {
display:block;
background:#edeed0;
border:2px solid #edeed0;
position:relative;
padding:1px;
margin:1px;
}
.in4 {
background:#e0e497;
border:2px solid #e0e497;
position:relative;
padding:1px;
margin:1px;
}
.in3 {
background:#d6db69;
border:2px solid #d6db69;
position:relative;
padding:1px;
margin:1px;
}
.in2 {
background:#ccd337;
border:2px solid #ccd337;
position:relative;
padding:1px;
margin:1px;
}
.in {
background:#ffffff;
border:2px solid #bfc80b;
position:relative;
pading:5px;
font-weight:normal;
height:600px;
}
</style>
</head>
<div id="distance">
<div id="center">
<div id="content">
<div class="out normal">
<div class="in5">
<div class="in4">
<div class="in3">
<div class="in2">
<div class="in">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Mi 18.06.2008 14:32
Titel
|
|
|
Hi,
also wenn du keine feste Breite angibst dann werden Block-Elemente immer so groß wie das Fenster groß ist
Also:
ne feste Breite rein und es wird gar nix mehr größer oder kleiner ^^ außer der Abstand zum oberen Bildrand wenn man strg + scrollt, wenn du den effekt weghaben willst musst du den "em" wert durch ne feste Einheit ersetzen .. aber das ist denke ich eher nebensächlich ~g~
Außerdem würde ich dir empfehlen, der Übersichtlichkeit halber, die Klassen zusammenzufassen, sodass du eine "Überklasse" hast und dann nur noch den hintergrund jeweils mit einer zweiten zuweißt ....
Ich mein das so:
Code: |
.schatten{
display:block;
position:relative;
padding:1px;
margin:1px;
width: 200px;
}
.farbe4{
background:#e0e497;
border:2px solid #e0e497;
}
.farbe5{
background:#edeed0;
border:2px solid #edeed0;
}
Fürs HTML:
<div class="schatten farbe5">
|
Gruß
Zuletzt bearbeitet von Snifferdog am Mi 18.06.2008 14:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 18.06.2008 14:59
Titel
|
|
|
Snifferdog hat geschrieben: | ...
Außerdem würde ich dir empfehlen, der Übersichtlichkeit halber, die Klassen zusammenzufassen, sodass du eine "Überklasse" hast und dann nur noch den hintergrund jeweils mit einer zweiten zuweißt ....
Ich mein das so:
Code: |
.schatten{
display:block;
position:relative;
padding:1px;
margin:1px;
width: 200px;
}
.farbe4{
background:#e0e497;
border:2px solid #e0e497;
}
.farbe5{
background:#edeed0;
border:2px solid #edeed0;
}
Fürs HTML:
<div class="schatten farbe5">
|
Gruß |
cool, das funktioniert?
kannte ich nicht.
gut zu wissen.
gruß
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
|
|
|
|
|
|
|
Ähnliche Themen |
2 Divs auf Seite zentrieren
DIVs zentrieren
[css] divs nebeneinander zentrieren
Zentrieren von floating DIVs
Mehrere floatende DIVs zentrieren...
3 DIVs im übergeordnetem DIV zentrieren & fixieren? HELP!
|
|