mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:31 Benutzername: Passwort: Auto-Login

Thema: Divs auf Seite fest zentrieren vom 18.06.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Divs auf Seite fest zentrieren
Autor Nachricht
Amy666
Threadersteller

Dabei seit: 18.06.2008
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Mi 18.06.2008 13:16
Titel

Divs auf Seite fest zentrieren

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*





<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>
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Mi 18.06.2008 13:21
Titel

Antworten mit Zitat Zum Seitenanfang

guck mal hier vlt hilfts
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Amy666
Threadersteller

Dabei seit: 18.06.2008
Ort: -
Alter: 39
Geschlecht: Weiblich
Verfasst Mi 18.06.2008 14:05
Titel

ich bekomms einfach nicht hin...

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Mi 18.06.2008 14:32
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,
also wenn du keine feste Breite angibst dann werden Block-Elemente immer so groß wie das Fenster groß ist *zwinker*
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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 18.06.2008 14:59
Titel

Antworten mit Zitat Zum Seitenanfang

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ß * Applaus, Applaus *
  View user's profile Private Nachricht senden
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Mi 18.06.2008 17:19
Titel

Antworten mit Zitat Zum Seitenanfang

Kash hat geschrieben:

cool, das funktioniert?
kannte ich nicht.

gut zu wissen.

gruß * Applaus, Applaus *


Jup Lächel

http://www.css4you.de/trickkiste/tr00029.html

Gruß
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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!
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.