Loading...   Upload Image

sliced grafiken richtig positionierenForum » Webzone » (X)HTML & CSS » sliced grafiken richtig positionieren

Neues Thema verfassen Neues Thema

  • JeronimoninoUser ist offline
    Newbie



    Registriert: 24.08.2010
    Beitraege: 4

    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 umfließen 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 umfließen 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 vernünftig aneinanderfügen.
    Wenn Ihr einmal drüber schauen könntet wäre das echt nett.

    lg Jeronimonino



  • siriussmartyUser ist offline
    Newbie



    Registriert: 09.06.2010
    Beitraege: 12

    25.08.2010 um 08:00 Uhr

    Du Arbeitest wie folgt.

    Header, danach der Content und dann die Navigation.
    Arbeite mal wie folgt

    Header, Links Mitte Rechts.

    Du Arbeitest von Oben nach Unten und von Rechts nach Links, obwohl man von Links nach rechts baut.
    Sprich Header , Linke Navigation , Mitte, Rechte Navigation footer.

    Daher dein Div Navigation und Content verdrehen.

    01	<html>
    02	<head>
    03	<title>Ingrid Otling Renaud Hebamme aus leidenschaft</title>
    04	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    05	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    06	</head>
    07	<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    08	<div id="mitte">
    09	    <div id="header"></div>
    11	    <div id="navi">
    12	        <ul>
    13	            <li><a href="link" title="Link Titel">Home</a></li>
    14	            <li><a href="link" title="Link Titel">About me</a></li>
    15	            <li><a href="link" title="Link Titel">Projekte</a></li>
    16	            <li><a href="link" title="Link Titel">Referenzen</a></li>
    17	            <li><a href="link" title="Link Titel">Kontakt</a></li>
    18	            <li><a href="link" title="Link Titel">Impressum</a></li>
    19	        </ul>
    20	    </div>
    10	    <div id="content"></div>
    21	    <div id="footer"></div>
    22	</div>
    23	</body>
    24	</html>



  • JeronimoninoUser ist offline
    Newbie



    Registriert: 24.08.2010
    Beitraege: 4

    25.08.2010 um 08:30 Uhr

    Ich glaube mein Problem ist das ich es mit dem Innen- und Aussenabstand nicht wirklich verstanden habe. Gibt es dazu evtl auch ein tut ?



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    25.08.2010 um 12:06 Uhr

    Der Unterschied zwischen margin 6 padding? Vielleicht hilft dir ja das weiter: de.selfhtml.org/css/formate/box_modell.htm#w3c




[ 1 ] Seite 1 von 1


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