Forum PHP.pl > problem z umiejscowieniem dwóch obrazków

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: problem z umiejscowieniem dwóch obrazków

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

hdhkff

6.04.2011, 20:06:55

Witajcie. Mam pewien wydawało by sie błachy problem, ale czas który na jego rozwiązanie poświęciłem zwala mnie już z nóg. Zmęczył mnie brak rezultatu, więc postanowiłem się zwrócić o pomoc. Otóż :

mam kod html zamieszczony w drupalowskiej stronie:

[HTML] pobierz, plaintext 
<head>
		<link rel="shortcut icon" href="http://almed.firehost.pl/favicon.ico" />
                <!-- Start VideoLightBox.com HEAD section -->
		<link rel="stylesheet" href="http://almed.firehost.pl/engine/css/videolightbox.css" type="text/css" />
		<style type="text/css">#videogallery a#videolb{display:none}</style>
		<link rel="stylesheet" type="text/css" href="http://almed.firehost.pl/engine/css/overlay-minimal.css"/>
			<script src="http://almed.firehost.pl/engine/js/jquery.tools.min.js" type="text/javascript"></script>
			<script src="http://almed.firehost.pl/engine/js/swfobject.js" type="text/javascript"></script>
			<!-- make all links with the 'rel' attribute open overlays -->
			<script src="http://almed.firehost.pl/engine/js/videolightbox.js" type="text/javascript"></script>
		<!-- End VideoLightBox.com HEAD section -->
</head>
	<body bgcolor="#d4d0c8">
<!-- Start VideoLightBox.com BODY section -->
	<script type="text/javascript">
function onYouTubePlayerReady(playerId) { 
ytplayer = document.getElementById("video_overlay"); 
ytplayer.setVolume(100); 
} 
</script> 
<div id="videogallery">
	<a rel="#voverlay" href="http://www.youtube.com/v/AKeHAJN6HWw?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="ja zlozony"><img src="http://almed.firehost.pl/data/thumbnails/0.png" alt="ja zlozony" /></a>
<a rel="#voverlay" href="http://www.youtube.com/v/Elj9cSjPLJY?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="masaz viktow"><img src="http://almed.firehost.pl/data/thumbnails/1.png" alt="masaz viktow" /></a><a id="videolb" href="http://videolightbox.com">Flash Video Lightbox by VideoLightBox.com v1.10</a>
	</div>
	<!-- End VideoLightBox.com BODY section -->
	</body>
</html>
[HTML] pobierz, plaintext

co bym nie nawydziwiał w kodach moje ikonki rozmieszczone są jedna pod drugą ----> jak na tym obrazku

Kod

http://almed.firehost.pl/przyklad.jpg

ja chcialbym zeby ikony byly jedna za drugą i nie mam zielonego pojecia dlaczego nie sa.

plik CSS do którego odnosi sie kod to

Kod

#videogallery {
    width:100%;
    zoom:1;
}
#videogallery span{ display:inline; }
#videogallery a{
    display:inline;
    display:inline;
    zoom:1;
    *display:inline;
    position:absolute;
    vertical-align:top;
    margin:5px;
    width:96px;
    font-family:Trebuchet,Tahoma,Arial,sans-serif;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    text-align:center;
    opacity:0.87;
}
#videogallery a img{
    display:inline;
    border:none;
    margin:0;
}
#videogallery a:hover{
    opacity:1;
}

za pomoc bardzo dziękuję.

Proszę o pomoc kogokolwiek, nie daje rady już z tym. Powinno działać, ale za cholere nie chce ....

krzywy36

6.04.2011, 20:11:16

ustaw dla <a> i dla <img> display: block i dodatkowo dla <a> float: left

Edit:
konkretnie, tak:

[CSS] pobierz, plaintext 
#videogallery {
    width:100%;
    zoom:1;
}
#videogallery span{ display:inline; }
#videogallery a{
    display: block;
    float: left;
    zoom:1;
    vertical-align:top;
    margin:5px;
    width:96px;
    font-family:Trebuchet,Tahoma,Arial,sans-serif;
    font-size:11px;
    font-weight:normal;
    text-decoration:none;
    text-align:center;
    opacity:0.87;
}
#videogallery a img{
    display: block;
    border:none;
    margin:0;
}
#videogallery a:hover{
    opacity:1;
}
[CSS] pobierz, plaintext

jak nie będzie działać to wrzuć gdzieś na "żywo".

hdhkff

9.04.2011, 17:31:39

Działa, dziękuję krzywy36, straciłem na to sporo czasu, więc cieszę się, że ktoś po drugiej stronie ekranu znalazł chwilkę by zerknąć. Teraz mam dwa obrazki koło siebie, jednak drugi o jakieś 10px niżej, ale to już powinienem ogarnąć samemu.
thumbsupsmileyanim.gif

Nie mogę ustawić tych obrazków w jednej linii, nie mogę zrozumieć dlaczego nie są one na tej samej wysokości

Kod

http://almed.firehost.pl/drupal-7.x-dev/node/15

Kod jest na pewno dobry bo po wklejeniu i odpaleniu go z index.html obrazki zamieszczone są idealnie równo ale jak zamieszczę go na stronie drupal obniza mi o te kilkanaście pikseli, ktoś ma jakiś pomysł dlaczego ? Jest to dla mnie całkowicie nie zrozumiałe. Ponadto po kliknięciu otwiera się okno lightbox z filmem, obramówka tego okna nie wykazuje pierwszeństwa warstwy względem warstwy flash, inaczej ujmując flash zasłania obramówkę. Czy isnieje możliwość zmiany pierwszeństwa względem tych dwóch warstw, jeżeli tak proszę mnie ukierunkować jakich informacji powinienem szukać.
Dziękuję.

Pół problemu rozwiązanego, otrzymałem pomoc i od razu wklejam rozwiązanie , do css-u trzeba bylo dodać wpis

Kod

#videogallery br{ display: none; }

Działa

!!!

Teraz jeszcze problem z warstwami, próbowałem z-index , ale nie odnoszę żadnego rezultatu ....

Problem rozwiązany, znalazłem je na innym forum. Aby warstwa flash była poniżej i nie zasłaniała obramówki lightboxa, do kodu wstawiającego obrazek flash na stronę trzeba wprowadzić drobną modyfikację :

z np takiego

Kod

na taki

Kod

Temat do zamknięcia. Pozdrawiam.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.