✔ Photoshop-Design in CSS einbinden

L

Lesterdor

Erfahrenes Mitglied
Guten Tag liebe Community,

wie der Threadtitel schon erahnen lässt, habe ich in Photoshop ein Website-Design erstellt. Mithilfe des Slicer-Tools habe ich das Design "in mehrere" Bilder zerteilt. Am Ende habe ich es als *.html-Datei gespeichert. Photoshop legt automatisch eine Html-Datei an, wo der HTML-Code so geschrieben ist, dass das Design korrekt aussieht.

Wenn ich allerdings dem Standard folgen möchte und Design von Inhalt strickt trennen will, sollte ich die Bildelemente ja in eine CSS-Datei auslagern.

Meine Frage ist jetzt, wie ich dies bewerkstellige? Ich habe leider wenig CSS-Erfahrung. Muss ich jetzt über DIV-Container das Layout quasi nachbauen und die geschnittenen Grafiken als Ganzes zusammensetzen?

Ich danke euch recht herzlich im Voraus und hoffe, dass wir das in den Griff bekommen
 
Hallo Maik,

Danke für deine schnelle Antwort.

Ich bin derzeit dabei mein Design zu integrieren, was auch eigentlich gut funktioniert ;)

Jetzt bin ich aber an einem Punkt, wo ich leider nicht weiter weiß:

Ich habe einen DIV-Container erstellt:
Code: 
#Inhalt {
background-image: url(hintergrund.jpg);
border: 1px solid #000000;
height: 800px;
width: 1280px;
}
...
und eine Formatierung für den Text, den ich dort hineinschreibe:
.index {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22pt;
font-weight: normal;
color: #000000;	
}

In meiner HTML-Datei steht folgendes:

Code: 
<div id="Inhalt">
  <p align="left" class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>

So weit klappt auch alles. Ich möchte aber gerne, dass der Text zentriert zur Größe liegt. Wenn ich ihn normal zentriere, bezieht sich das ja nur auf die Zeile, aber nicht im Verhältnis zur DIV-Box (Container).

Des Weiteren möchte ich mir erkunden, ob man Links in die Html-Datei schreibt (a href=".....") oder ob dies Bestandteil der CSS-Datei ist?

Vielen lieben Dank im Voraus ;)
 
Guten Abend Maik,

wie immer vielen Dank für deine schnelle Antwort.

Leider bekomme ich es nicht hin. Egal wie ich es schreibe, ob:
HTML-Code:
Code: 
<div id="Inhalt">
  <p #Inhalt text-align:center class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>

CSS-Code:
Code: 
#Inhalt {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	height: 800px;
	width: 1280px;
}

Oder
HTML-Code:
Code: 
<div id="Inhalt">
  <p align="left" class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>

CSS-Code:
Code: 
#Inhalt {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	height: 800px;
	width: 1280px;
text-align:center;
}

Ich bekomme nicht das gewünschte Ergebnis. Im ersten Fall zentriert er die Zeile, es liegt aber nicht in der Mitte des DIV-Containers.

Ich bin ziemlicher Anfänger in CSS, vielleicht habe ich deinen Tipp auch nur falsch verstanden oder umgesetzt, daher bitte ich um Nachsicht ;)

wie immer Danke im Vorfeld
 
So funktioniert es bei mir einwandfrei:
HTML: 
<div id="Inhalt">
  <p class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>
CSS: 
#Inhalt {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	height: 800px;
	width: 1280px;
    text-align:center;
}
oder auch so:
HTML: 
<div id="Inhalt">
  <p class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>
CSS: 
.index {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22pt;
font-weight: normal;
color: #000000;
text-align:center;
}

mfg Maik
 
Soll der Text in der weißen Fläche erscheinen? Also vertikal zentriert werden?

Quellcode, oder bei Seiten mit grafischen Elementen (Hintergründen) der Link, ist immer von Vorteil ;)

mfg Maik
 
So,

endlich ist das richtige Wort gefallen - Vertikale Zentrierung. Sorry, dass ich mich so unpräzise ausgedrückt habe, mir fehlt noch der HTML/CSS-Jargon ;) . Genau, der Text "herzlich willkommen auf...." sollte in der Mitte des Div-Containers auftauchen (also etwa der weißen Box), da die Begrüßung sonst zu klein in dem Container, der ja 800 Pixel hoch ist, wirkt...

Mein HTML-Code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E-Commerce</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body style="style" background="hintergrund.jpg">
<div id="Header"><a href="E-Commerce by Dave.html"><img src="header.jpg" alt="Zurück zur Startseite" width="1280" height="255" border="0" /></a></div>
<div id="Navigation">
  <div><a href="http://www.google.de/"><img src="e-commerce.jpg" width="252" height="60" border="0" /></a><a href="http://www.google.de/"><img src="beteiligte.jpg" width="253" height="60" border="0" /></a><a href="http://www.google.de/"><img src="beziehungen.jpg" width="253" height="60" border="0" /></a><a href="http://www.google.de/"><img src="funktionen.jpg" width="253" height="60" border="0" /></a><a href="http://www.google.de/"><img src="geschäftsmodelle.jpg" width="252" height="60" border="0" /></a>
  </div>
</div>
   <div id="Kontrolle">
     Sie befinden sich hier:
     Startseite -&gt; Platzhalter
   </div>
<div id="Inhalt">
  <p class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
</div>
<div id="Footer">
  <p>Die Webseite ist für Mozilla Firefox bei einer Auflösung von 1280x1024 Pixel optimiert</p>
</div>
<p>&nbsp;</p>
</body>
</html>

CSS-Code:
Code: 
#Header {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	height: 255px;
	width: 1280px;
}
#Navigation {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	width: 1280px;
	height: 60px;
	text-align:center;
}
#Inhalt {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	height: 800px;
	width: 1280px;
	text-align:center;
}
#Footer {
	background-image: url(hintergrund.jpg);
	border: 1px solid #000000;
	width: 1280px;
}
#Kontrolle {
	border: 1px solid #000000;
	width: 1280px;
	background-image: url(hintergrund.jpg);
}
.index {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22pt;
	font-weight: normal;
	color: #000000;
	text-align:center;	
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: normal;
	color: #000000;
	text-align:center;
}



.Body {
	background-image: url(hintergrund.jpg);
}

Dabei fällt mir auf: Ist mein ".Body", in der CSS-Datei, überhaupt nötig, um ein Hintergrundbild einzufügen, was die ganze Seite umfasst?
 
http://www.pmob.co.uk/temp/vertical-align9.htm demonstriert die Variante, den Text am unteren Rand der Box auszurichten (vertical-align:bottom).

Und hiermit wird er vertikal zentriert:
HTML: 
<!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>Vertical-align an element of unknown height</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
.outer {
        position:relative;
        display:table;
        height: 200px;
        width: 200px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #CCCCCC;
        background:red;
        float:left
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
}
p{background:blue;border:1px solid #000}
</style>
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
  <div class="inner">
    <p>This is some random text : </p>
  </div>
</div>
</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück