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"> </td>
</tr>
<tr>
<td class="head2"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="borderleft"> </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"> </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"> </td>
<td class="bordermid"> </td>
<td class="gall"> </td>
</tr>
<tr>
<td class="borderleft2"> Text Text Text Text Text</td>
<td class="bordermid"> </td>
<td class="borderright2"> Text Text Text Text Text Text Text</td>
</tr>
<tr>
<td class="bestend"> </td>
<td class="bordermid"> </td>
<td class="gallend"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="borderright"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer"> </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
