Loading...   Upload Image

Layout in CSS/HTML einarbeiten *Hilfe*Forum » Tutorials » Help » Layout in CSS/HTML einarbeiten *Hilfe*

Neues Thema verfassen Neues Thema

  • PirateUser ist offline
    Newbie


    Pirate

    Registriert: 08.04.2012
    Beitraege: 3

    08.04.2012 um 14:09 Uhr

    Hallo :-)
    Ich habe die Tutorials
    alice-grafixx.de/Photoshop-Tutorial/Webseiten-Layout-mit-Photoshop-erstellen-96
    alice-grafixx.de/XHTML-CSS-Tutorial/Webseiten-Layout-erstellen---das-Coding-97
    angeschaut/"gemacht".
    Der Photoshop Teil klappte prima nur bein Coden habe ich noch ein Problem.
    Ich habe es soweit gebracht das der Backround sowie "Header" und "Mitte" angezeigt werden, nur der "Footer" will nicht so wie ich will (glaube ich jedenfalls ;-D)!
    Kann mir da jemand helfen?
    Hier mal der HTML Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    	<title>Unbenannt-1</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    	</head>
    	<body>
    	<div id="ram">
    	<div id="header"></div>
    	 
    	 
    	<div id="navi">
    	 
    	<ul>
    	<li><a href="link" title="Link Titel">Home</a></li>
    	<li><a href="link" title="Link Titel">About me</a></li>
    	<li><a href="link" title="Link Titel">Photographie</a></li>
    	<li><a href="link" title="Link Titel">Digital Art</a></li>
    	</ul>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dein Text
    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sd
    
    
    	</div>
    	<div id="content">
    	Dein Text!
    </div>
    </div>
    <div id="footer"></div>
    	 
    </body>
    
    </html>


    Und noch der CSS Code

    body{
    background: #616161 url('backround.jpg') repeat-x; 
    color: #686864;
    font: 0.9em 'Calibri', Geneva, Arial, Helvetica, sans-serif;
    margin: 0px;
    }
        
    p, pre{
    padding: 5px 10px;  
    margin: 0px;        
    color: #2E2E3A;     
    }
    
    #ram { 
    background: url('2.jpg') repeat-y;       
    width: 716px;                                       
    margin: 0px auto;                                   
    }
    
    #header {
    background: url('3.jpg') repeat-y;  
    width: 716px;                                   
    height: 142px;                                  
    }
    
    
    #content {     
    width: 490px;                                       
    padding: 10px 15px 15px 35px;                       
    float: left; 
    
    #navi{
    width: 140px;                                       
    margin: 0px 0px 0px 565px;                          
    padding: 10px 0px 0px 0px;                          
    }
    
    * html #navi{                                       
    margin: 0px 0px 0px 555px;                          
    }
    	 
    #navi ul{
    list-style: square inside;                      
    margin: 0px auto;                               
    padding: 0px;                                   
    } 
    
    #footer {
    background: #ECEBD9 url('footer.jpg') top no-repeat; 
    clear: left;                                        
    width: 716px;                                       
    height: 40px;                                       
    margin: 0px auto;                                
    padding: 25px 0px 0px;                             
    line-height: 36px;                                  
    text-align: center;                                
    1color: #969789;                                     
    }  
    
    A { 
    color: #A2B710;                                     
    text-decoration: none;                              
    }
    	 
    A:visited { 
    color: #494833;                                     
    text-decoration: underline;                         
    }
    	 
    A:hover, A:active { 
    color: #686864;                                     
    text-decoration: underline;                         
    }       
    
    h1{
    color: #A2B710;                                     
    text-align: left;                                   
    padding: 0 5px 5px 5px;                             
    font: normal 1.6em verdana, tahoma, sans-serif;     
    	 
    	 
    h2{
    color: #65666B;                                    
    text-align: left;                                   
    padding: 0 5px 0px 5px;                             
    font-size: 1.4em;                                   
    }


    Die Website wie sie mom. ausschaut:




    Ich habe mich beim CSS Code sehr genau an die Vorgabe von Alice gehalten da ich erstmal etwas funktionierdes haben wollte, natuerlich wuerde ich gerne noch Sachen umaendern.
    Beim HTML Code hat mir der Beitrag von "Katjana" in einem Thread geholfen...danke dafuer :-)

    Freue mich auf Hilfe,

    LG Pirate



    Falls ich das mal vergesse:

    Liebe Grüße Pirate ;-)
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    08.04.2012 um 16:25 Uhr

    Hallo Pirate,

    schliess mal - wie im Tutorial auch - das Div mit der Bezeichnung ram erst nach dem Div footer und schau mal ob dieser dann so will wie du moechtest...

    In der CSS Angabe fuer den Footer hast sich ein kleiner Fehler eingeschlichen: 1color: #969789;

    Sollte das nicht des Raetsels Loesung sein, lad die Dateien bitte mal auf einen Webspace, damit man sich das live und in Farbe anschauen kann, dann ist es deutlich leichter dir zu helfen ;)

    Liebe Gruesse
    Alice



    ... { signatur } ...
  • PirateUser ist offline
    Newbie


    Pirate

    Registriert: 08.04.2012
    Beitraege: 3

    08.04.2012 um 23:15 Uhr

    Hallo,
    danke an Alice für die schnelle Hilfe! Leider hat es nicht funktioniert wobei ich nicht weiß ob ich den Teil mit den Div Containern richtig gemacht habe. Allerdings habe ich nochmal die Vorlage von dem Tutorial angeschaut und alles angeglichen. Trotzdem bleibt es unverändert.
    Ich habe es jetzt mal auf meine Website hochgeladen:
    Meine Website

    Ich hoffe ihr/du könnt/kannst nun noch genauer einblicken :-)

    LG Pirate



    Falls ich das mal vergesse:

    Liebe Grüße Pirate ;-)
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    10.04.2012 um 20:54 Uhr

    Hallo Pirate,

    schau dir mal die CSS Angaben von #content an, da fehlt die schliessende Klammer },
    darum wird alles was danach kommt ignoriert ...

    Liebe Gruesse
    Alice



    ... { signatur } ...
  • PirateUser ist offline
    Newbie


    Pirate

    Registriert: 08.04.2012
    Beitraege: 3

    11.04.2012 um 17:35 Uhr

    Hi Alice!

    Vielen, vielen Dank, genau das war's!

    Muss wohl noch genauer schauen...!
    Dann werd ich jetzt mal alles ausarbeiten!

    LG Pirate



    Falls ich das mal vergesse:

    Liebe Grüße Pirate ;-)

[ 1 ] Seite 1 von 1


Affiliates:   The Seduction  •   Pat DG  •   Blue-Graphics  •   Colorful Gfx  •   Chibi Graphics  •   Design Grafixx  •   Gallery Yuri  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider