Text usw. in DIV-Boxen mit abstand zum Rand

tgreve · 22.07.2010

Moin Moin!

Ich komme gerade irgendwie nicht weiter... :'(
Bin dabei eine Seite mit dynamischen Boyen zu erstellen. Jetzt habe ich mien "Gerüst" fertig, aber ich möchte gerne, dass innerhalt von den einzelnen boxen der Text sagen wir mal 10px vom Rand weg steht. Habe es mit padding und margin probiert, aber leider ohne Erfolg. Die Boxen rutschen dann einfach nach unten, bzw. überlagern andere.
Kann mir bitte Jemand einen gedankenanstoß geben?
Danke!

Hier mal den CSS-Code:

HTML:

body {
    margin: 0px auto;
}

#container {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}

.
.
.

#container #sidebar {
    float: left;
    min-height: 380px;
    width: 20%;
    background-color: #CF0;
}
#container #content {
    float: right;
    width: 80%;
    background-color: #0F0;
    min-height: 380px;
}

.
.
.

und den HTML-Code:

HTML:

<div id="container">
  .
  .
  .
  <div id="content"> C O N T E N T > > C O N T E N T > > ... </div>
  <div id="sidebar">S I D E B A R | | S I D E B A R | | ... </div>
  .
  .
  .
</div>

Anbei auch noch ein Bild, wie es jetzt aussieht. (Die farben dienen nur zum anzeigen, wo welche Box ist - keine Angst

)

Jana · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Wo ist da das Problem? Fehlt doch nur nen padding:10px in der #content und #sidebar Box.

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Das dachte ich auch, aber dann sieht es so aus!

Jana · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Die Sache ist, dass ein Padding die Breite der Boxen um denselben Wert erhöht. In diesem Fall müsstest du die Prozentangaben in der #sidebar und #content runterschrauben.

vanilladragon · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Du musst natürlich beachten, dass die Box dann breiter wird. Das heißt, wenn deine Box vorher 500 px hatte, hat sie jetzt 510 px.

Breite die ein div im Brower einnimmt = margin-left + border-left + padding-left + box-breite + padding-right + border-right + margin-right

vanilla

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Vielen Dank schonmal für die Tipps.
Wenn ich jedoch die Prozentangaben runterschraube passen die Boxen bei MEINER Auflösung. Aber wenn ich dann andere Auflösungen checke verschiebt sich doch wieder alles. Wenn ich dann die Prozentangaben an die keinste Auflösung anpasse, ist der Abstand bei einer 1920er Auflösung wieder extrem.

Gibt es denn keine Andere Möglichkeit? Ich will jetzt auch nicht anfangen zentrierte Tabellen oder so einzufügen.
HILFEE!!

Bitte um weitere Lösungsansätze! *langsam verzweifel*

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Hallo,

das Problem kommt durch die Berechnung der Gesamtbreite der einzelnen Elemente.

Die %-Angaben beziehen sich auf die Nutzbare Breite. Dazu kommt auf jeden Fall noch die Breite von Padding, Border und Margin.

In deinem Beispiel heißt das das du 20% Nutzbreite + 80% Netzbreite + 4 x Padding ( + 4 x Border + 4 * Margin) als Gesamtbreite hast. Das macht zusammen jedoch mehr als 100%, daher rutschen die Boxen untereinander. Du kannst z.B. Padding auch als % angeben und die Breite der Boxen entsprechend verringern oder die Breite insgesamt alle in PX angeben. Auch dabei musst die einzelnen Werte entsprechend addieren.

Viele Grüße

Peter

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Ja, prima, danke !
Manchmal ist es soooo einfach

Vielen Dank für eure Mühe und euch allen einen schönen Tag!

Tim

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Einen hab ich noch!
Ich hab jetzt alles schön mit prozentabgaben und so...
jetzt möchte ich noch einen 1px breiten Rand an der Seite einer Box haben. Gibt´s da eine Möglichkeit?
(Sorry

)

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

tgreve schrieb:
Gibt es denn keine Andere Möglichkeit? Ich will jetzt auch nicht anfangen zentrierte Tabellen oder so einzufügen.
HILFEE!!

Bitte um weitere Lösungsansätze! *langsam verzweifel*

Hallo,

im Prinzip ganz einfach.

Pack innerhalb deiner Divs (sidebar, content) jeweils einen neuen Div-Block, welchen du mit einem Margin von 10px versiehst.

Code:

#container #sidebar {
    float: left;
    min-height: 380px;
    width: 20%;
    background-color: #CF0;
}
#container #sidebar .content {
    margin: 10px;
}

<div id="sidebar">
<div class="content">Der Text</div>
</div>

Das gleich für den Content-Block. damit funktioniert das.

Gruß

Peter

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

tgreve schrieb:
jetzt möchte ich noch einen 1px breiten Rand an der Seite einer Box haben. Gibt´s da eine Möglichkeit?
(Sorry )

Ja,

du kannst den Rang gezielt mit border-left, border-top, border-right und border-bottom angeben. Als Parameter die Breite, Stil und Farbe.

Code:

border-left: 1px solid red;

Gruß

Peter

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Das mit border-left ist soweit klar.
Was ich meinte ist:
sidebar (width: 20% + border (1px) + content (width: 80% = 1px zuviel. (boxen sind dann nicht mehr nebeneinander, sondern untereinander, verstehst du?

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

tgreve schrieb:
Das mit border-left ist soweit klar.
Was ich meinte ist:
sidebar (width: 20% + border (1px) + content (width: 80% = 1px zuviel. (boxen sind dann nicht mehr nebeneinander, sondern untereinander, verstehst du?

OK,

das mit dem Border von 1PX zusammen mit den Prozent Angaben ist dann schon etwas schwieriger, da man die Breite der Boxen ja um mind. 1% verringern muss damit für den Border Platz bleibt. Bei sehr kleinen Bildschirmauflösungen kann es dann vorkommen das die Verringerung um 1% weniger als 1Pixel ist und die Boxen wieder untereinander rutschen. bei sehr greoßen Auflösungen werden die Boxen dann zu klein.

Am einfachsten wäre es hinter die Divs eine Hintergrundgrafik zu legen, welche evtl. komplett transparent ist und auf der gewünschten Seite den den Rand hat.

Die Hintergrundgrafik selbst kann auch sehr klein sein und mittels Positionierung und Repeat entsprechen die Boxen ausfüllen.

Hier findest du noch eine Erklärung dazu.

Gruß

Peter

vanilladragon · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Ich würde die Prozentangaben ganz schnell vergessen und in die unterste Schublade stecken die du überhaupt kennst. Das ist überhaupt nicht mehr aktuell und sollte auch nicht mehr verwendet werden. Wenn du ein freies Design möchtest, dann mach das lieber mit hilfe von min- und max-größen.

usability sollte dir kein fremdwort sein. und wenn schon dann mal schnell drüber informieren, bevor dein projekt fertig ist.

vanilla

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Ja, das ist eine gute Idee, Danke!
So, einen Letzten habe ich noch: (Ist mein erstes komplett dynamisches Projekt

):
Wenn ich dem content eine min-height von 380px gebe, ist alles schick. möchte ich jedoch auch 90% gehen, ist es, als ob ich ger keine Höhe angegeben hätte und die box ist nur genau so groß wie Text drinsteht.

Hast du da auch ne Lösung für mich parat?

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

@Vanilla:
Es ist aber auch sehr schwer, es allen (Auflösungen) recht zu machen. Nimmt man an die kleinste Auflösung ist 1024x768 ist schon sehr wenig Platz für Informationen auf der Page.
Prinzipiell gebe ich dir natürlcih Recht. Ich würde es auch lieber mit px-Angaben machen.
In diesem Fall jedoch brauche ich maximalen Platz auf der Seite (Ist für Ststistiken und Datenbankauswertungen etc... )

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Hallo,

das kannst du mit folgendem CSS realisieren:

Code:

#container {
    position: absolute;
    top: 5%;
    bottom: 5%;
    height: 90%;
    width: 75%;
    left: 12%;
    background-color: #EE0000; /* nur zur Veranschaulichung */
}

Du musst dann nur die ineren Divs dazu bringen die gesamte Höhe einzunehmen.

D.h. für die Divs #sidebar und #content jeweils height: 100% zusätzlich angeben.

Gruß

Peter

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Danke, aber wie bringe ich jetzt die anderen boxen dazu sich an der anderen auszurichten?
Du bist mir wirklich eine große Hilfe. Dankeschön!

philbring · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Ich habe hier mal eine rudimentäre Testseite nach deinen Vorlagen erstellt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>Boxentest</title>
    <style type="text/css">
        body {
            margin: 0px auto;
        }
        #container {
            position: absolute;
            top: 5%;
            bottom: 5%;
            height: 90%;
            width: 75%;
            left: 12%;
            background-color: #EE0000;
        }
        #container #sidebar {
            float: left;
            min-height: 380px;
            height: 100%;
            width: 20%;
            background-color: #CF0;
        }
        #container #content {
            float: right;
            width: 80%;
            background-color: #0F0;
            min-height: 380px;
            height: 100%;
        } 
        #container .data {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="sidebar">
            <div class="data">S I D E B A R | | S I D E B A R | | ... </div>
        </div>
        <div id="content">
            <div class="data"> C O N T E N T > > C O N T E N T > > ... </div>
        </div>
    </div>
</body>
</html>

Das Beispiel habe ich in IE8, Firefox 3.6.7 und Chrome 5.0.375.99 getestet.

Gruß

Peter

tgreve · 22.07.2010

AW: Text usw. in DIV-Boxen mit abstand zum Rand

Moin Peter! Das ist sehr nett von dir!
Vielen Dank!
Jetzt komme ich wieder allein klar.

Viele liebe Grüße
Tim