FAQ |
Kalender |
2006-06-22, 01:40 | #1 | ||
|
|||
Medlem
|
Hej. Jag söker en guide till hur man använder DIV som dom flesta nya sidor använder, har du en bra länk till en bra gude om DIV så ge mig den då gärna.
MVH Roosweb |
||
Svara med citat |
2006-06-22, 02:16 | #2 | ||
|
|||
Nykomling
|
Hej!
Jag har ett par exempel som jag skrivigt till en vänn i England om design med CSS som du kan kolla på. Testa att lägga in koden i ett html dokument och kolla på det och studera källkoden. Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>basicDesignWithCSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { width:510px; } .top{ padding:5px; width:500px; height:20px; background-color:#666666; } .box1Main { background-color:#999999; padding:5px; width:500px; } .boxMainLeft { background-color:#CCCCCC; padding:5px; width:245px; float:left; } .boxMainRight { background-color:#999999; padding:5px; width:245px; float:right; } .boxMainBottom { background-color:#009966; padding:5px; width:500px; } .bottomLeft { background-color:#FF9900; padding:5px; width:160px; float:left; } .bottomMiddle { background-color:#FFCC00; padding:5px; width:160px; float:left; } .bottomRight { background-color:#FFCCCC; padding:5px; width:160px; float:right; } .clearFloat { clear:both; } .myLink a:link { color:#00FF00; text-decoration:none; } .myLink a:visited { color:#00FF00; text-decoration:none; } .myLink a:hover { color:#FF0000; text-decoration:none; } .myLink a:active { color:#00FF00; text-decoration:none; } --> </style> </head> <body> <!-- We start of with a basic 2 part box, with a top and main box --> <!--Top--> <div class="top"> Box 1 </div> <!--Main--> <div class="box1Main"> Main text 1!<br /> Main text 2!<br /> Main text 3!<br /> Main text 4! </div> <br /> <!-- Lets advance and make the same as above but adding left and right into main. --> <!--Top--> <div class="top"> Box 2 </div> <!--Main Left--> <div class="boxMainLeft"> Main text left 1!<br /> Main text left 2!<br /> Main text left 3!<br /> Main text left 4!<br /> </div> <!--Main Right--> <div class="boxMainRight"> Main text right 1!<br /> Main text right 2!<br /> Main text right 3!<br /> Main text right 4!<br /> </div> <div class="clearFloat"></div> <br /> <!-- Lets advance even more adding a 3rd box in our main. --> <!--Top--> <div class="top"> Box 3 </div> <!--Main Left--> <div class="boxMainLeft"> Main text left 1!<br /> Main text left 2!<br /> Main text left 3!<br /> Main text left 4!<br /> </div> <!--Main Right--> <div class="boxMainRight"> Main text right 1!<br /> Main text right 2!<br /> Main text right 3!<br /> Main text right 4!<br /> </div> <!--Main Bottom--> <div class="boxMainBottom"> MAIN! </div> <br /> <!-- Lets advance even more adding a 3rd box in our main. --> <!--Top--> <div class="top"> Box 4 </div> <!--Main Left--> <div class="boxMainLeft"> Main text left 1!<br /> Main text left 2!<br /> Main text left 3!<br /> Main text left 4!<br /> </div> <!--Main Right--> <div class="boxMainRight"> Main text right 1!<br /> Main text right 2!<br /> Main text right 3!<br /> Main text right 4!<br /> </div> <!--Main Bottom--> <div class="boxMainBottom"> MAIN! </div> <!--Bottom Left--> <div class="bottomLeft"> <p class="myLink"><a href="#">Link 1</a></p> </div> <!--Bottom Middle--> <div class="bottomMiddle"> <p class="myLink"><a href="#">Link 2</a></p> </div> <!--Bottom Right--> <div class="bottomRight"> <p class="myLink"><a href="#">Link 3</a></p> </div> <div class="clearFloat"></div> </body> </html> Ha det och lycka till! |
||
Svara med citat |
2006-06-22, 02:19 | #3 | ||
|
|||
Medlem
|
Tack så mycket, ska genast kolla in det hära, kul att börja lära sig göra mer "riktiga" sidor, tack igen och ha det bra!
/Roosweb |
||
Svara med citat |
2006-06-22, 02:31 | #4 | ||
|
|||
Har WN som tidsfördriv
|
|||
Svara med citat |
2006-06-22, 02:58 | #5 | ||
|
|||
Medlem
|
Tack för dom här också
|
||
Svara med citat |
2006-06-22, 07:23 | #6 | ||
|
|||
Mycket flitig postare
|
|||
Svara med citat |
2006-06-26, 15:52 | #7 | |||
|
||||
Nykomling
|
"Börja använda divs!"
http://www.htmlsidan.se/?visa=artiklar&id=20 "Så funkar clear: both;" http://www.ansluten.net/?visa=artikellas&id=13 "Vad man bör tänka på när man webbutvecklar!" http://www.ansluten.net/?visa=artikellas&id=3 "I början av en hemsida" http://www.htmlsidan.se/?visa=artiklar&id=66 Så där, där är ett par stycken läsvärda artiklar. Kolla även in "Design i XHTML med CSS" på http://www.td-webdesign.se/inspiration/?nr=nov05#del7 |
|||
Svara med citat |
Svara |
|
|