Rand mit CSS definieren - website-forum.info

Degers · Registriert seit: 28.03.2009

Huhu,

siehe meine CSS- Kenntnisse da links, quasi 0.

Ich kann nur mit Logik und Google arbeiten und habe jetzt hier mal eine Frage.

Ich möchte aus einem alten Blog eines Freundes die Inhalte auf eine Website darstellen, für diese möchte ich einen gewissen Rand definieren, um den alten Header exakt einzupassen. Ich würde ja jetzt mit diversen Tabellen rumwurschteln, aber ich schätze das hätte den Stempel stümperhaft verdient.
Meine Frage also, wie kann ich Abstände zum Bildschirmrand, in diesem Fall voralldingen Rechts und Links mit CSS definieren? und inwieweit ist das überhaupt möglich?

Hier noch ein Link, habe das Grundmodell eines anderen Projekts übernommen und eine Subdomain draufgeklatscht, wegen dem anderen Gedöhns nicht verwirren lassen, der Abstand soll mit der Breite des Headers kongruieren.

#
Eric

powergold · Registriert seit: 21.03.2009

Ok, ich hab das ganze noch nicht genau verstanden, außerdem ist kein Link da damit ich mir das ganze ansehen könnte.

Lg
Stefan

Degers · Registriert seit: 28.03.2009

Oh, der Link, da war noch was

Tut mir Leid, ich bin heute mittelmäßig verpeilt.

Meine Zeit in Australien

Ich möchte einfach einen freien Rand, und zwar in der Höhe, wo der Header endet.

#
Eric

powergold · Registriert seit: 21.03.2009

Also einen Abstand zu anderen Elementen erzeugst du mit "margin"

margin: 10px = Auf jeder Seite 10px Abstand.
margin: 10px 0px 10px 10px = Abstand oben, rechts, unten und links

Natürlich beim entsprechenden div oder der gleichen einfügen.

Lg
Stefan

Degers · Registriert seit: 28.03.2009

Ich vermute, irgendetwas anderes blockiert die Ausführung des Befehls, hier mal die index.php.
Zum Testen habe ich sogar mal 1000 px angegeben, das Ganze ist weiterhin linksbündig, bis auf den Header, was mir gerade sehr spanisch vorkommt, da das Ganze in einem Div-Container ist , und doch für alles gelten sollte...

PHP-Code:

 
<body>


<div style="text-align:center;" margin="1000px" >
<table border="1" >
<tr height="90" >


<img src="http://root.webev.de/ntr/bilddateien/header.jpg">
<br/>
<iframe src="http://free.timeanddate.com/clock/i1m0qm5y/n47/tlde3/avb" frameborder="0" width="58" height="18"></iframe>
</tr>
<tr>


    <td valign="top" width="25%" border="1">
        <?php include('sidebar.php');?>
    </td>
    
    <td width=""  align="" valign="top">
        <?php
            if(isset($_GET['page'])) {$page = $_GET['page'];} else {$page = home;}
          include "Pages/$page.php";
        ?>
    </td>
</tr>
</table>
</div>
</body>

Letztendlich kommt es mir weniger auf einen Rand an, als vielmehr, dass das ganze erstmal mittig ist.

powergold · Registriert seit: 21.03.2009

Ok, habe im Moment keine Zeit das ich mir das jetzt durch sehe, werde ich machen wenn ich Zeit habe. Nun zum zweiten.

Mittig wird das ganze wenn der äußerste div dass drinnen hat: margin: 0 auto;

Edit://

zB

HTML-Code:

#wrapper {
         width: 990px;
         margin: 0 auto;
         margin-top: 20px;
         margin-bottom: 20px;
}

Weiters musst du dieses Tabellenlayout entfernen und gegen divs ersetzen.

Lg
Stefan

Degers · Registriert seit: 28.03.2009

Wie genau das farblich werden wird, weiß ich noch nicht, aber den Rand habe ich jetzt definiert dank der Hilfe.
Ich habe einfach einen weiteren Div-Container um das Ganze gepackt und den Inneren dann mithilfe des margin-Befehls meinen Wünschen angepasst.
Das Ganze wächst langsam Richtung meiner Vorstellunge, dankefein für die Hilfe.

Eric

Wishu · Registriert seit: 18.03.2009

Zitat:

Zitat von powergold

Ok, habe im Moment keine Zeit das ich mir das jetzt durch sehe, werde ich machen wenn ich Zeit habe. Nun zum zweiten.

Mittig wird das ganze wenn der äußerste div dass drinnen hat: margin: 0 auto;

Edit://

zB

HTML-Code:

#wrapper {
         width: 990px;
         margin: 0 auto;
         margin-top: 20px;
         margin-bottom: 20px;
}

Weiters musst du dieses Tabellenlayout entfernen und gegen divs ersetzen.

Lg
Stefan

Ich möchte nur mal Kurz anmerken, dass man deine Angabe auch kürzer machen kann und margin nicht immer aufrufen muss.

HTML-Code:

#wrapper {
         width: 990px;
         margin: 20px auto;
}

Kurze Erklärung zu der Anzahl der Angaben bei Margin (ebenso bei padding und noch einigen anderen Eigenschaften):

Eine Angabe bedeutet in alle Richtungen. Also bedeutet margin:10px; dass in alle Richtungen ein Außenabstand von 10px gemacht wird.

Zwei Angaben bedeuten, dass die erste Angabe für oben und unten zählt und die zweite für links und rechts. Also bedeutet margin:10px 5px; dass nach oben und unten 10px angewendet werden und nach links und rechts 5px.

Weiteres gibt es noch 3 Angaben. Dort heißt es, dass die erste für oben gilt, die zweite für links und rechts und die dritte für unten. Also bedeutet margin:10px 5px 20px; dass der Abstand nach oben 10px ist, nach links und rechts 5px und nach unten 20px.

Und zu guter letzt vier Angaben. Für jede Richtung also eine separate Angabe. Hier ist der Uhrzeigersinn zu beachten. Die erste Angabe heißt oben, die zweite rechts, die dritte unten und die vierte links. Also bedeutet margin:10px 5px 20px 15px; dass nach oben 10px Abstand kommt, nach rechts 5px, nach unten 20px und nach links 15px.

So das war ein kleiner Crashkurs in Sachen margin und seine Richtungen

Gruß
Wishu

powergold · Registriert seit: 21.03.2009

Danke Wishu, ich wusste es natürlich. Ich habe nur die Kurzvariante erklärt um ein paar Zeilen zu sparen.

Edit:// Habe gerade gesehen auf was es sich bezieht. Ja gut das wusste ich wirklich nicht. Gut zu wissen.

Lg
Stefan

Wishu · Registriert seit: 18.03.2009

Dachte mir, dass du es wusstest aber Eric sagte, er kennt sich noch nicht so gut aus, wollte ich das mal kurz anmerken.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)