HTML Layout

Goxide · 02/28/2011, 20:20

Hallo Com,
nachdem ich mir jetzt die Grundkenntnisse von HTML und CSS angeeignet hat wollt ich jetzt mal ans Eingemachte gehen, und mich an einem eigenen Design versuchen.

Jetzt habe ich einige Fragen wie das gehen soll? Einfach ein Design erstellen, als Hintergrund der HTML-Datei setzten und mit div-Tags den Text zu den jeweiligen Stellen setzten? Ist dies so ein guter Stil? Oder gibt es einen besseren?!

Vielleicht kann jemand auch einen Link zu einem Tutorial oder so posten!

Danke!

NotEnoughForYou · 02/28/2011, 21:28

dr.foto tabellen für? ich denke mal zur positinoierung nur das ist schon lange veraltet .... @goxide .... du musst dias design aufteilen ... zb. boxen , content navi etc und dass dann als background den jeweiligen tags zuweisen

NotEnoughForYou · 02/28/2011, 21:32

doch ist es.... tabellen ist der alte stil, css ist der neue

kannste in allen größeren Web-Agenturen erfahren ...

NotEnoughForYou · 02/28/2011, 21:36

ja schon, hier ist es aber auch viel mit datenbanken ... ich denke er sucht erstmal für eine normale homepage und dort ist die positinoierung durch tabellen veraltet ... (zumindest nachdem was ich gelernt habe ( ca vor 1 Jahr, dort vom neusten Stand )

Goxide · 02/28/2011, 21:38

Danke erstmal an euch beide... Kannst du vielleicht mal ein kurzen Codeschnipsel posten?

NotEnoughForYou · 02/28/2011, 21:39

ich fand tabellen immer verwirrend und würde daher goxide raten es durch css zu machen .... finde es auch so einfache rund flexibler ....

Goxide · 02/28/2011, 21:42

NotEnough post mal bitte einen Codeschnipsel, damit ich sehen kann wie dus meinst!

NotEnoughForYou · 02/28/2011, 21:45

bsp. für die css

PHP Code:


			
* {
margin:0;
padding:0;
}
body {
background:#000000;
}
h1 {
text-deocration:underline;
background:#C2C2;
}
#wrapper {
margin:0px auto;
width:1000px;
background:url("zb. ein bild");
}

und dann zb. die index.html

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Test</title>    
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
   <div id="wrapper"><h1>Irgendeine Überschrift </h1>
</div>
  </body>
</html>

nur als bsp ..., gibt von den Farben glaub keinen Sinn ^.^ aber wie gesagt nur ein Beispiel

Goxide · 02/28/2011, 21:53

Hm ok danke erstmal... Werd mal ein wenig rumprobieren.

NotEnoughForYou · 02/28/2011, 21:54

jo wenn du fragen hast kannst du mich gerne pn / oder adden

boxxiebabee · 03/01/2011, 08:08

Quote:

Originally Posted by NotEnoughForYou

bsp. für die css

PHP Code:

* { margin:0; padding:0; } body { background:#000000; } h1 { text-deocration:underline; background:#C2C2; } #wrapper { margin:0px auto; width:1000px; background:url("zb. ein bild"); }

und dann zb. die index.html

PHP Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="wrapper"><h1>Irgendeine Überschrift </h1> </div> </body> </html>

nur als bsp ..., gibt von den Farben glaub keinen Sinn ^.^ aber wie gesagt nur ein Beispiel

Ins Beispiel hättest noch float einbauen können, weil das ziemlich wichtig ist bei divs.

Ansonsten hier 2 bsp. Seiten, Source kannst du einfach über STRG+U anschauen.

(bitte in Firefox anschaun... für andre Browser sind die nicht optimiert da die 2 Seiten nur aus langeweile enstanden sind).

NotEnoughForYou · 03/01/2011, 15:01

float wird normalerweise nur eingesetzt, wenn 2 div´s nebeneinander sein sollen oder ein text ein bild umfließen soll ... da dies nicht der falls ist habe ich es nicht gemacht ... außerdem denke ich nicht, dass er die genaue funktionsweise von float kennt

@Lizzaran zu deinen Beispielen ... bischen viele div´s ^^ arbeite mehr mit nachbar und nachfahrenselektoren so sparst du dir einige