Antworten auf deine Fragen:
Neues Thema erstellen

Mutter Div erstellen

V

VatoLoco

Guest

Hi leute,

ich bin grad an einer webseite dran, habe hier auch schon ewig viel lernen können, und ich komm eigentlich auch durch probieren ganz gut zu recht, aber jetzt muss ich doch mal fragen, denn hier im forum und über google wird das nicht erklärt oder leider nur angeschnitten. Und zwar:

ich habe ein template aus PSD in Dreamweaver cs3 "exportiert", habe dort die Ebenen in Divs umgewandelt, und auch schon die css datei erstellt, jetzt habe ich um alle anderen DIV´s auf der seite eine große Div erstellt, die MUTTER DIV, heisst bei mir wrapper. so jetzt wenn ich diesen Wrapper durch die CSS datei zentriere, dann wird das auch erledigt, nur die restlichen DIV´s bleiben da wo sie sind. nun meine frage ist es wie kann ich die anderen DIV´s diesem Mutter DIV unterordnen? Oder diese vielen Div´s dem großen Mutter Div einfügen, so das sich alle der Mutter Div anpassen? Mach da schon seid 2 tagen rum und kriege es einfach nicht hin...leider...:'(

Hat jemand eine lösung?

Danke im Vorraus:)

VatoLoco
 

cebito

cebito

undefined

AW: Mutter Div erstellen

Wie sind denn deine divs positioniert? Seh in Dreamweaver/Photoshop-codes immer absolute Positionierungen. Dann sollte dein Wrapper auch absolute oder relativ positioniert sein, sonst richten sich die anderen am Browserfenster aus. Aber ohne Quellcode und css lässt sich auch hier - wie in jedem zweiten Post - nix sagen.
 
V

VatoLoco

Guest

AW: Mutter Div erstellen

So sieht es in der HTMl aus:

Code: 
<html>
<head>
<title>Design-sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper"></div>
        <div id="apDiv1"></div>
        <div id="apDiv2"></div>
        <div id="apDiv3"></div>
        <div id="apDiv4"></div>
        <div id="apDiv5"></div>
        <div id="apDiv6"></div>
        <div id="apDiv7"></div>
        <div id="apDiv8"></div>
        <div id="apDiv9"></div>
        <div id="apDiv10"></div>
        <div id="apDiv11"></div>
        <div id="apDiv12"></div>
        <div id="apDiv13"></div>
        <div id="apDiv15"></div>
        <div id="apDiv16"></div>
        <div id="apDiv17"></div>
        <div id="apDiv18"></div>
        <div id="apDiv19"></div>
<div align="right">
  <!-- ImageReady Slices (Design-sliced.psd) -->
</div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
      </div>
</body>
</html>

und so die CSS:

Code: 
#wrapper{
    width: 780px;
    height: 650px;
    margin: 0 auto;
    }
#apDiv1 {
    position: absolute;
    background-image: url(Bilder/index_01.gif);
    left: 0px;
    top: 0px;
    width: 780px;
    height: 56px;
    z-index: 1;
    visibility: visible;
}
#apDiv2 {
    position: absolute;
    background-image: url(Bilder/index_02.gif);
    left: 0px;
    top: 56px;
    width: 780px;
    height: 15px;
    z-index: 2;
    visibility: visible;
}
#apDiv3 {
    position: absolute;
    background-image: url(Bilder/index_03.gif);
    left: 0px;
    top: 71px;
    width: 72px;
    height: 538px;
    z-index: 3;
    vertical-align: middle;
    visibility: visible;
}
#apDiv4 {
    position: absolute;
    background-image: url(Bilder/index_04.gif);
    left: 72px;
    top: 71px;
    width: 225px;
    height: 311px;
    z-index: 4;
    visibility: visible;
}
#apDiv5 {
    position: absolute;
    background-image: url(Bilder/index_05.gif);
    left: 297px;
    top: 71px;
    width: 413px;
    height: 311px;
    z-index: 5;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
#apDiv6 {
    position: absolute;
    background-image: url(Bilder/index_06.gif);
    left: 710px;
    top: 71px;
    width: 70px;
    height: 538px;
    z-index: 6;
    vertical-align: middle;
    visibility: visible;
}
#apDiv7 {
    position: absolute;
    background-image: url(Bilder/index_07.gif);
    left: 72px;
    top: 382px;
    width: 638px;
    height: 29px;
    z-index: 7;
    visibility: visible;
}
#apDiv8 {
    position: absolute;
    background-image: url(Bilder/index_08.gif);
    left: 72px;
    top: 411px;
    width: 213px;
    height: 29px;
    z-index: 8;
    vertical-align: middle;
    visibility: visible;
}
#apDiv9 {
    position: absolute;
    background-image: url(Bilder/index_09.gif);
    left: 285px;
    top: 411px;
    width: 27px;
    height: 198px;
    z-index: 9;
    vertical-align: middle;
    visibility: visible;
}
#apDiv10 {
    position: absolute;
    background-image: url(Bilder/index_10.gif);
    left: 312px;
    top: 411px;
    width: 398px;
    height: 28px;
    z-index: 10;
    visibility: visible;
}
#apDiv12 {
    position: absolute;
    background-image: url(Bilder/index_12.gif);
    left: 72px;
    top: 440px;
    width: 213px;
    height: 132px;
    z-index: 12;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
}
#apDiv11 {
    position: absolute;
    background-image: url(Bilder/index_11.gif);
    left: 312px;
    top: 439px;
    width: 398px;
    height: 133px;
    z-index: 11;
    vertical-align: middle;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
}
#apDiv13 {
    position: absolute;
    background-image: url(Bilder/index_13.gif);
    left: 72px;
    top: 572px;
    width: 213px;
    height: 37px;
    z-index: 13;
    visibility: visible;
}
#apDiv15 {
    position: absolute;
    background-image: url(Bilder/index_15.gif);
    left: 312px;
    top: 572px;
    width: 398px;
    height: 37px;
    z-index: 15;
    visibility: visible;
}    
#apDiv14 {
    position:absolute;
    left:234px;
    top:24px;
    width:305px;
    height:193px;
    z-index:19;
}
#apDiv16 {
    position: absolute;
    background-image: url(Bilder/index_16.gif);
    left: 0px;
    top: 609px;
    width: 72px;
    height: 41px;
    z-index: 16;
    visibility: visible;
}
#apDiv17 {
    position: absolute;
    background-image: url(Bilder/index_17.gif);
    left: 72px;
    top: 609px;
    width: 638px;
    height: 41px;
    z-index: 17;
    visibility: visible;
}
#apDiv18 {
    position: absolute;
    background-image: url(Bilder/index_18.gif);
    left: 710px;
    top: 609px;
    width: 70px;
    height: 41px;
    z-index: 18;
    visibility: visible;
}


ich hoff das bringt dir was, weil ich denke das ist absoluter mist....
 
cebito

cebito

undefined

AW: Mutter Div erstellen

Erster Blick, dein wrapper befindet sich vor, nicht um die divs. Den musst du erst ganz unten schließen. Und, wie ich gedacht, du musst ihn relative oder absolute positionieren, damit sich die anderen an ihm ausrichten und nicht am Fenster...
 
T

TheDon0Ne

WHAT?

AW: Mutter Div erstellen

das ganze sollte dann so aussehen:

Code: 
<div id="wrapper">
        <div id="apDiv1"></div>
        <div id="apDiv2"></div>
        <div id="apDiv3"></div>
        <div id="apDiv4"></div>
        <div id="apDiv5"></div>
        <div id="apDiv6"></div>
        <div id="apDiv7"></div>
        <div id="apDiv8"></div>
        <div id="apDiv9"></div>
        <div id="apDiv10"></div>
        <div id="apDiv11"></div>
        <div id="apDiv12"></div>
        <div id="apDiv13"></div>
        <div id="apDiv15"></div>
        <div id="apDiv16"></div>
        <div id="apDiv17"></div>
        <div id="apDiv18"></div>
        <div id="apDiv19"></div>
</div>

zu der css und positionierung hat cebito ja schon alles gesagt


blos was sollen die 7 geschlossenen divs vor dem geschlossenen body?
 
V

VatoLoco

Guest

AW: Mutter Div erstellen

also erstmals vielen dank für die antworten!

so habe die überflüssigen divs entfernt und den wrapper unten geschlossen, alle divs in der css sind auf absolut, aber irgendwie zentriert er das alles nicht auf die mitte?! das ist komisch....


ACH UPS okay mein fehler, habe das mutter div auf relativ gesetzt und nun sieht es perfekt aus!

danke danke danke danke
 
Zuletzt bearbeitet von einem Moderator:
V

VatoLoco

Guest

AW: Mutter Div erstellen

dann bleibt mir nur noch eine frage, um nicht einen neuen thread aufzu machen, den bei der krise sollte man auch sparen! :D

wenn ich einen text schreibe, das das div mit dem text weiter "wächst", und alle anderen divs natürlich auch?! Wie geht das, das probiere ich jetzt auch schon eine weile, und finde die lösung nicht. vll. solltet ihr wissen das das mein erster versuch ist mit css und divs....
 
cebito

cebito

undefined

AW: Mutter Div erstellen

VatoLoco schrieb:
dann bleibt mir nur noch eine frage, um nicht einen neuen thread aufzu machen, den bei der krise sollte man auch sparen! :D

wenn ich einen text schreibe, das das div mit dem text weiter "wächst", und alle anderen divs natürlich auch?! Wie geht das, das probiere ich jetzt auch schon eine weile, und finde die lösung nicht. vll. solltet ihr wissen das das mein erster versuch ist mit css und divs....
Zum Vergrößern anklicken....

Ein div, bei dem nicht explizit overflow:irgendwas angegeben ist, wächst mit seinem content (und das machen auch deine div's). Dein Problem ist, das die nachfolgenden, absolut (fest) positionierten divs immer einen höheren z-index haben und somit deinen "gewachsenen" div überlagern. Brauchst die indexes jetzt aber nicht rausmachen, das hilft da auch nicht.
Für das was du vor hast bedarf es anderer Ansätze als den PS/DW-code mal schnell anzupassen. Es sei denn, du gibst deinem (zu kleinen) div overflow:auto, dann erscheint 'ne scrollleiste sobald der content den div sprengt.
Ansonsten, mach mal nen Screenshot oder poste die Ausgangs-PS-Datei als jpeg. Markiere wo sich divs befinden und ob die variabel oder fest sein sollen. Bring ein wenig Zeit mit und hier werden dir einige Leute helfen das auch besser umzusetzen.
 
V

VatoLoco

Guest

AW: Mutter Div erstellen

hallo,

also sorry, ich bin seid einigen tagen hier im forum und ich weiss noch nicht genau was für infos und was alles ihr so braucht, daher sorry wenn man mir etwas auf die sprünge helfen muss! :)

aber wie du siehst, bemühe ich mich.

habe auf dem bild das ich hier mit poste mal grob angezeigt wo text sein soll, und was mit wachsen muss, das was nicht angezeigt ist, denke ich mal (!) wächste dann bzw. läuft automatisch mit runter! ich hoff das das etwas weiter hilft, wenn nicht einfach sagen was du noch brauichst! Die slices sind genau so wie ich sie auch exportiert habe, ausser ein oder zwei kleiner neue slices, die ich für die mitwachsenden extra gesliced habe...

merci
 
T

TheDon0Ne

WHAT?

AW: Mutter Div erstellen

auf keinen fall sollte der wrapper eine feste höhe bekommen wenn es wachsen soll nimm mal die höhe bei den divs die wachsen sollen und beim wrapper raus und probier mal

und füll mal soviel text rein das es sich ausdehnen muss

die divs ohne feste höhe müssten sein:
wrapper
3
6
9
11
12

und sie brauchen einen sich wiederholenden background um platz und seitenaufbau zu sparen reicht dort ein 1 px hoher strich der im css des jeweiligen divs mit der angabe

Code: 
background-image: url(BILD.gif);
background-repeat: repeat-y;

probiers mal aus
 
V

VatoLoco

Guest

AW: Mutter Div erstellen

hi, also habe das jetzt mal alles so gemacht, sieht nicht grade gut aus würde ich behaupten! :) muss ich da auch noch was in der css einstellen wie z.B. dieses FIX oder absolute oder relativ?
auch wenn ich schreibe geht das div einfach über das andere drüber und mitwachsen will auch nichts? :(

so sieht es jetzt im Dreamweaver aus:




Hier nochmal der CSS code:

Code: 
#wrapper{
    position: relative;
    width: 780px;
    margin: auto;
    }
#apDiv1 {
    position: absolute;
    background-image: url(Bilder/index_01.gif);
    left: 0px;
    top: 0px;
    width: 780px;
    height: 56px;
    z-index: 1;
    visibility: visible;
}
#apDiv2 {
    position: absolute;
    background-image: url(Bilder/index_02.gif);
    left: 0px;
    top: 56px;
    width: 780px;
    height: 15px;
    z-index: 2;
    visibility: visible;
}
#apDiv3 {
    position: absolute;
    background-image: url(Bilder/index_03.gif);
    background-repeat: repeat-y;
    left: 0px;
    top: 71px;
    width: 72px;
    z-index: 3;
    vertical-align: middle;
    visibility: visible;
}
#apDiv4 {
    position: absolute;
    background-image: url(Bilder/index_04.gif);
    left: 72px;
    top: 71px;
    width: 225px;
    height: 311px;
    z-index: 4;
    visibility: visible;
}
#apDiv5 {
    position: absolute;
    background-image: url(Bilder/index_05.gif);
    background-repeat: repeat-y;
    left: 297px;
    top: 71px;
    width: 413px;
    z-index: 5;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
#apDiv6 {
    position: absolute;
    background-image: url(Bilder/index_06.gif);
    background-repeat: repeat-y;
    left: 710px;
    top: 71px;
    width: 70px;
    z-index: 6;
    vertical-align: middle;
    visibility: visible;
}
#apDiv7 {
    position: absolute;
    background-image: url(Bilder/index_07.gif);
    left: 72px;
    top: 382px;
    width: 638px;
    height: 29px;
    z-index: 7;
    visibility: visible;
}
#apDiv8 {
    position: absolute;
    background-image: url(Bilder/index_08.gif);
    left: 72px;
    top: 411px;
    width: 213px;
    height: 29px;
    z-index: 8;
    vertical-align: middle;
    visibility: visible;
}
#apDiv9 {
    position: absolute;
    background-image: url(Bilder/index_09.gif);
    background-repeat: repeat-y;
    left: 285px;
    top: 411px;
    width: 27px;
    z-index: 9;
    vertical-align: middle;
    visibility: visible;
}
#apDiv10 {
    position: absolute;
    background-image: url(Bilder/index_10.gif);
    left: 312px;
    top: 411px;
    width: 398px;
    height: 28px;
    z-index: 10;
    visibility: visible;
}
#apDiv12 {
    position: absolute;
    background-image: url(Bilder/index_12.gif);
    background-repeat: repeat-y;
    left: 72px;
    top: 440px;
    width: 213px;
    z-index: 12;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    height: 2px;
}
#apDiv11 {
    position: absolute;
    background-image: url(Bilder/index_11.gif);
    background-repeat: repeat-y;
    left: 312px;
    top: 439px;
    width: 398px;
    z-index: 11;
    vertical-align: middle;
    visibility: visible;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
}
#apDiv13 {
    position: absolute;
    background-image: url(Bilder/index_13.gif);
    left: 72px;
    top: 572px;
    width: 213px;
    height: 37px;
    z-index: 13;
    visibility: visible;
}
#apDiv15 {
    position: absolute;
    background-image: url(Bilder/index_15.gif);
    left: 312px;
    top: 572px;
    width: 398px;
    height: 37px;
    z-index: 15;
    visibility: visible;
}    
#apDiv14 {
    position:absolute;
    left:234px;
    top:24px;
    width:305px;
    height:193px;
    z-index:19;
}
#apDiv16 {
    position: absolute;
    background-image: url(Bilder/index_16.gif);
    left: 0px;
    top: 609px;
    width: 72px;
    height: 41px;
    z-index: 16;
    visibility: visible;
}
#apDiv17 {
    position: absolute;
    background-image: url(Bilder/index_17.gif);
    left: 72px;
    top: 609px;
    width: 638px;
    height: 41px;
    z-index: 17;
    visibility: visible;
}
#apDiv18 {
    position: absolute;
    background-image: url(Bilder/index_18.gif);
    left: 710px;
    top: 609px;
    width: 70px;
    height: 41px;
    z-index: 18;
    visibility: visible;
}
#wrapper #apDiv5 .Stil1 {
    font: bold normal 14px Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}


Und der HTML Code:

Code: 
<html>
<head>
<title>Design-sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Stil1 {
    font: bold 14px;
    font-size: 14px;
}
-->
</style>
</head>
<body bgcolor="#373839" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper">
        <div id="apDiv1"></div>
        <div id="apDiv2"></div>
        <div id="apDiv3"></div>
        <div id="apDiv4"></div>
        <div id="apDiv5">
          <div align="center" class="Stil1">
            <p>&nbsp;</p>
          </div>
          <div align="center" class="Stil2">
            <p align="left"><br>
              <br>
              <br>
            </p>
            <p align="left">&nbsp;</p>
            <p align="left">&nbsp;</p>
            <p align="left">&nbsp;</p>
            <p align="left">&nbsp;</p>
            <p align="left"><br>
              <br>  
              <br>
            </p>
          </div>
        </div>
  <div id="apDiv6"></div>
        <div id="apDiv7"></div>
        <div id="apDiv8"></div>
        <div id="apDiv9"></div>
        <div id="apDiv10"></div>
        <div id="apDiv11"></div>
        <div id="apDiv12"></div>
  <div id="apDiv13"></div>
        <div id="apDiv15"></div>
        <div id="apDiv16"></div>
        <div id="apDiv17"></div>
        <div id="apDiv18"></div>
        <div id="apDiv19"></div>
</div>
  <!-- ImageReady Slices (Design-sliced.psd) -->
</body>
</html>


also das ist mein aller erstes mal das ich so etwas mache...ich weiss nicht in wie fern das richtig ist?! ;)
 
T

TheDon0Ne

WHAT?

AW: Mutter Div erstellen

kannst du mir das gesamte projekt mal hochladen also die gesliceten bilder brauch ich mal
ohne was zu sehen macht sich immer schlecht es zu testen und zu probieren



*edit:
kannst da auch nen roten balken oder so durch machen wenn du angst hast ich klau dein projekt
 
Zuletzt bearbeitet:
V

VatoLoco

Guest

AW: Mutter Div erstellen

hi ja gerne ich schicke dir einen Link per PM wenn es dir recht ist?
 
T

TheDon0Ne

WHAT?

AW: Mutter Div erstellen

da is leider nix cih glaub der server hat noch nciht aktualisiert soweit ich weiß laufen die crons alle stunde durch müssen wir uns wohl ein klein wenig gedulden oder schickst mir den link per mail
 
T

TheDon0Ne

WHAT?

AW: Mutter Div erstellen

so du hast post ^^

lange schweißtreibende arbeit

muss ich jetzt erstmal eine rauchen gehen ;)


achso rechnung kommt per post :lol::lol::lol:


achso und die formatierung des textes hab ich jetzt auch mal außer acht gelassen weil ich denke das du das nach deinen wünschen alleine hinbekommst
 
Zuletzt bearbeitet:
V

VatoLoco

Guest

AW: Mutter Div erstellen

du hast auch post!

danke dir, jetzt schaue ich mir den code mal in ruhe an, und werde daraus lernen, danke! ;)
 
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: 90 (Mitglieder: 1, Gäste: 89)
Robots: 156

Statistik des Forums

Themen
118.642
Beiträge
1.538.514
Mitglieder
67.559
Neuestes Mitglied
Andi Schäfer
Oben