Mutter Div erstellen

cebito · 26.06.2009

AW: Mutter Div erstellen

VatoLoco schrieb:
du hast auch post!

danke dir, jetzt schaue ich mir den code mal in ruhe an, und werde daraus lernen, danke!

Das interessiert mich aber auch. Mal schaun, ob die slices optimiert wurden - da hätt man einige (und somit auch divs) einsparen können. Kann ja nicht verkehrt sein, wenn noch ein fünftes Auge mit drüber schaut...

VatoLoco · 26.06.2009

AW: Mutter Div erstellen

soll ich dir das schicken? kannst mir ja per PM deine addy geben!

TheDon0Ne · 26.06.2009

AW: Mutter Div erstellen

ah cebito da ist wieder einer neugierig ^^

ja hab die slices ein wenig optimiert von einer größe ca 330 kb auf 70 kb

ohne qualitätsverlusst wollte ihm aber nicht alles auf dem tablett servieren

hier der code musste leider fast alle divs einsparen ^^
aber dafür ist es jetzt bis ins unendliche stretchbar :lol::lol::lol:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="styles.css" rel="stylesheet" type="text/css" /></head>

<body>
<table align="center" width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table width="780" height="71" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="head">&nbsp;</td>
        </tr>
        <tr>
          <td class="head2">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table width="780" border="0" cellspacing="0" cellpadding="0">
           <tr>
          <td class="borderleft">&nbsp;</td>
          <td>
            <table width="638" border="0" cellspacing="0" cellpadding="0">
                <tr>
                <td>
                  <table width="638" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                      <td class="pic"><img src="Bilder/index_04.gif" alt="Bild" width="225" height="311" class="pic" /></td>
                      <td class="pictext"> Text Text Text Text Text</td>
                      </tr>
                  </table>
                </td>
                </tr>
              <tr>
                <td class="lineh">&nbsp;</td>
              </tr>
              <tr>
                <td>
                  <table width="638" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                          <table width="638" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td class="best">&nbsp;</td>
                            <td class="bordermid">&nbsp;</td>
                            <td class="gall">&nbsp;</td>
                          </tr>
                          <tr>
                            <td class="borderleft2"> Text Text Text Text Text</td>
                            <td class="bordermid">&nbsp;</td>
                            <td class="borderright2"> Text Text Text Text Text Text Text</td>
                          </tr>
                          <tr>
                            <td class="bestend">&nbsp;</td>
                            <td class="bordermid">&nbsp;</td>
                            <td class="gallend">&nbsp;</td>
                          </tr>
                        </table>
                      </td>
                      </tr>
                  </table>
                </td>
                </tr>
            </table>
          </td>
          <td class="borderright">&nbsp;</td>
          </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="footer">&nbsp;</td>
  </tr>
</table>

</body>
</html>

und css

Code:

@charset "utf-8";

body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}
body {
    background-color: #373839;
}

.head {
    background-image: url(Bilder/index_01.gif);
    width: 100%;
    height: 56px;
}

.head2 {
    background-image: url(Bilder/index_02.gif);
    width: 100%;
    height: 15px;
}
.borderleft {
    background-image: url(Bilder/borderleft.png);
    background-repeat:repeat-y;
    width: 72px;
}
.borderright {
    background-image: url(Bilder/borderright.png);
    background-repeat:repeat-y;
    width: 70px;
}
.pic {
    width: 225px;
    background-color: #b1b1b1;
    vertical-align: top;
}
.pictext {
    width: 413px;
    background-color: #b1b1b1;
    vertical-align: text-top;
}
.space {
    background-color: #b1b1b1;
    height: 14px;
}
.lineh {
    background-image: url(Bilder/index_07.gif);
    width: 638px;
    height: 29px;
}
.best {
    background-image: url(Bilder/index_08.gif);
    height: 29px;
    width: 213px;
}
.borderleft2 {
    background-image: url(Bilder/borderleft2.png);
    background-repeat: repeat-y;
    width: 213px;
    vertical-align: text-top;
}
.bestend {
    background-image: url(Bilder/index_13.gif);
    height: 37px;
}
.bordermid {
    background-image: url(Bilder/bordermid.png);
    background-repeat: repeat-y;
    width: 27px;
}
.gall {
    background-image: url(Bilder/index_10.gif);
    height: 28px;
}
.borderright2 {
    background-image: url(Bilder/borderright2.png);
    background-repeat: repeat-y;
    width: 398px;
    vertical-align: text-top
}
.gallend {
    background-image: url(Bilder/index_15.gif);
    height: 37px;
}
.footer {
    background-image: url(Bilder/footer.gif);
    width: 780px;
    height: 41px;
}

vllt. kannst du mir ja sagen wie das mit den divs besser klappt also ich hatte vieles probiert immer wenn ich der lösung nahe war stand ich vor dem nächsten problem
und dann noch die browserkompatiblität

also hab ichs jetzt so gelöst ist von jedem browser meiner meinung nach interpretierbar

*edit:
wenn man das ganze mit dem text und bild in php formuliert kann man schöne einfache datenbankabfragen des shops (ich nenn das mal so) machen, spart etliche seiten aber ist mehr code arbeit
unten die gallery in javascript und dann ists perfekt, flash würd ich dafür nicht nehmen nicht für ne einfache gallery
über php kann man sich auch schön nen warenkorb basteln denn haste den quatsch nicht mit den einzelnen anfragen

und noch ein edit:
habs mal bei w3 durchn validator gehaun wenn man das height aus der ersten tabelle nimmt ists valid xhtml (warum hab ich das da eig. hingesetzt??? ist da vollkommen unnötig, egal

)
und css is auch valid also viel spass damit

mfg TD0Ne

wer mal was von meiner wenigkeit sehen will kann sich das hier mal zu gemüte führen

da hat ich mich auch ewig mit den divs rumgeärgert und habs dann auch in ner tabelle gemacht weil ich die schnautze voll hatte

cebito · 27.06.2009

AW: Mutter Div erstellen

TheDon0Ne schrieb:
vllt. kannst du mir ja sagen wie das mit den divs besser klappt also ich hatte vieles probiert immer wenn ich der lösung nahe war stand ich vor dem nächsten problem
und dann noch die browserkompatiblität

Uuuuuh, Tabellen. Kannst mir mal das Projekt schicken, incl. PSD?

cebito · 27.06.2009

AW: Mutter Div erstellen

So, hab ein wenig Zeit gefunden mal zu zeigen, dass es auch mit divs wunderbar funktioniert. Hatte das Bild im anderen Thread gefunden und mal selbst gesliced. Die Bilder "wiegen" jetzt zusammen gerade mal noch 42,7kb und das Ergebnis kannst hier sehen:
Menü müsste noch rein, aber darum gings ja hier nicht

TheDon0Ne · 27.06.2009

AW: Mutter Div erstellen

ha sehr gut jetzt erkenn ich auch mein fehler

ich hätte auch neu aufbauen sollen anstatt den vorhanden code umzuwandeln

gute arbeit cebito

VatoLoco · 27.06.2009

AW: Mutter Div erstellen

kann ich das ganze jetzt einfach als PHP datei speichern, oder muss ich da jetzt was bestimtes umkonvertieren? weil ich will ja später noch paar scripte (php) einbinden...

Danke

VatoLoco · 27.06.2009

AW: Mutter Div erstellen

cebito schrieb:
So, hab ein wenig Zeit gefunden mal zu zeigen, dass es auch mit divs wunderbar funktioniert. Hatte das Bild im anderen Thread gefunden und mal selbst gesliced. Die Bilder "wiegen" jetzt zusammen gerade mal noch 42,7kb und das Ergebnis kannst hier sehen:
Menü müsste noch rein, aber darum gings ja hier nicht

kann ich das auch mal als datei so haben bitte?

cebito · 27.06.2009

AW: Mutter Div erstellen

VatoLoco schrieb:
kann ich das ganze jetzt einfach als PHP datei speichern, oder muss ich da jetzt was bestimtes umkonvertieren? weil ich will ja später noch paar scripte (php) einbinden...

Danke

...einfach als .php speichern

Edit:einfach den Quelltext anzeigen und kopieren, dann noch die css -> und die entsprechenden Bilder schick ich dir per Mail, wenn du sie mir gibst...

VatoLoco · 27.06.2009

AW: Mutter Div erstellen

hey danke für die schnelle antwort!

ohne die antworten in dem thread wäre ich immer noch genau an der selben stelle! danke euch vielmals!

wie sieht es es kann ich auch mal deine version haben mit den divs?

VatoLoco · 27.06.2009

AW: Mutter Div erstellen

rapregime@alphabetacrew.de

danke