| metter76 |
05.01.2012 18:10 |
Listen und Bilder
Hallo
Ich hoffe Ihr könnt mir helfen.
Ich habe eben das grobe Gerüst meiner neue Seite von einer coder Bude in den USA zurück gekriegt. markusetter.webatu.com
Sieht alles ganz gut aus, leider verliere ich beim anpassen nun fast den Verstand. :|
Die Bilder auf der "home screen" tun zwar was sie sollen - von rechts nach links scrollen Doch irgendwie scheinen die Abstände der Bilder zu einander fix zu sein. So dass man jeweils das halbe Bild nicht sieht, oder bei zu schmalen Bildern eine Lücke entsteht.
Kann mir jemand helfen wie ich das individuell einstellen kann?
Die haben das mit listen gelöst, aber padding und margin scheinen null effekt zu haben.
hier ist das HTML:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ETTERMEDIA | Index</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css">
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="css/jquery.simplyscroll-1.0.4.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll-1.0.4.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery(function() {
// show a simple loading indicator
var loader = jQuery('<div id="loader">Loading...</div>')
.css({position: "relative", top: "0px", left: "10px"})
.appendTo("#msg1")
.hide();
jQuery().ajaxStart(function() {
loader.show();
}).ajaxStop(function() {
loader.hide();
}).ajaxError(function(a, b, e) {
throw e;
});
jQuery.validator.messages.required = "";
$("#contactform").validate({
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field.'
: 'You missed ' + errors + ' fields.<br>Please fill all the required fields';
$("div.error span").html(message);
$("div.error").show();
$('#msg').hide();
} else {
$("div.error").hide();
}
},
onkeyup: false,
submitHandler: function() {
$("div.error").hide();
jQuery("#contactform").ajaxSubmit({
target: "#msg"
});
$('#msg').show();
$('#contactform input:text').val('');
$('#contactform textarea').val('');
},
messages: {
email: {
required: "invalid email",
email: "invalid email"
}
},
debug:true
});
});
});
</script>
</head>
<body>
<div class="header"><!--start header-->
<div class="head">
<div class="logo"><a href="#"><img src="img/logo.png" alt=""></a></div>
<div class="nav">
<ul>
<li class="nav1"><a href="#home" class="panel selected"></a></li>
<li class="nav2"><a href="#services" class="panel"></a></li>
<li class="nav3"><a href="#people" class="panel"></a></li>
<li class="nav4"><a href="#films" class="panel"></a></li>
</ul>
</div>
</div>
</div><!--end header-->
<div id="wrapper"><!--start content-->
<div id="mask">
<!-- Home -->
<div id="home" class="items">
<a name="home"></a>
<div class="banner">
<ul id="makeMeScrollable">
<li><a href="#"><img src="img//homescreen/001.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/002.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/003.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/004.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/005.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/006.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/007.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/008.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/009.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/010.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/011.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/012.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/013.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/014.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/015.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/016.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/017.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/018.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/019.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/020.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/021.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/022.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/023.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/024.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/025.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/026.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/027.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/028.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/029.jpg" alt=""></a></li>
<li><a href="#"><img src="img//homescreen/030.jpg" alt=""></a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!-- Services -->
<div id="services" class="items">
<a name="services"></a>
<div class="scroll-pane">
<div class="services">
<div class="services_left">
<h2>TV und Kino Werbung</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="services_left">
<h2>Image Film</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="services_left">
<h2>Neue Medien</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- People -->
<div id="people" class="items">
<a name="people"></a>
<div class="people">
<div class="people_pic">
<img src="img/people_pic.jpg" alt="">
<p><span>Markus Etter</span><a href="#">Geschäfstführer</a> / <a href="#">Regisseur</a></p>
<p><a href="#">www.markusetter.com</a></p>
<div class="clearfix"></div>
</div>
<div class="people_txt">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Films -->
<div id="films" class="items">
<a name="films"></a>
<div class="scroll-pane">
<div class="services">
<div class="services_left film">
<a href="http://vimeo.com/33735037" rel="prettyPhoto"><img src="img/people_pic.jpg" alt=""></a>
<h2><a href="ETTER MEDIA website layout 2.mov" rel="prettyPhoto">"AO Foundation Image Film"</a><br><span>Kunde: <a href="#">AO Foundation</a> DoP:
<a href="#">Stephen Williams</a></span></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="services_left film">
<a href="http://vimeo.com/33735037" rel="prettyPhoto"><img src="img/film_pic.jpg" alt=""></a>
<h2><a href="ETTER MEDIA website layout 2.mov" rel="prettyPhoto">"AO Foundation Image Film"</a><br><span>Kunde: <a href="#">AO Foundation</a> DoP:
<a href="#">Stephen Williams</a></span></h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita.</p>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div><!--end content-->
<div class="footer"><!--start footer-->
<div id="debug"></div>
<div class="form_block">
<form action="process.php" id="contactform" method="post">
<input name="your_name" type="text" class="required field" value="">
<textarea name="message" cols="10" rows="10" class="required txt_area_bg"></textarea>
<input name="" type="submit" class="form_btn" value="">
</form>
<div class="error"><span></span></div>
<div id="msg"></div>
</div>
</div><!--end footer-->
</body>
</html>
und hier das CSS:
Code:
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* HTML5 display-role reset for older browsers */
article, aside, figure, footer, header, hgroup, nav, section {display: block;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
body {line-height:1;}
/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
/* Form Elements */
input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}
/* hand cursor on clickable elements */
.clickable, label, input[type=button], input[type=submit], button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
a, img a, img, a img {border:0; outline:0; text-decoration:none;}
/* FLOAT-elements */
.fltleft {float:left;}
.fltright {float:right;}
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { clear: both; }
body {
background:#bac2c5;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
font-weight:normal;
color:#6e6e6e;
width:100%;
}
/****************main*****************/
.header {
width:100%;
padding-top:118px;
position:relative;
}
.head {
margin:0 auto;
}
.logo {
height:152px;
text-align:center;
padding:0 0 45px 0;
}
.nav {
width:406px;
margin:0 auto;
height:50px;
position:relative;
bottom:-5px;
}
.nav ul {
text-align:center;
}
.nav ul li {
float:left;
height:50px;
position:relative;
margin:0 -10px;
}
.nav ul li a {
display:block;
float:left;
}
.nav ul li.nav1 a {
background:url(../img/home_button.png) no-repeat left -63px;
width:92px;
height:63px;
}
.nav ul li.nav1 a:hover, .nav ul li.nav1 a.selected {
background:url(../img/home_button.png) no-repeat left 0px;
}
.nav ul li.nav2 a {
background:url(../img/services_button.png) no-repeat left -58px;
width:149px;
height:58px;
}
.nav ul li.nav2 a:hover, .nav ul li.nav2 a.selected {
background:url(../img/services_button.png) no-repeat left 0px;
}
.nav ul li.nav3 a {
background:url(../img/people_button.png) no-repeat left -54px;
width:130px;
height:54px;
}
.nav ul li.nav3 a:hover, .nav ul li.nav3 a.selected {
background:url(../img/people_button.png) no-repeat left 0px;
}
.nav ul li.nav4 a {
background:url(../img/film_button.png) no-repeat left -57px;
width:115px;
height:57px;
}
.nav ul li.nav4 a:hover, .nav ul li.nav4 a.selected {
background:url(../img/film_button.png) no-repeat left 0px;
}
#container {
height:220px;
width:100%;
overflow:hidden;
position:relative;
}
#wrapper {
background:url(../img/white_band.png) repeat-x left top;
height:210px;
padding:7px 0 0 0;
width:100%;
position:absolute;
top:368px;
left:0;
overflow:hidden;
}
#mask {
width:400%;
}
.banner {
width:100%;
height:191px;
margin:0 auto;
}
.banner img {
float:left;
}
.footer {
width:100%;
position:relative;
padding:10px 0 0 0;
top:220px;
}
.form_block {
width:290px;
margin:0 auto;
}
.field {
border:2px solid #000;
margin-bottom:10px;
width:276px;
height:25px;
line-height:25px;
color:#333;
border-radius:5px;
padding-left:10px;
}
.txt_area_bg {
background:url(../img/txt_area_bg.png) no-repeat left top;
width:270px;
height:162px;
border:0px;
outline:none;
overflow:auto;
padding:10px;
margin-bottom:2px;
resize:none;
}
.form_btn {
background:url(../img/bottom_btn.png) no-repeat left top;
width:162px;
height:57px;
border:0px;
cursor:pointer;
margin-left:70px;
}
/**************css for Inner1********************/
.scroll-pane {
width:100%;
height:188px;
padding:15px 0 8px 0;
background:url(../img/scroll_bg.jpg) repeat-x bottom left;
}
.services {
width:2250px;
}
.services_left {
background:url(../img/service_sep.jpg) no-repeat right top;
width:648px;
height:148px;
float:left;
padding:0 0 0 27px;
}
.services_left.film {
width:905px;
}
.services_left img {
float:left;
margin-right:11px;
}
.services_left h2 {
width:178px;
display:block;
float:left;
font-size:14px;
font-weight:bold;
font-style:italic;
line-height:18px;
}
.services_left h2 a {
letter-spacing:-1px;
color:#6e6e6e;
font-weight:bold;
}
.services_left h2 span {
font-weight:normal;
font-style: normal;
}
.services_left h2 span a {
letter-spacing:normal;
}
.services_left p {
width:190px;
display:block;
float:left;
line-height:16px;
margin-right:30px;
}
/**************css for Inner2********************/
.people {
width:915px;
padding:30px 0 0 0;
margin:0 auto;
}
.people_pic {
width:466px;
float:left;
}
.people_pic img {
float:left;
margin-right:11px;
}
.people_pic p {
line-height:16px;
padding:0 0 20px 0;
}
.people_pic p a {
color:#6e6e6e;
}
.people_pic p span {
font-weight:bold;
font-style:italic;
display:block;
}
.people_txt {
float:left;
}
.people_txt p {
width:190px;
display:block;
float:left;
line-height:16px;
margin-right:30px;
}
.items {
width:25%;
float:left;
}
div.error, #msg {padding:5px 0 0 0; color:#f00; }
Jede Hilfe wäre sehr sehr wilkommen. |
