Archief - Dringend hulp nodig met afbeeldingen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
H

Hiroi

Legacy Member
Ik zit met een newsbanner en heb daar pijltje bij om te scrollen over de artikelen, nu mijn pobleem is dat ik mijn pijltjes niet goed gepositioneerd krijg, ik kan absolute gaan positioneren maar dit is dan goed voor IE maar dan foor firefox en dergelijk weer niet en bij andere resolutie loopt het ook de soep in.
Kan iemand mij wat hulp bieden?

site: Dansclub Eurodance Wetteren
H

Hiroi

Legacy Member
NU ik heb mijn newsbanner goed gekregen voor IE mpaar firefox blijkt toch niet 100% te zijn, kan er echt niemand mij helpen?
C

Curahee Q

Legacy Member
Waarom zet je die pijlen in godsnaam niet gewoon links en rechts naast je nieuwsbanner.

<div id="pijl_links"></div>
<div id="news_banner"></div>
<div id="pijl_rechts"></div>

en dan gewoon allemaal float: left;
H

Hiroi

Legacy Member
css van de banner:

/* container */
#container {
position: relative;
top: -480px;
left: 50px;
}

#spacer {
margin-top: 200px;
margin-bottom: 300px;
}

* Slideshow style rules.
*/
#slideshow {
margin:0 auto;
width:500px;
height:263px;
background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
position:relative;

}
#slideshow #slidesContainer {
margin-left:100;
width:480px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:480px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}


/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:-50;
background:url(img/control_left.jpg) no-repeat 0 0;

}
#rightControl {
top:0;
right:100;
background:url(img/control_right.jpg) no-repeat 0 0;
}


#pageContainer {
margin:0 auto;
width:480px;
}


.slide h2, .slide p {
color:#ccc;
margin:15px;
}


.slide h2 {
font:22px Georgia, "Times New Roman", Times, serif;
color:#ccc;
letter-spacing:-1px;
}


.slide h3 {
font:14px Georgia, "Times New Roman", Times, serif;
color:#ccc;
letter-spacing:-1px;
margin:15px;
}


.slide img {
float:right;
margin:0 15px;






html/javascript:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dansclub Eurodance Wetteren</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<!-- start script nieuwsbanner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 480;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
<!-- start script nieuwsbanner -->


</head>
<body>
<div id="main_container">
<div id="banner"></div>

<!-- start header -->
<div id="header">
<div id="menu">
<ul>

<li class="current_page_item" ><a href="index.html">Home</a></li>
<li><a href="Historiek.html">Historiek</a></li>
<li><a href="Opendeur.html">Opendeur</a></li>
<li><a href="Cursussen.html">Cursussen</a></li>
<li><a href="Kalender.html">Kalender</a></li>
<li><a href="Fotos.html">Foto's</a></li>
<li><a href="Filmpjes.html">Filmpjes</a></li>
<li><a href="Gastenboek.html">Gastenboek</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
</div>
<!-- end header -->



<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<br>
<div class="post">
<h2 class="title">Welkom op onze nieuwe website </h2>
<div class="entry">

<p> <i> Hierop vind je niet alleen praktische informatie zoals uitleg over de verschillende cursussen maar kan je ook enkele sfeervolle foto's en filmpjes bekijken. <br> Je kan ook steeds een berichtje nalaten in ons gastenboek.</i> </p>




</div>
</div>
<div id="spacer">
</div>
</div>


</div>

</div>

<br>


<!-- end content -->
<div id="sidebarmenu">

</div>
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->


<!-- start footer -->
<div id="footer">
<p id="legal">www.dansclubeurodance.be - Moerstraat 11 9230 Wetteren - last update: 27 juni 2009</p>
<IMG STYLE="position:relative ; TOP:-200px; LEFT: -345px; WIDTH:150px; HEIGHT:150px" SRC ="https://www.beyondgaming.be/forums">

<!-- container slideshow -->
<div id="container">
<!-- Slideshow HTML -->
<div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2 class="body">Nieuw vanaf september: Zumba!</h2>
<p><a href="Curzu.html"><img src="https://www.beyondgaming.be/forums" width="400" height="134" /></a> <h3> <i> Voor meer info klik op de afbeelding.</i> </h3> </p>
</div>
<div class="slide">
<h2 class="body">Foto's en filmpjes Dance Happening nu online!</h2>
<p><a href="fotodancehappening.html"><img src="https://www.beyondgaming.be/forums" width="190" height="105" /></a> <a href="filmpjesdancehappening.html"><img src="https://www.beyondgaming.be/forums" width="190" height="105" /></a> <h3> <i> Voor meer info klik op de afbeeldingen.</i> </h3> </p>
</div>
<div class="slide">
<h2 class="body">Data Opendeuren seizoen 2009-2010 nu online!</h2>
<p><a href="Opendeur.html"><img src="https://www.beyondgaming.be/forums" width="400" height="133" /></a> <h3> <i> Voor meer info klik op de afbeelding.</i> </h3></p>
</div>
</div>
</div>

<!-- Slideshow HTML -->
</div>
<!-- container slideshow -->
</div>
<!-- end footer -->



</div>


</body>
</html>
C

Curahee Q

Legacy Member
Heb al eens in je code gekeken. Volgens mij is dat echt gemakkelijk toe te passen. Heb je die html zelf geschreven? Dan kan je daar toch voor en achter een div toevoegen voor je pijltjes...
H

Hiroi

Legacy Member
de html heb ik zelf gemaakt maar die java script niet, ik zal het eens op mijn gemak moeten bekijken, het rare vindt ik wel dat het in IE perfect is en dat het in firefox niet goed is
C

Curahee Q

Legacy Member
zo raar is dat niet hoor :). Maar die positionering heeft dus geen bal te maken met de javascript dus dat zou toch wel moeten lukken.
H

Hiroi

Legacy Member
hetgeen dat ik niet versta is waar dat die pijltjes opgeroepen worden? in mijn css zie ik wel left control, rightcontrol maar in mijn html wordt dit toch nergens opgeroepen?
C

Curahee Q

Legacy Member
In je javascript toch wel...

Maar gooi die code gewoon ff weg. Zet voor en achter de code van je banner gewoon 2 div's met als background image de correcte pijltjes. Bij een onclick (met jquery) ga je dan naar je juiste image.
H

Hiroi

Legacy Member
dus voor mij news banner een div naar pijltje links achter banner pijltje recht, maar wat moet er dan veranderen hierin:

<!-- start script nieuwsbanner -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 480;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
<!-- start script nieuwsbanner -->
C

Curahee Q

Legacy Member
Ja ik ken niet veel van jquery. Maar het lijkt me dat als je dezelfde id gebruikt voor die div's als voor hetgene je eerst gebruikte dat het wel moet werken.
J

Jerre Muesli

Legacy Member
Je moet jquery niet kennen om te zien wat het doet. Het leest zichzelf. 'tIs gewone domquery
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan