zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Listen und Bilder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.01.2012, 18:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.01.2012
Beiträge: 1
metter76 befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.01.2012, 11:31
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.136
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Falsches Forum, das ist ein css Problem!

in der jquery.simplyscroll-1.0.4.css wird die Breite festgelegt:
Code:
.simply-scroll .simply-scroll-list li {
    float: left;
    height: 191px;
    width: 175px;
}
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bilder, listen, lists, padding

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Schattenrahmen um Bilder (Typo3) micronix CSS 2 20.08.2012 20:01
bilder in div container unten anordnen diegaby CSS 12 17.11.2008 14:08
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57
Problem mit Listen in Eltern mit Padding: Punkte werden im verbotenen Bereich angezei braindead (X)HTML 5 13.09.2007 16:43
bilder und text in listen Dumbatz CSS 4 24.10.2006 20:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:44 Uhr.