✔ Photoshop-Design in CSS einbinden

Hi,

Sorry, aber die weiße Box, die im Screenshot zu sehen ist, habe ich nicht... Die hat Paint gemacht, als ich den Text eingefügt habe, um zu verdeutlichen, wo das Herzlich Willkommen stehen sollte...

Tut mir Leid, aber ich versteh nicht genau, wie ich meinen Code nun genau ändern soll, Entschuldigung.
 
Zuletzt bearbeitet:
Gut, die weiße Box denk ich mir dann eben weg :-)

Aber es bleibt doch bei der vertikalen Zentrierung?

mfg Maik
 
Hi,

Ja, ich habe ja einen DIV-Container 1280x800 px groß. Und dort soll eine vertikale Zentrierung hinein, sodass es quasi so aussieht:

###########################################
# #
# #
# Herzlich Willkommen auf.... #
# #
# #
# #
#############################################

hoffe, die Skizze stellt mein Anliegen gut dar ;)
 
Tut mir Leid, aber ich versteh nicht genau, wie ich meinen Code nun genau ändern soll, Entschuldigung.

Da steht ja auch was von IF IE, ich benutze Firefox... :confused::confused::confused:
 
Einfach so:
  • HTML:
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" />

<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

</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">
  <div class="outer"><div class="inner">
  <p class="index">Herzlich Willkommen auf meiner Webseite rund um das Thema E-Commerce</p>
  </div></div>
</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: 
#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);
}

.outer {
        position:relative;
        display:table;
        height: 800px;
        width: 1280px;
        vertical-align: middle;
        text-align: center;
        float:left;
}
.inner {
        width:100%;
        display:table-cell;
        vertical-align:middle;
        position:relative;
}

Der "Conditional Comment" (<!--[if IE ]> ... <![endif]-->) dient dem IE als Workaround, da er die Tabelleneigenschaften (table, table-cell) der display-Eigenschaft nicht interpretiert.

mfg Maik
 
So,

Vielen lieben Dank Maik, es funktioniert endlich ;).

Das Problem ist, dass meine Dreamweaver-Testversion es immer noch in einer Zeile zentriert anzeigt, aber sobald ich F12 drücke und somit in die Browser-Ansicht gelange, sieht es wie gewünscht aus.

Keine Ahnung was mit Dreamweaver los ist, aber im Firefox sieht es wie gewünscht aus :).

Ist es eigentlich schlimm, dass ich

Code: 
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

nicht eingebunden habe? Habe es komplett weggelassen und es funktioniert trotzdem wie gewünscht.

Die Site wird eh nicht online gehen, da ich erst einmal üben möchte, somit sitmmt die Unterstellung, dass nur Firefox User (ich) die Site begutachte :p

Lange Rede kurzer Sinn, Danke für alles und Entschuldigung für die Unannehmlichkeiten, die ich dir ggf. bereitet habe!
 
Lesterdor hat gesagt.:
Ist es eigentlich schlimm, dass ich

Code: 
<!--[if IE ]>
<style type="text/css">
.inner {top:50%;left:0;}
.inner p{top:-50%;        position:relative;}
</style>
<![endif]-->

nicht eingebunden habe? Habe es komplett weggelassen und es funktioniert trotzdem wie gewünscht.
Zum Vergrößern anklicken....
Schlimm wird's erst, wenn du so die Seite im IE betrachtest :-)

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

Neue Beiträge

Zurück