sliced grafiken richtig positionierenForum » Webzone » (X)HTML & CSS » sliced grafiken richtig positionieren
Neues Thema-
25.08.2010 um 00:08 Uhr
Hallo ich habe das Tutorial Webseiten Layout mit Photoshop erstellen - Tutorial versucht mit der weiterleitung. Allerdings sieht die Seite etwas komisch aus. Hier einmal das Bild.
Dazu den style.css Code
/* Design Name: Tutorial-Site Author: Alice Author URI: http://design-grafixx.com */ body { background: #ECEBD9 url('BILDER/Hintergrund_links.jpg') repeat-x; /* Hintergrundbild das senkrecht wiederholt wird */ color: #686864; /* Schriftfarbe */ font: 0.9em 'Trebuchet MS', Geneva, Arial, Helvetica, sans-serif; /* Schriftgroesse und Schriftart */ margin: 0px; /* Aussenabstand */ } p, pre{ padding: 5px 10px; /* Innenabstand */ margin: 0px; /* Aussenabstand */ color: #2E2E3A; /* Schirftfarbe */ } ul { list-style: square; /* Liststyle => Quadrat */ } .left { text-align: left; /* Textausrichtung */ float: left; /* Element umflieen lassen - links */ padding-left: 5px; /* Innenabstand */ } .right { text-align: right; /* Textausrichtung */ } /* ----------------------------------------- */ #ram { background: url('bilder/Mitte.jpg') repeat-y; /* Hintergrundbild das senkrecht wiederholt wird */ width: 1024px; /* Bereit des Div-Elements */ margin: 0px auto; /* Aussenabstand - durch auto = mittige Ausrichtung */ } #header { background: url('bilder/Header.jpg') repeat-x; /* Hintergrundbild das senkrecht wiederholt wird */ width: 744px; /* Bereit des Div-Elements */ height: 137px; /* Hoehe des Div-Elements */ margin: 0px 344.5px 0px 344.5px; /* Aussenabstand */ padding: 0px; /* Innenabstand */ } #content { width: 744px; /* Bereit des Div-Elements */ margin: 0px 344.5px 0px 344.5px; /* Aussenabstand */ padding: 0px 0px 0px 0px; /* Innenabstand */ float: left; /* Element umflieen lassen - links */ } #navi{ width: 140px; /* Bereit des Div-Elements */ margin: 25px 879px 0px 5px; /* Aussenabstand */ padding: 0px 0px 0px 0px; /* Innenabstand */ } * html #navi{ /* Angabe nur fuer den IE */ margin: 0px 0px 0px 0px; } #navi ul{ list-style: square inside; /* Liststyle => Quadrat */ margin: 0px auto; /* Aussenabstand */ padding: 0px; /* Innenabstand */ } #footer { background: #ECEBD9 url('bilder/Mitte_unten.jpg') top no-repeat; /* Hintergrundbild das nicht wiederholt wird */ clear: both; /* hebt float: left; wieder auf*/ width: 716px; /* Bereit des Div-Elements */ height: 578px; /* Hoehe des Div-Elements */ margin: 0px auto; /* Aussenabstand */ padding: 25px 0px 0px 0px; /* Innenabstand */ line-height: 36px; /* Zeilenhoehe*/ text-align: center; /* Textausrichtung */ color: #969789; /* Textfarbe */ } Links --------------------------------------------------------------------------- */ A { /* generelle Formatierung eines Links */ color: #A2B710; /* Textfarbe */ text-decoration: none; /* Definiert das der Link nicht unterstrichen ist */ } A:visited { /* Besuchter Link */ color: #494833; /* Textfarbe */ text-decoration: underline; /* Definiert dass der Link unterstrichen ist */ } A:hover, A:active { /* Aktiver Link & wenn man mit der Maus drueber faehrt */ color: #686864; /* Textfarbe */ text-decoration: underline; /* Definiert dass der Link unterstrichen ist */ } headlines --------------------------------------------------------------------------- */ h1{ color: #A2B710; /* Textfarbe */ text-align: left; /* Textausrichtung */ padding: 0 5px 5px 5px; /* Innenabstand */ font: normal 1.6em verdana, tahoma, sans-serif; /* Schriftgroesse und Schriftart */ } h2{ color: #65666B; /* Textfarbe */ text-align: left; /* Textausrichtung */ padding: 0 5px 0px 5px; /* Innenabstand */ font-size: 1.4em; /* Schriftgroesse */ } h3{ color: #BA7EBA; /* Textfarbe */ text-align: left; /* Textausrichtung */ padding: 0 5px 5px 5px; /* Innenabstand */ font-size: 1.3em; /* Schriftgroesse */
sowie den html code
<html> <head> <title>Ingrid Otling Renaud Hebamme aus leidenschaft</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 bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="mitte"> <div id="header"></div> <div id="content"></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">Projekte</a></li> <li><a href="link" title="Link Titel">Referenzen</a></li> <li><a href="link" title="Link Titel">Kontakt</a></li> <li><a href="link" title="Link Titel">Impressum</a></li> </ul> </div> <div id="footer"></div> </div> </body> </html>
ich habe da schon ein bisschen dran herum gedoktort allerdings versteh ich nicht auf die verschiedenen gesliceden Bilder sich nicht vernnftig aneinanderfgen.
Wenn Ihr einmal drber schauen knntet wre das echt nett.
lg Jeronimonino
Antworten 
Zitat 
[ 1 ]
Seite 1 von 1
