• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Margin | Padding | Brauche Hilfe bei Abständen :S

S

Suppenhuhn

Neues Mitglied
Servus zusammen,

ich bin gerade dabei "etwas" zu erstellen, jedoch hab ich grad Probleme bei den Margins / Paddings :P

So soll das aussehen:
Unbenannt-1.jpg
http://www10.pic-upload.de/08.06.13/tc8ebgg5q6o5.png


  • Der weiße "Rahmen" soll immer 960px breit sein und mittig im Bild liegen. Der Ober- & Unterabstand muss jeweils 30px von den Oberkanten betragen.
  • Das rote Logo soll 10px vom Rahmen entfernt sein.
  • Der hellgraue Content soll 23px vom Logo entfernt sein (alternativ 200px von der Rahmen-Oberkante); Der Unterabstand zum Rahmen soll 25px betragen und an den Seiten jeweils 10px.
  • Der dunkelgraue Hintergrund soll rahmenlos im Hintergrund sein.

Wäre sehr froh, wenn mir da jmd helfen kann. Wenn ich mit den Paddings/Margins vom Rahmen rumspiele, entsteht ein Abstand zum Logo, aber dann wird der Rahmen breiter :shock: trotz width:960px; Angabe.


Hoffentlich kann mir jemand helfen!


MfG Suppenhuhn
 
Hallo.

Wenn du Hilfe willst dann zeig mal deinen Code, was du schon hast (HTML und CSS).

Oder erwartest du von uns das dir das jetzt jemand erstellt?

Gruss
Elroy
 
Hi,

war mal so freundlich und hab's Dir umgesetzt! Ich denke, es müsste funktionieren...

HTML: 
<body>

<div class="rahmen">
    <div id="logo"></div>
    <div id="content"></div>
</div>

</body>
</html>

Code: 
body, html {
    background-color:#C0C0C0;
}

div.rahmen {
    position:relative;
    width: 960px;
    height: 100%;
    margin: 30px auto;
    background-color:#FFFFFF;    
}

div#logo {
    position:relative;
    width: 300px; /*Keine Breitenangabe?*/
    height: 167px; /*Höhe habe ich errechnet?*/
    top: 10px;
    left: 10px;
    background-color:#FF0000;
}

div#content {
    position:absolute;
    width:940px;
    height:auto;
    bottom:25px;
    left:10px;
    top:200px;
    background-color:#C0C0C0;
}

Grüße,

Maximilian
 
@Maximilian

Du hast ihm jetzt aber nur gezeigt wie man es nicht machen soll oder kannst du mir einen vernϋnftigen Grund nennen warum du in deinem CSS position relative und position absolute verwendest.

Gruss
Elroy
 
Die Positionierung schafft tatsächlich mehr Probleme als sie löst.

Ausgehend von @Maximilians Markup sollte

Code: 
div.rahmen {
    width: 940px;
    margin: 30px auto;
    padding: 10px 10px 25px 10px;
    background-color:#FFFFFF;    
}

#logo {
    margin: 0 0 23px 0;
}
schon genügen. Die jeweiligen Höhen sollten sich eh aus dem Inhalt ergeben.
 
Hallo,

ich habe das div#content extra absolut positioniert, damit es sich auf das div.rahmen bezieht (dadurch bekomm ich einen festen Bezugspunkt, nämlich div.rahmen von dem ich dann ausgehen kann), welches relativ positioniert ist. Wenn die Seite später beispielsweise einmal nichtmehr zentriert angezeigt werden soll, dürfte ich so keine Layoutverscheibungen haben.
Außerdem bin ich nicht der Meinung, dass absolute und relative Positionierungen nur Nachteile mitsich bringen...

LG
 
Maximilian schrieb:
Außerdem bin ich nicht der Meinung, dass absolute und relative Positionierungen nur Nachteile mitsich bringen...
Zum Vergrößern anklicken....

Das hat auch niemand behauptet. Relative und absolute Positionierungen sind durchaus sinnvoll und manchmal geht es auch gar nicht anders.

Nur bei deinem Beispiel sind sie überflüssig.

Gruss
Elroy
 
Maximilian schrieb:
Hallo,

ich habe das div#content extra absolut positioniert, damit es sich auf das div.rahmen bezieht (dadurch bekomm ich einen festen Bezugspunkt, nämlich div.rahmen von dem ich dann ausgehen kann), welches relativ positioniert ist. Wenn die Seite später beispielsweise einmal nichtmehr zentriert angezeigt werden soll, dürfte ich so keine Layoutverscheibungen haben.
Außerdem bin ich nicht der Meinung, dass absolute und relative Positionierungen nur Nachteile mitsich bringen...

LG
Zum Vergrößern anklicken....

Layoutverschiebungen sollten auch mit der anderen Variante nicht auftreten, wenn es keine Zentrierung mehr geben soll.

Den größten Pferdefuss bei deiner Variante sehe ich darin, dass der Rahmen nicht mit dem Content wachsen kann.
 
Das hat er nicht. Bloß wurde die Frage aus irgendwelchen Gründen sofort gesperrt, sodass mir nichts anderes übrig blieb. Diese wurde erst einige Zeit nach dem Erstellen des anderen Beitrags freigeschaltet. Ich habe erst jetzt die Beiträge hier gelesen, weil ich nen Tag lang gewartet und gehofft habe, dass jemand auf die Idee kommt, den Beitrag freizuschalten, habe mich auch bei nem Mod gemeldet. Irgendwann hab ich einfach die Lust verloren, ätzend genug alles woanders neu schreiben zu müssen.

Ich bin dankbar für eure Beiträge, so einiges war wirklich hilfreich. Eure Mühen habe ich sehr zu schätzen, verzeihung, dass ich nicht vorher reingeschaut habe, habe gedacht, es wird sich nie ein Mod darum kümmern. Im anderen Forum wurde die Frage nicht sinnloser Weise gesperrt, und es wurde schnell gehofen, somit ist es definitiv keine Sünde, worauf die Formulierung von mermshaus jedoch hindeutet.
 
Okay, wenn das mit der Sperrung stimmt (habe ich noch nie erlebt, aber die Indizien sprechen durchaus nicht gegen dich ;)), sieht die Sache natürlich etwas anders aus. In dem Fall: Sorry.
 
Dein Beitrag war nicht gesperrt (sowas gibts hier nicht) sondern lediglich nicht freigeschaltet. Das passiert vor allem neuen Nutzern die mit Bildern, Quellcodes und Links nur so um sich schmeißen ;) Ist eine Anti-Spam-Maßnahme die diesem Forum durchaus zugute kommt (die echten Spam-Beiträge seht ihr ja nicht mal mehr). Es ist auch nicht notwendig sich deswegen an einen Moderator zu wenden. Die Moderatoren sehen selbst, dass ein Beitrag nicht freigeschaltet ist und erledigen das von sich aus. Natürlich kann in keinem Forum durchgehend ein freiwillig arbeitender Moderator jederzeit schauen was es neues gibt. Etwas Geduld gehört auch dazu, genau wie zum Programmieren ;)
 
Eventuell wäre es unter diesen Umständen sinnvoll, den neuen User darüber zu informieren (beispielsweise mit einem "Dein Beitrag wurde noch nicht freigeschaltet, ein Moderator wird sich darum kümmern" Label). :?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben