[Thema] PHP in DIV oder Table

Dieses Thema im Forum "Webdesign" wurde erstellt von bigm88, 4. Oktober 2008 .

Schlagworte:
  1. 4. Oktober 2008
    PHP in DIV oder Table

    hallo,
    ich programmiere erst seit 1 Monat in PHP. Nun stelle ich mir die frage, in was ich mein Template erstellen soll. Soll ich lieber DIV Elemente benutzen oder Table Elemente. Was könnt ihr mir empfehlen oder beides? Habt ihr für mich ein paar simple beispiele? ?(
    Vielen Dank im Vorraus
    bigm88
     
    + Multi-Zitat Zitieren
  3. 4. Oktober 2008
    AW: PHP in DIV oder Table

    http://www.hotdesign.com/seybold/
    Das einfach durchlesen.
     
    + Multi-Zitat Zitieren
  4. 4. Oktober 2008
    AW: PHP in DIV oder Table

    hmm, danke, guter beitrag aber geholfen hat mir das immer noch nicht.
     
    + Multi-Zitat Zitieren
  5. 4. Oktober 2008
    AW: PHP in DIV oder Table

    Arbeite mit Containern ( Div´s ). Table sind nur da um anzeigen wie zB. nen Stundenplan darzustellen oder öffnungszeitem etc pp.

    Wenn du schon nen Monat im PHP rumwerkels, dann weiste ja sicher wie das geht.

    gruß
     
    + Multi-Zitat Zitieren
  6. 4. Oktober 2008
    AW: PHP in DIV oder Table

    ok danke. das werde ich machen. erst divs und dan in den div meine table.
    was meint ihr dazu:
    Code:
    <div id="wrap">
 <table width="100%" height="446" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td height="81" colspan="2" valign="top" class="rahmenUnten"><p><img src="images/logo.png" width="350" height="80" border="0" /></p> </td>
 <td width="21%" valign="bottom" class="rahmenUnten"><form id="form1" name="form1" method="post" action="">
 <label>
 <div align="right">
 <input type="text" name="suche" id="suche" />
 </div>
 </label>
 </form> </td>
 </tr>
 <tr>
 <td width="26%" height="16">&nbsp;</td>
 <td width="53%">&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott" ><a href="#"><img src="images/house.png" width="16" height="16" />Home</a></td>
 <td rowspan="7" valign="top" class="paddinleft">Text Text Text Text Text Text Text Text Text Text Text Text<br />
Text Text Text Text Text Text Text Text Text Text Text Text
<br />
Text Text Text 
Text Text Text 
Text Text Text
Text Text Text<br />
Text Text Text
Text Text Text.
<br />
 <br />
 <p>Text Text Text Text Text Text Text Text Text Text Text Text<br />
Text Text Text Text Text Text Text Text Text Text Text Text <br />
Text Text Text 
Text Text Text 
Text Text Text
Text Text Text<br />
Text Text Text
Text Text Text.</p>
 <p>&nbsp; </p>
 <p>Text Text Text Text Text Text Text Text Text Text Text Text<br />
Text Text Text Text Text Text Text Text Text Text Text Text <br />
Text Text Text 
Text Text Text 
Text Text Text
Text Text Text<br />
Text Text Text
Text Text Text.</p></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott"><a href="#"><img src="images/folder.png" width="16" height="16" />News</a></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott"><a href="#"><img src="images/folder.png" alt="" width="16" height="16" />Über uns</a></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott"><a href="#"><img src="images/folder.png" alt="" width="16" height="16" />Produkte</a></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott"><a href="#"><img src="images/folder.png" alt="" width="16" height="16" />Partner</a></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td height="22" class="rahmenUntenDott"><a href="#"><img src="images/email.png" width="16" height="16" />Kontakt</a></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 </table>
</div>
    Und das ist meine css:
    Code:
    *{
 margin:0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
body {
 margin: auto;
 background-color: #fefefe;
}
#wrap {
 height:450px;
 width: 680px;
 margin-top: 10%;
 margin-right: auto;
 margin-bottom: 0%;
 margin-left: auto;
}

.tabele a {
 font-weight: bold;
 color: #333333;
 text-decoration: none;
 margin-left: 7px;
}

.rahmenUnten {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #D2D2D2;
}
.rahmenUntenDott {
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #D2D2D2;
}
#wrap .rahmenUntenDott a {
 font-weight: bold;
 color: #191919;
 text-decoration: none;
 display: block;
 height: 19px;
 padding-top: 3px;
}
#wrap .rahmenUntenDott img {
 border: none;
 margin-right: 7px;
 vertical-align: text-bottom;
}
#wrap .rahmenUntenDott a:hover {
 background-color: #ededed;
 color: #BF530B;
}
input {
 border: 1px solid #D2D2D2;
 background-color: #fefefe;
 margin-bottom: 3px;
 height: 20px;
 padding-top: 2px;
 padding-left: 2px;
 background-image: url(../images/magnifier.png);
 background-repeat: no-repeat;
 background-position: 120px center;
 width: 140px;
 background-attachment: scroll;
}
.paddinleft {
 padding-left: 10px;

}
     
    + Multi-Zitat Zitieren
  7. 4. Oktober 2008
    AW: PHP in DIV oder Table

    toll, du hast einen div als wrapper benutzt und dann doch wieder ein tabellen-layout
    du machst einen container für den header, einen fürs menü, einen für den inhalt und einen für deine such-leiste
    die setzt du dann mit float richtig hin und alles ist grün
     
    + Multi-Zitat Zitieren
  8. 4. Oktober 2008
    AW: PHP in DIV oder Table

    gehört das nicht in webtechnik?

    Schreib mal dein design um, ohne dass eine einzige tabelle vorkommt. Dann ist es eine css-seite.
    Keine son pseudo schmarn^^

    Tabellen kannst du, wie klaxx schon gesagt hat, verwenden, wenn du nen stundenplan machen willst, aber das hat ja nix mim layout zum tun!
     
    + Multi-Zitat Zitieren
  9. 4. Oktober 2008
    AW: PHP in DIV oder Table

    http://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/


    guck dir das ding einfach mal an, brauchst nich auf die photoshop anwendung achten, sondern nur, wie das ganze teil gecoded wurde. im endeffekt haste drei Bereiche:

    Header ( Logo, Schriftzug etc bla, vllt auch wie in dem Beispiel oder vielen Portfolio´s die Links )
    featured Content ( weiß ich jetz nich xD )
    Content ( dein Inhalt der später mit PHP reingeschrieben wird )
    Footer (ganzes zeugs ala, impressum, weitere linkis, copyrights, bla)

    greetz

    Sieht dann im Endeffekt so aus
    http://nettuts.s3.amazonaws.com/017_Creatif/Images/7.jpg
     
    + Multi-Zitat Zitieren
  10. 4. Oktober 2008
    AW: PHP in DIV oder Table

    danke, ich werde es mal probieren und poste es mal nacher rein :klatsch:
     
    + Multi-Zitat Zitieren
  11. 4. Oktober 2008
    AW: PHP in DIV oder Table

    so schaut mal , was meint ihr?

    Code:
    <div id="wrap">
<div id="header">
<div id="logo"><img src="images/logo.png" width="350" height="80" /></div>
<div id="serach">
 <form id="suche" name="formSuche" method="post" action="">
 <label>
 <input type="text" name="suche2" id="suche2" />
 </label>
 </form>
 </div>
</div>
<div id="content">
<div id="leftSiedbar">
 <ul>
 <li><a href="#"><img src="images/house.png" width="16" height="16" />Home</a></li>
 <li><a href="#"><img src="images/folder.png" width="16" height="16" />News</a> </li>
 <li><a href="#"><img src="images/folder.png" alt="" width="16" height="16" />Produkte</a></li>
 <li><a href="#"><img src="images/email.png" width="16" height="16" />Kontakt</a></li>
 </ul>
 </div>
<div id="mainContent">
 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
 <p>&nbsp;</p>
 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
 <p>&nbsp;</p>
 <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
</div>
</div>
<div id="space"></div>
</div>
    und die css datei

    Code:
    *{
 margin:0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
body {
 margin: auto;
 background-color: #fefefe;
}
input {
 border: 1px solid #D2D2D2;
 background-color: #fefefe;
 margin-bottom: 3px;
 height: 20px;
 padding-top: 2px;
 padding-left: 2px;
 background-image: url(../images/magnifier.png);
 background-repeat: no-repeat;
 background-position: 120px center;
 width: 140px;
 background-attachment: scroll;
 float: right;
}


#wrap {
 height:450px;
 width: 680px;
 margin-top: 10%;
 margin-right: auto;
 margin-bottom: 0%;
 margin-left: auto;
}

#header {
 width: 680px;
 height: 90px;
 margin-bottom: 23px;
 border-bottom: 1px solid #D2D2D2;
}

#logo {
 width: 350px;
 float: left;
 height: 80px;
}
#serach {
 width: 300px;
 float: right;
 margin-top: 56px;
}
#leftSiedbar ul {
 list-style: none;

}
#leftSiedbar li {
 display: block;
 border-bottom: 1px dotted #D2D2D2;
 line-height: 20px;
 width: 140px;

}
#leftSiedbar li:hover {
 background-color: #ededed;
}
#leftSiedbar img {
 border: none;
 margin-right: 7px;
 vertical-align: bottom;
}



#leftSiedbar a {
 color: #333333;
 font-weight: bold;
 text-decoration: none;
}



#content {
 width: 680px;
 height: auto;
}
#leftSiedbar {
 width: 140px;
 height: 100px;
 float: left;
}
#mainContent {
 width: 530px;
 float: left;
 margin-left: 10px;
}




#space {
 clear: both;
}
     
    + Multi-Zitat Zitieren
  12. 7. Oktober 2008
    AW: PHP in DIV oder Table

    sieht doch schon viel sauberer aus.

    bei dem Menü kannst du das hier <img src="images/house.png" width="16" height="16"> noch in die css einbauen und als background deklarieren, genauso wie das logo. das logo machst komplett als css-background

    background-image: url(../images/logo.png);
     
    + Multi-Zitat Zitieren
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten