L
larocca
Guest
ich bin ein waschechter frischling u lese mir das "how-to" der erstellung einer internetseite so nach u nach an.. jetzteeeeeresigniere ich aber halb vor dem internet explorer!
ich hab eine seite gebaut im firefox u hab da soweit alles mehr o weniger gut hingekriegt - alles läuft u dann krieg ich den tipp, dass ich mir das doch mal im ie ansehen soll - es sei doch "recht verschoben"...
am schlimmsten ist die produktgalerie
kann mir jemand sagen, wie ich die darstellung überarbeiten muss, bzw. was ich da grundsätzlich nicht verstanden hab, dass das so aussieht?
ich hab schon rausgefunden, dass es wohl was mit der absoluten formatierung zu tun haben könnte.. aber auch wenn ich die ersetze, komm ich noch nicht auf einen nenner.. wie gehe ich am besten vor.
ich hab eine seite gebaut im firefox u hab da soweit alles mehr o weniger gut hingekriegt - alles läuft u dann krieg ich den tipp, dass ich mir das doch mal im ie ansehen soll - es sei doch "recht verschoben"...
am schlimmsten ist die produktgalerie
kann mir jemand sagen, wie ich die darstellung überarbeiten muss, bzw. was ich da grundsätzlich nicht verstanden hab, dass das so aussieht?
ich hab schon rausgefunden, dass es wohl was mit der absoluten formatierung zu tun haben könnte.. aber auch wenn ich die ersetze, komm ich noch nicht auf einen nenner.. wie gehe ich am besten vor.
HTML:
/*GALLERY*/
.ad-gallery {
width: 100%;
position:relative;
height: 336px;
}
.ad-gallery, .ad-gallery * {
margin: 0;
padding: 0;
}
.ad-gallery .ad-image-wrapper {
background:none repeat scroll 0 0 transparent;
float:left;
width: 100%;
height: 334px;
top:1px;
left:1px;
position: relative;
overflow: hidden;
margin:0px auto;
}
.ad-gallery .ad-image-wrapper .ad-loader {
position: absolute;
z-index: 10;
top: 100%;
left: 100%;
}
.ad-gallery .ad-image-wrapper .ad-next {
position: absolute;
left: 395px;
top: 0;
width: 40px;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
background:none no-repeat top center transparent;
}
.ad-gallery .ad-image-wrapper .ad-prev {
position: absolute;
left: 0px;
top: 0px;
width: 40px;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
background: none no-repeat top center transparent;
}
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9
}
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image,
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
background: url(images/panel.png) center center transparent;
width: 40px;
height: 336px;
display: none;
position: absolute;
top: 0px;
left: 0px;
z-index: 101;
}
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image {
background: url(images/panel.png) center center transparent;
width: 40px;
height: 336px;
display: none;
position: absolute;
top: 0px;
right: 0px;
z-index: 101;
}
.ad-gallery .ad-image-wrapper .ad-image {
top: 0px;
left: 0px;
z-index: 100;
width:956px;
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description {
position: absolute;
top: 110px;
left:438px;
height:200px;
margin: 0px auto;
text-align: left;
z-index: 200;
color: #000;
background:transparent;
}
.ad-description-desc {
font-size: 11px;
margin: 45px 30px 0;
line-height: 15px;
text-align: left;
position: absolute;
width:295px;
background:transparent;
height:170px;
float:rightt;
}
#material_title {
position:absolute;
float:right;
top:0px;
line-height:15px;
width:400px;
text-align:right;
}
#materialliste {
float:none;
position:absolute;
left:163px;
line-height:15px;
height:auto;
text-align:left;
color: #eb570b;
list-style:square;
margin: 0px auto;
top:0px;
width:145px;
}
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description {;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=false, sizingMethod=scale, src='opa75.png');
}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title {
color: #eb570b;
display: block;
font-weight: bold;
font-size: 13px;
position:absolute;
margin: 20px 0 0 30px;
line-height: 15px;
text-align: left;
}
#description_bg {
background:url(images/description_bg.jpg) repeat-y scroll top left transparent;
bottom:-44px;
height:190px;
position:relative;
width:518px;
margin:0px auto;
}
.ad-gallery .ad-controls {
width:518px;
float:left;
position:absolute;
top:100px;
background: transparent none no-repeat center top;
}
.ad-gallery .ad-info {
background:none repeat scroll 0 0 transparent;
float: left;
left:20px;
padding:5px;
position:absolute;
width:auto;
font-style:italic;
}
.ad-gallery .ad-slideshow-controls {
background:none repeat scroll 0 0 transparent;
float: left;
left:80px;
padding:5px;
position:absolute;
width:auto;
font-style:italic;
}
.ad-slideshow-controls .ad-slideshow-start .ad-start,
.ad-slideshow-controls .ad-slideshow-stop {
background:hotpink;
padding: 0px;
cursor: pointer;
margin:0 10px;
}
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown {
padding-left: 1px;
}
.ad-gallery .ad-slideshow-running .ad-slideshow-start {
cursor: default;
font-style: italic;
}
.ad-gallery .ad-nav {
width: 518px;
position: relative;
margin:0 auto;
height:334px;
}
.ad-gallery .ad-forward,
.ad-gallery .ad-back {
position: absolute;
height: 100px;
z-index: 10;
}
.ad-gallery .ad-back {
cursor: pointer;
left:0px;
width: 20px;
display: block;
background: url(images/panel.png) top left repeat transparent;
}
.ad-gallery .ad-forward {
cursor: pointer;
right: 0px;
top:0px;
width: 20px;
display: block;
background: url(images/panel.png) top left repeat transparent;
}
.ad-thumb-wrapper {
width:518px;
margin:0;
height:100px;
background:none no-repeat scroll center top transparent;
clear: both;
position: absolute;
position:absolute;
top:1px;
right:1px;
}
.ad-gallery .ad-nav .ad-thumbs {
overflow: hidden;
width: 518px;
margin:0px;
}
.ad-gallery .ad-thumbs .ad-thumb-list {
float: left;
width: 9000px;
list-style: none;
}
.ad-gallery .ad-thumbs li {
float: left;
padding-right: 1px;
}
.ad-gallery .ad-thumbs li a {
display: block;
}
.ad-gallery .ad-thumbs li a img {
border: 0px solid Turquoise;
display: block;
}
.ad-gallery .ad-thumbs li a.ad-active img {
border: 0px solid #fff;
}
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
position: absolute;
left: -9000px;
top: -9000px;
}
HTML:
<body>
<div id="space">
</div>
<div id="inhalt">
<div id="header">
<div id="logo">
<a href="index.html"> </a>
</div>
<div id="kopfbild">
<div id="kopfbild_inn">
<a href="index.html"> </a>
</div>
</div>
</div>
<div id="menu">
<div id="bg_menu_2_1" alt="bg_menu">
<!-- MAINMENU START -->
<ul id="level1">
<li><a href="index.html" id="1" class="link">Wir über uns</a></li>
<li><a href="produkte.html" id="2" class="act" class="link">Produkte</a></li>
<li><a href="service.html" id="3" class="link">Service</a></li>
<li><a href="kontakt.html" id="4" class="link">Kontakt</a></li>
</ul>
<!-- MAINMENU END -->
<!-- SUBMENU START -->
<ul id="level2">
<li><a href="produkte.html" id="1" class="act" class="link">Küche</a></li>
<li><a href="theke.html" id="2" class="link">Theke</a></li>
<li><a href="bad.html" id="3" class="link">Bad</a></li>
<li><a href="moebel.html" id="4" class="link">Möbel</a></li>
<li><a href="tischstuhl.html" id="5" class="link">Tisch & Stuhl</a></li>
<li><a href="garten.html" id="6" class="link">Garten</a></li>
</ul>
<!-- SUBMENU END -->
</div>
</div>
<div id="container">
<!-- GALLERY START -->
<script type="text/javascript">
$(function() {
$('img.image0').data('ad-material', 'Diese Wohnküche mit Kochinsel ist ein hochwertiges Einzelstück, geprägt durch die klare Formsprache und klare Linienführung, mit viel Liebe für die perfekte Lösung. Hier gibt es nichts überflüssiges oder verspieltes. Die flächenbündigen raumhohen Schränke, in einem warmen grau gehalten, werden durchbrochen von zwei weißen Riegeln und den integrierten Arbeitsflächen. Hohe Sockel lassen die Möbel schweben und dadurch leichter wirken. In der weiß lackierten Insel sind Spülbecken, Kochfeld und Küchenutensilien untergebracht. In den Schränken, die am Wohnbereich angrenzen ist griffbereit das Geschirr.<div id="materialliste"><ul id="materialliste"><span><li>Fronten:<br>MDF Hochglanz lackiert, grifflos</li><li>Rückwände:<br>lackiertes Glas</li><li>Arbeitsplatte:<br>Grauwacke</li></span></div>');
$('img.image1').data('ad-material', 'Diese Küche besticht durch ihr ruhiges und harmonisches Bild und dem Spiel zwischen den Materialien Lack, Holz und Stein. Die klare Linienführung wird bestimmt durch die Griffugen. Die geschlossenen Flächen mit den langen liegenden Formaten sind hochglänzend lackiert, die offenen Regale und die Arbeitsplatte in Kirsche. Die Spüle wurde in ein Stück Granitplatte eingelassen um das Holz der Arbeitsplatte zu schützen. Damit die Arbeitsbeleuchtung das Gesamtbild nicht stört, ist diese in den Oberschränken integriert. Eine weitere Besonderheit dieser Küche ist, dass sich die Arbeitssteckdosen in der Arbeitsplatte befinden.<div id="materialliste"><ul id="materialliste"><span><li>Fronten:<br>weiß Hochglanz</li><li>Arbeitsplatte:<br>Granit Nero assoluto, satiniert<br>und Kirsche geölt und gewachst</li></span></div>');
$('img.image2').data('ad-material', 'Die Küche besticht durch die klare Vorgabe des Materials: Alle Unterschränke sind im sichtbaren Bereich mit einer Edelstahlbeschichtung gefertigt. Die eingebauten Geräte ? Spülmaschine, Herd, Mikrowelle und Ofen ? sind ebenfalls im sichtbaren Blendenbereich aus Edelstahl. Die Oberschränke fügen sich durch das matte Glas der Türen exzellent in die Farbgebung ein. Auch die Griffe und andere Accessoires der Küche sind aus Edelstahl. Einziger Kontrapunkt in diesem kühlen Ensemble ist die warme, rötliche Arbeitsplatte aus geöltem und gewachstem Ulmenholz.<div id="materialliste"><ul id="materialliste"><span><li>satiniertes Glas</li><li>Arbeitsplatte:<br>massive Buche</li></span></div>');
$('img.image3').data('ad-material', 'Die Kombination hell, dunkel, durchsichtig macht eine Küche grundsätzlich interessant. Die schlicht in Buche furnierten Türen der Hochschränke werden bewegt durch ihre unterschiedlichen Formate: schmal, hoch, quer und breit. Die Hochschränke selbst geben durch ihre Glastüren Einblick in ihr bewegtes Inneres. Den Rahmen bildet die dunkle Arbeitsfläche aus Granit.<br>Das Außergewöhnliche an diesem Projekt ist, dass der Kunde die Planung selber vorgenommen hat.<div id="materialliste"><ul id="materialliste"><span></span></div>');
$('img.image4').data('ad-material', 'Eine Küche im Landhausstil in Massivholz Bauweise mit viel Liebe zum Detail. Die Fronten bestehen aus einzelnen Leisten, die ineinander verzahnt sind. Dadurch ergibt sich diese profilierte Oberfläche. Flächenbündige Beschläge in Bootsoptik runden das Bild ab. Dazu passend ein niedriger Sockel mit einer vorgesetzten Zierleiste. Diese wiederholt sich unter der Arbeitsplatte. Die Elektrogeräte sind integriert und stehen mit der Edelstahloptik im Kontrast zum warmen Holz.<div id="materialliste"><ul id="materialliste"><span><li>Fronten:<br>massiv Eiche<br>geräuchert, geölt</li><li>Arbeitsplatte:<br>Granit Nero assoluto</li></span></div>');
$('img.image0').data('ad-title', 'High End Küche<div id="material_title">Materialliste</div>');
$('img.image1').data('ad-title', 'Küche in weiß Hochglanz<div id="material_title">Materialliste</div>');
$('img.image2').data('ad-title', 'Küche in Edelstahloptik<div id="material_title">Materialliste</div>');
$('img.image3').data('ad-title', 'Küche in Buche furniert mit Glas und Granit');
$('img.image4').data('ad-title', 'Eine Küche der besonderen Art<div id="material_title">Materialliste</div>');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>
<!-- GALLERY START -->
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-thumb-wrapper">
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/pro_kue_a001.jpg">
<img src="images/thumbs/pro_kue_a001_s.jpg" class="image0">
</a>
</li>
<li>
<a href="images/pro_kue_a002.jpg">
<img src="images/thumbs/pro_kue_a002_s.jpg" title="" longdesc="" class="image0">
</a>
</li>
<li>
<a href="images/pro_kue_a003.jpg">
<img src="images/thumbs/pro_kue_a003_s.jpg" title="" longdesc="" class="image0">
</a>
</li>
<li>
<a href="images/pro_kue_b001.jpg">
<img src="images/thumbs/pro_kue_b001_s.jpg" title="" longdesc="" class="image1">
</a>
</li>
<li>
<a href="images/pro_kue_b002.jpg">
<img src="images/thumbs/pro_kue_b002_s.jpg" title="" longdesc="" class="image1">
</a>
</li>
<li>
<a href="images/pro_kue_b003.jpg">
<img src="images/thumbs/pro_kue_b003_s.jpg" title="" longdesc="" class="image1">
</a>
</li>
<li>
<a href="images/pro_kue_c001.jpg">
<img src="images/thumbs/pro_kue_c001_s.jpg" title="" longdesc="" class="image2">
</a>
</li>
<li>
<a href="images/pro_kue_c002.jpg">
<img src="images/thumbs/pro_kue_c002_s.jpg" title="" longdesc="" class="image2">
</a>
</li>
<li>
<a href="images/pro_kue_d001.jpg">
<img src="images/thumbs/pro_kue_d001_s.jpg" title="" longdesc="" class="image3">
</a>
</li>
<li>
<a href="images/pro_kue_d002.jpg">
<img src="images/thumbs/pro_kue_d002_s.jpg" title="" longdesc="" class="image3">
</a>
</li>
<li>
<a href="images/pro_kue_e001.jpg">
<img src="images/thumbs/pro_kue_e001_s.jpg" title="" longdesc="" class="image4">
</a>
</li>
</ul>
</div>
<div class="ad-controls">
</div>
<div id="description_bg">
</div>
</div>
</div>
</div>
<!-- GALLERY END -->
<!-- CONTENT START -->
</div>
<div id="content_bg">
</div>
</div>
<div id="bg">
<div id="picture_bg">
</div>
</div>
</div>
</body>
