Hallo zusammen,
ich probiere gerade eine Seite, welche in Photoshop erstellt wurde, mittels css und html umzusetzen. (Ist erst meine 2.Seite) Nun habe ich das Problem mit der Navi, die nicht zu sehen ist. Nur der hover Effekt erscheint, ist aber angeschnitten.
Ausserdem kann ich den content-container darunter nicht zentrieren.
Kann mir da jemand von euch da weiterhelfen? Wäre echt sehr nett, da ich schon viel probiert habe und nicht weiter komme! :'(
Hier der html code:
und hier die css
Danke schon mal,
L.G. 1moma
ich probiere gerade eine Seite, welche in Photoshop erstellt wurde, mittels css und html umzusetzen. (Ist erst meine 2.Seite) Nun habe ich das Problem mit der Navi, die nicht zu sehen ist. Nur der hover Effekt erscheint, ist aber angeschnitten.
Ausserdem kann ich den content-container darunter nicht zentrieren.
Kann mir da jemand von euch da weiterhelfen? Wäre echt sehr nett, da ich schon viel probiert habe und nicht weiter komme! :'(
Hier der html code:
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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="./mootools.js"></script>
<script type="text/javascript" src="./slideshow.js"></script>
<body>
<div id="header"> </div> <!-- end of header-->
<div align="center"> <!-- DIV-Container zum Zentrieren der Slideshow auf der Seite -->
<div id="main_wrapper">
<div id="slideshow"></div>
<script type="text/javascript">
window.RokSlideshowPath = '';
window.addEvent('load', function(){
var imgs = [];
imgs.push({
file: './images/slide1.jpg',
title: 'Bild1',
desc: 'Hier sehen Sie...',
url: ''
});
imgs.push({
file: './images/slide2.jpg',
title: 'Bild2',
desc: 'Hier sehen Sie...',
url: ''
});
imgs.push({
file: './images/slide3.jpg',
title: 'Bild3',
desc: 'Hier sehen Sie...',
url: ''
});
imgs.push({
file: './images/slide4.jpg',
title: 'Bild4',
desc: 'Hier sehen Sie...',
url: ''
});
var myshow = new Slideshow('slideshow', {
type: 'fade',
showTitleCaption: 1,
captionHeight: 60, <!-- Höhe der teiltransparenten Box für Beschreibung -->
width: 954, <!-- Breite der angezeigten Bilder einstellen -->
height: 271, <!-- Höhe der angezeigten Bilder einstellen -->
pan: 50,
zoom: 50,
loadingDiv: 0,
resize: false,
duration: [2000, 10000], <!-- Einblenddauer und Dauer der angezeigten Bilder in Millisekunden -->
transition: Fx.Transitions.linear,
images: imgs,
path: ''
});
myshow.caps.h2.setStyles({
color: '', <!-- hier Farbe der Überschrift H2 von NOF ändern -->
fontSize: '20px' <!-- hier Schriftgröße der Überschrift H2 von NOF ändern -->
});
myshow.caps.p.setStyles({
color: '#FFFFFF', <!-- hier Farbe des p Tags von NOF ändern -->
fontSize: '12px' <!-- hier Schriftgröße des p Tags von NOF ändern -->
});
});
</script>
</div>
</div>
<div id="navi-container">
<div id="navigation">
<ul>
<li class="index"><a href="index.html">Die Villa</a></li>
<li class="raeume"><a href="raeume.html">Die Räume</a></li>
<li class="ausstattung"><a href="ausstattung.html">Ausstattung</a></li>
<li class="fotogalerie"><a href="fotogalerie.html">Fotogalerie</a></li>
<li class="preise"><a href="preise.html">Preise</a></li>
<li class="buchung"><a href="buchung.html">Buchung</a></li>
<li class="umgebung"><a href="umgebung.html">Umgebung</a></li>
<li class="kontakt"><a href="kontakt.html">Kontakt</a></li>
<li class="impressum"><a href="impressum.html">Impressum</a></li>
</ul> </div> <!--end of navigation-->
</div><!-- end of navi-container-->
<div id="content-container"> <p><br />
<br />
<br />
Hier kommt Text</p>
</div> <!-- end of content-container-->
</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */
* {margin:0;}
html {}
body {background:url(../images/bg-site.jpg);font-size:62.5%; font-family:Arial, Helvetica, sans-serif}
#header {width:954px; height:99px; background:url(../images/bg-header.jpg) no-repeat;margin:0 auto; position:relative;}
#slide-show {width:954px;}
#navi-container {width:954px; height:73px; background:url(../images/bg-header-navi.jpg) no-repeat;margin:0 auto; position:relative;}
#content-container {width:954px; height:595px; background:; margin 0 auto; position:relative;}
#navigation {padding-top:25px;/*text-indent:-1000000px*/}
#navigation ul {list-style-type:none;}
#navigation ul li {float:left;}
#navigation ul li a {heigth:29px; background:url(../images/bg-navigation-neu.jpg) no-repeat center top; display:block}
#navigation .index {width:95px;}
#navigation .raeume {width:87px;}
#navigation .ausstattung {width:120px;}
#navigation .fotogalerie {width:117px;}
#navigation .preise {width:85px;}
#navigation .buchung {width:101px;}
#navigation .umgebung {width:117px;}
#navigation .kontakt {width:96px;}
#navigation .impressum {width:75px;}
#navigation .index a {background-position: 0 top}
#navigation .raeume a {background-position: -95px top}
#navigation .ausstattung a {background-position: -182px top}
#navigation .fotogalerie a {background-position: -302px top}
#navigation .preise a {background-position: -419px top}
#navigation .buchung a {background-position: -504px top}
#navigation .umgebung a {background-position: -605px top}
#navigation .kontakt a {background-position: -722px top}
#navigation .impressum a {background-position: -818px top}
#navigation .index a:hover {background-position: 0 bottom}
#navigation .raeume a:hover {background-position: -95px bottom}
#navigation .ausstattung a:hover {background-position: -182px bottom}
#navigation .fotogalerie a:hover {background-position: -302px bottom}
#navigation .preise a:hover {background-position: -419px bottom}
#navigation .buchung a:hover {background-position: -504px bottom}
#navigation .umgebung a:hover {background-position: -605px bottom}
#navigation .kontakt a:hover {background-position: -722px bottom}
#navigation .impressum a:hover {background-position: -818px bottom}L.G. 1moma
