Anzeige

Div's zusammenfügen

Div's zusammenfügen | PSD-Tutorials.de

Erstellt von DaFunkY, 03.09.2008.

  1. DaFunkY

    DaFunkY Guest

    Div's zusammenfügen
    Hi,
    bin jetz schon seit Tagen an suchen finde jedoch keine Lösung.Bin jedoch auch noch ein neuling in sachen CSS.

    Also ich habe ein Design per PS erstellt , habe es gesliced und möchte nun die ganzen slices per css zusammenfügen.
    Hiermal eine kleine Skizze wie ich die Seite gesliced habe:
    [​IMG]

    slices an der richtigen Position, ausser den Conten in der mitte der will da nicht in die lücke rein. Der positioniert sich dann unter der page.
    Hiermal mein HTML Code:

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    7. </head>
    8. <div id="hauptfenster">
    9.     <div id="head"></div>
    10.     <div id="balken_links"></div>
    11.     <div id="content_links"></div>
    12.     <div id="Logo"></div>
    13.     <div id="content_rechts"></div>
    14.     <div id="balken_rechts"></div>
    15.     <div id="content_mitte"></div>
    16. </div>
    17. </body>
    18. </html>
    19.  
    Und hier der dazugehörige CSS code:

    Code (Text):
    1.  
    2.  
    3. #head {
    4.     background-image: url(Bilder/head.png);
    5.     background-repeat: no-repeat;
    6.     margin: auto;
    7.     float: left;
    8.     height: 200px;
    9.     width: 800px;
    10.  
    11. #balken_links {
    12.     background-image: url(Bilder/balken_links.png);
    13.     background-repeat: no-repeat;
    14.     margin: auto;
    15.     float: left;
    16.     height: 600px;
    17.     width: 50px;
    18.  
    19. #content_links {
    20.     background-image: url(Bilder/content_links.png);
    21.     background-repeat: no-repeat;
    22.     margin: auto;
    23.     float: left;
    24.     height: 600px;
    25.     width: 150px;
    26.  
    27. #logo {
    28.     background-image: url(Bilder/logo.png);
    29.     background-repeat: no-repeat;
    30.     margin: auto;
    31.     float: left;
    32.     height: 150px;
    33.     width: 400px;
    34.  
    35. #content_rechts {
    36.     background-image: url(Bilder/content_rechts.png);
    37.     background-repeat: no-repeat;
    38.     margin: auto;
    39.     float: left;
    40.     height: 150px;
    41.     width: 600px;
    42.  
    43. #balken_rechts {
    44.     background-image: url(Bilder/balken_rechts.png);
    45.     background-repeat: no-repeat;
    46.     margin: auto;
    47.     float: right;
    48.     height: 600px;
    49.     width: 50px;
    50.  
    51. #content_mitte {
    52.     background-image: url(Bilder/content_mitte.png);
    53.     background-repeat: no-repeat;
    54.     margin: auto;
    55.     float: left;
    56.     height: 450px;
    57.     width: 400px;
    58.  
    Ich hoffe dass ihr mich versteht und wisst was ich möchte. Schon mal besten dank.

    Mit freundlichem Gruß

    Funky
     
    #1      
  2. DaFunkY

    DaFunkY Guest

    Div's zusammenfügen
    AW: Div's zusammenfügen

    wooohoo.... es funktioniert... das ging ja schnell :)

    Besten dank sob35....

    Bis bald
     
    #2      
x
×
×
teststefan