Antworten auf deine Fragen:
Neues Thema erstellen

Text usw. in DIV-Boxen mit abstand zum Rand

T

tgreve

********

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 :D)
 
Zuletzt bearbeitet:

Jana

Jana

Webdesignerin

Kreativ-Flatrate-User
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

vanilladragon

Pixelmonster

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
 
T

tgreve

********

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

philbring

Webdesigner

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
 
Zuletzt bearbeitet:
T

tgreve

********

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
 
T

tgreve

********

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 ;) )
 
Zuletzt bearbeitet:
philbring

philbring

Webdesigner

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*
Zum Vergrößern anklicken....

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

philbring

Webdesigner

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 ;) )
Zum Vergrößern anklicken....

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
 
T

tgreve

********

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?
 
Zuletzt bearbeitet:
philbring

philbring

Webdesigner

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?
Zum Vergrößern anklicken....

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
 
Zuletzt bearbeitet:
vanilladragon

vanilladragon

Pixelmonster

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
 
T

tgreve

********

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?
 
T

tgreve

********

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

philbring

Webdesigner

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
 
Zuletzt bearbeitet:
T

tgreve

********

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

philbring

Webdesigner

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
 
Zuletzt bearbeitet:
T

tgreve

********

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 34 (Mitglieder: 1, Gäste: 33)
Robots: 759

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben