HTML Layout

02/28/2011 20:20 Goxide#1
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!
02/28/2011 21:28 NotEnoughForYou#2
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
02/28/2011 21:32 NotEnoughForYou#3
doch ist es.... tabellen ist der alte stil, css ist der neue ;) kannste in allen größeren Web-Agenturen erfahren ...
02/28/2011 21:36 NotEnoughForYou#4
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 )
02/28/2011 21:38 Goxide#5
Danke erstmal an euch beide... Kannst du vielleicht mal ein kurzen Codeschnipsel posten?
02/28/2011 21:39 NotEnoughForYou#6
ich fand tabellen immer verwirrend und würde daher goxide raten es durch css zu machen .... finde es auch so einfache rund flexibler ....
02/28/2011 21:42 Goxide#7
NotEnough post mal bitte einen Codeschnipsel, damit ich sehen kann wie dus meinst!
02/28/2011 21:45 NotEnoughForYou#8
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
02/28/2011 21:53 Goxide#9
Hm ok danke erstmal... Werd mal ein wenig rumprobieren.
02/28/2011 21:54 NotEnoughForYou#10
jo wenn du fragen hast kannst du mich gerne pn / oder adden
03/01/2011 08:08 boxxiebabee#11
Quote:
Originally Posted by NotEnoughForYou View Post
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.
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
(bitte in Firefox anschaun... für andre Browser sind die nicht optimiert da die 2 Seiten nur aus langeweile enstanden sind).
03/01/2011 15:01 NotEnoughForYou#12
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