Box Modell // Div Um Div

GELBGRUEN · 14.09.2010

Hi,
ich glaub ich steh gerade ziemlich auf dem Schlauch.
Meine Layout soll wie folgt aussehen.

Dh. hoechst warscheinlich das ich zwei Container brauche. Denn den weißen Rahmen kann ich - soweit ich weiß - nicht mit Margin bestimmen, da ich Margin keine Farben zuweisen kann.
Dh. Container im Container mit festen Größen bis auf Height. Da Height von Seite zu Seite abweicht und durch Padding und den Content bestimmt werden soll.

HTML:

<div id="div1"><div id="div2">
</div></div>

HTML:

#div1    {
    position:absolute;
    width:995px;
    top: 369px;
    left: 0px;
    background-color:#FFF;
    height:auto;
    padding-left:1px;
    padding-right:1px;
    padding-bottom:22px;
}
#div2  {
    border: 1px solid #999;
    margin-top:30px;
    padding-top: 30px;
    padding-bottom: 90px;
    position: absolute;
    width:952px;
    background-color:#FFF;
    margin-bottom:50px;
    margin-left:22px;
    margin-right:22px;
}

Das Ergebniss sieht leider nicht wie oben aus sondern so:

Wenn sich dem Ganzen jemand annimmt waere ich mehr als Dankbar!
Ich muss irgendwie ganz bloed auf dem Schlauch stehen...

Gelöschtes Mitglied 446946 · 14.09.2010

AW: Box Modell // Div Um Div

Hallo Gelbgruen,

Du hast in Deinem css div2 als Klasse deklariert, steuerst aber in Deinem Quellcode div2 als id an.

also im css Code aus ".div2" ein "#div2" machen, vielleicht wars das schon

fexx · 14.09.2010

AW: Box Modell // Div Um Div

html: <div id="divID"> css: #divID
html: <div class="divKLASSE"> css: .divKLASSE

das ist schon mal das erste, was mir aufgefallen ist ... zumindest stimmt das nicht in deinen codeschnipseln ...

dann solltest du dir das box modell nochmal anschauen ... warum verwendest du "position:absolute;"? nimms weg, dann noch floats clearen und es sollte passen

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

Das mit der Class und der Id hab ich leider beim posten vertauscht, auf der Domain ist es richtig.

@Fexx, mit was bestimme ich dann die Position. //Wie gehabt, irgendwie stehe ich auf dem Schlauch..

fexx · 14.09.2010

AW: Box Modell // Div Um Div

mit realtive/static ...

Bitte kostenlos registrieren, damit du die Links siehst.

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

mit relativ und static funktioniert es zwar mit den beiden div boxen, leider nimmt er den content nun nicht mehr wahr!

fexx · 14.09.2010

AW: Box Modell // Div Um Div

hast du floats in deinem layout? diese müssen gecleared werden:

Code:

css:
.clear { clear: both; }

html (nach den gefloateten elementen):
<div class="clear"></div>

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

ich hab nur beim navi gefloatete elemente, diese werden nun beide danach "gecleared".

das verschobene bild hat sich leider nicht geaendert.

edit: typo3 baut selbst noch viele elemente ein welche gefloatet werden. aber auch sie werden alle wieder "gecleared".

SpiderDP · 14.09.2010

AW: Box Modell // Div Um Div

Du musst das clear noch bei

<div id="content">
(Andere divs)
<div style="clear: both"></div>
</div>

einfügen, dann lüppts.

fexx · 14.09.2010

AW: Box Modell // Div Um Div

ahja ...

Code:

<div class="content">
                <div class="contentlins">

          <div class="txt">
    <!--  CONTENT ELEMENT, uid:29/text [begin] -->
        <div class="csc-default" id="c29">
        <!--  Header: [begin] -->
            <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Nehmen Sie gerne mit mir Kontakt auf!</h1></div>
        <!--  Header: [end] -->
            
        <!--  Text: [begin] -->
            <p class="bodytext">Wenn Sie fragen zu meinen Arbeiten haben,<br>sich für meine Öffnungszeiten interessieren<br>oder auch nur Ihre Glückwünsche hier lassen<br>wollen, füllen Sie bitte untenstehendes Formular<br>aus und ich werde es umgehend bearbeiten.</p>
        <!--  Text: [end] -->
            </div>
    <!--  CONTENT ELEMENT, uid:29/text [end] -->
        
    <!--  CONTENT ELEMENT, uid:3/mailform [begin] -->
        <div class="csc-default" id="c3"><form onsubmit="return validateForm('mailform','name,Name,email,Email','','','')" method="post" enctype="multipart/form-data" name="mailform" id="mailform" action="index.php?id=15"><div style="display: none;"><input type="hidden" value="1" id="mailformhtml_enabled" name="html_enabled"><input type="hidden" value="E-Mail von Ihrer Homepage" id="mailformsubject" name="subject"><input type="hidden" value="9:tt_content:3" name="locationData"></div>
        <!--  Mail form inserted: [begin] -->
            <fieldset class="csc-mailform"><div class="csc-mailform-field"><label for="mailformname">Name</label> <input type="text" value="" size="40" id="mailformname" name="name"></div><div class="csc-mailform-field"><label for="mailformemail">Email</label> <input type="text" value="" size="40" id="mailformemail" name="email"></div><div class="csc-mailform-field"><label for="mailformaddress">Nachricht</label> <textarea rows="5" cols="40" id="mailformaddress" name="address"></textarea></div><div class="csc-mailform-field"> <input type="submit" class="csc-mailform-submit" value="Senden" id="mailformformtype_mail" name="formtype_mail"></div></fieldset>
        <!--  Mail form inserted: [end] -->
            </form></div>
    <!--  CONTENT ELEMENT, uid:3/mailform [end] -->
        </div>

        </div>
                <div class="contentrechs">
          <div class="txt2"></div>
          </div>
                <div class="contentborder">
          <div class="txt3"></div>
          </div>          
          
        [B]<div style="clear:both;"></div>[/B]</div>

und es Funktioniert ... zumindest mit dem Firebug^^

//Edit: du solltest es allerdings wie oben beschrieben einfügen ;-)

SpiderDP · 14.09.2010

AW: Box Modell // Div Um Div

Man muss danach nur noch diverse padding-bottom anpassen, aber das siehst Du ja selber

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

YEAHAAA!
Tausend Dank euch beiden!
Wieder etwas gelernt!
Das mit "position" hab ich auch selbst schon sehr oft hin und her geschoben und alle verschiedene Befehle versucht.
Aber das mit dem clear Befehl haette noch sehr lange gedauert!

SpiderDP · 14.09.2010

AW: Box Modell // Div Um Div

Ich selber bin kein Freund von "position". Es geht auch ohne eine Seite mittig hinzubekommen, was ich persönlich angenehmer finde.

fexx · 14.09.2010

AW: Box Modell // Div Um Div

ich versteh nicht, warum alle immer mit ihrem position: absolute; anrücken^^

hubspe · 14.09.2010

AW: Box Modell // Div Um Div

fexx schrieb:
ich versteh nicht, warum alle immer mit ihrem position: absolute; anrücken^^

weil sie die Grundlagen von XHTML/CSS nicht verstanden haben, bzw. oft keine Lust haben sich damit auseinanderzusetzen.

In ein CMS einarbeiten und damit dann die Sites damit irgendwie zusammenhauen reicht vielen.
Solange sie Websites erstellen nicht als Dienstleistung anbieten ist das imho auch okay. Andernfalls wäre das ja sonst unseriös.

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

Ich kann nur von mir selber reden: Ich bin Grafik Designer und kein Programmierer.
Ich versuche eben so gut es alles "anzulesen" welches ich brauch um mein Design umzusetzen.

fexx · 14.09.2010

AW: Box Modell // Div Um Div

naja aber du bietest es an auf deiner homepage ;-)

GELBGRUEN · 14.09.2010

AW: Box Modell // Div Um Div

Wer kauft denn sonst meine Templates

Meine Fragen wurden geklaert

vielen Dank nochmal!

hubspe · 15.09.2010

AW: Box Modell // Div Um Div

GELBGRUEN schrieb:
Wer kauft denn sonst meine Templates

Du bietest offensichtlich Webdesign an.
Das ist was vollkommen anderes als Templates zu verkaufen.

GELBGRUEN schrieb:
Ich kann nur von mir selber reden: Ich bin Grafik Designer und kein Programmierer.
Ich versuche eben so gut es alles "anzulesen" welches ich brauch um mein Design umzusetzen.

Was du machst ist eine Frechheit deinen ahnungslosen Kunden gegenüber.
Du hast offenbar keine Ahnung wie man eine vernünftige Website baut, dir sind ja noch nicht mal die Grundbegriffe geläufig. Von SEO will ich gar nicht erst anfangen.

Das ist so ungefähr die Qualität, die man vom Sohn des Pförtners oder vom Neffen des Nachbarn für 50 Euronen bekommt.

Was mich daran ärgert ist, das du mit deinem unprofessionellen Zusammenhau die Branche in Verruf bringst. :evil:

fexx · 15.09.2010

AW: Box Modell // Div Um Div

Was ich schlimmer finde, das es viele selbsternannte Mediengestalter/Mediendesigner/Webdesigner/... gibt, die den Markt nicht nur mit schlechter Qualität sondern auch mit Kampfpreisen überhäufen.

Frei nach dem Motto "Hey, ich hab Photoshop und Dreamweaver - jetzt mache ich meine eigene Werbeagentur".

Das Problem gibt es allerdings nicht nur im Nonprint Bereich, auch in Print Bereich gibt es viele "Kreative", die keine Ahnung von der Technik oder ähnliches haben.

// Back to Topic: Du solltest dir auf jeden Fall nochmal das Box Modell anschauen ...