CSS Display

Programovacie jazyky, rady, poradňa...
Innocence
VIP
VIP
Používateľov profilový obrázok
Príspevky: 2451
Registrovaný: 05 jan 2008, 10:16
Bydlisko: Bratislava

CSS Display

Príspevok od používateľa Innocence »

Opravené, poprosím lock :)

Zdravím, známemu som na web hodil jednoduchú galériu, HTML/CSS.

Fotky v poriadku, Lightbox funguje, no v spodnej časti stránky mi vzniklo veľa prázdneho miesta.

V zdrojovom kóde ide o túto časť:

Kód: Vybrať všetko

<a href="#_" class="lightbox" id="img1">
  <img src="images/01.jpg">
</a>
<a href="#_" class="lightbox" id="img2">
  <img src="images/02.jpg">
</a>
<a href="#_" class="lightbox" id="img3">
  <img src="images/03.jpg">
</a>
<a href="#_" class="lightbox" id="img4">
  <img src="images/04.jpg">
</a>
...
Ak to celé zabalím do <div style="display:none">, medzera síce zmizne, no prestane sa zobrazovať aj celý lightbox. CSS súbor od lightboxu vyzerá takto:

Kód: Vybrať všetko

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}
Otázka teda znie - ako odstrániť spodnú medzeru, a zároveň nenarušiť funkcionalitu lightboxu?
*****HERO*****
Guru wannabe
Guru wannabe
Používateľov profilový obrázok
Príspevky: 2446
Registrovaný: 08 máj 2006, 1:34

Re: CSS Display

Príspevok od používateľa *****HERO***** »

to mas nejak divne vyrieseny ten lightbox. tu medzeru ti tam robi to <p>, co mas za tabulkou. v tom pecku mas znova vsetky fotky, co v tych tabulkach, len v original nezmensenej verzii.

bud to kompletne prerob, alebo napr tomu pecku nastav position:fixed
Napísať odpoveď