Kako vertikalno poravnati tabelo (HTML) ?

D

dnagrafik

Pripravnik
10. sep 2010
89
0
6
Lep pozdrav,

Ne uspe mi poravnati tabele vertikalno. Horizontalno ni problema, za vertikalno pa ne poznam načina. Želel bi da bi bila ta slika ki je znotraj tabele vedno na sredini zaslona ne glede na resolucijo. Področja na sliki bodo potem služila kot linki in to znam narediti, samo vertikalno
confused-1.gif


testqy.png


Lp in hvala za nasvete !
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.956
744
113
Sliki dodaj:
Koda: 
 style="margin: 0 auto;"

Zakaj pa ima notranja tabela fiksno širino?

EDIT: pa pri notranji tabeli boš moral pri TDju dodati še align in valign.
 
Nazadnje urejeno:
D

dnagrafik

Pripravnik
10. sep 2010
89
0
6
Evo sem dodal sliki, tabeli sem odstranil širino in višino (dodal sem jo zato ker je toliko velika slika, nisem domač v tem
wink-1.gif
! )



Pa še vedno ne prikaže vertikalno na sredini ?
confused-1.gif
 
Nazadnje urejeno:
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.956
744
113
Probaj tole: tabeli (zunanji) daj border="1" in poglej ali se po višini raztegne čez celoten ekran.
Če ne, potem je potrebno dodati v CSS:

Koda: 
 body, html {
    height: 100%;
}
 
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Margin auto dela samo za horizontalno poravnavo. S tabelami najbolj enostavno je takole:

Koda: 
	<table width="100%" height="100%">
    	<tr>
        	<td valign="middle" align="center"> 
    			<img src="slika.png" />
    		</td>
         </tr>
     </table>

V kakih modernih browserjih gre pa tudi takole:

Koda: 
<style>
	body{
		height:100%;
		margin: 0;
	}
	
	img{
		width: 270px;
		height: 228px; 
		position: relative; 
		top:50%; 
		margin: -114px auto;
		display: block;
	}
</style>
<body>
	<img src="slika.png" />
</body>

Width in height od slike se prilagodi. Pri marigin je pa minus polovična višina slike.
 
D

dnagrafik

Pripravnik
10. sep 2010
89
0
6
Philips sem poizkusil tvojo varianto in je skoraj popolno, moti me le da če zascrolam s miškinim kolesom se slika lahko premakne navzgor in navzdol za kak centimeter. Drugače je na sredini.
cheer.gif


Doto pri tvoji varianti mi pa sliko postavi takole KLIK ? Polovico slike pa ni vidne.
confused-1.gif


Lp

Lp
 
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Katera verzija?

Citat:
Uporabnik dnagrafik pravi:
Philips sem poizkusil tvojo varianto in je skoraj popolno, moti me le da če zascrolam s miškinim kolesom se slika lahko premakne navzgor in navzdol za kak centimeter. Drugače je na sredini.
Klikni za razširitev

To je zato, ker imaš dve tabeli. Slika je centrirana na notranjo. Ker je height prevelik, se stran scrolla, posledično se potem premika slika. Če zmanjšaš velikost okna se ti bo še bolj premikala.
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.956
744
113
Mislim da gnezdene tabele tu niso problem, ampak se mu scroller verjetno pojavi ker pri body-ju ni dal "margin:0 ;".
 
D

doto

Fizikalc
25. jul 2007
3.175
0
36
Sem videl zdaj, da je v drugi verziji dal width in height iz notranje tabele ven.
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.956
744
113
Če želiš imeti samo eno sliko na sredini ekrana, potem uporabi kar tisto kodo, ki jo je doto prilepil par postov višje.
Ker tabele se za namene postavitve strani že dolgo časa več ne uporabljajo.
 
D

dnagrafik

Pripravnik
10. sep 2010
89
0
6
Citat:
Uporabnik philips pravi:
Mislim da gnezdene tabele tu niso problem, ampak se mu scroller verjetno pojavi ker pri body-ju ni dal "margin:0 ;".
Klikni za razširitev

Točno tako !
cheer.gif


Citat:
Doto pri tvoji varianti mi pa sliko postavi takole KLIK ? Polovico slike pa ni vidne.
Klikni za razširitev

Mislil sem na to varianto
dotoverz.png

Pri tej mi namreč sliko postavi tako kot je na zgornjem linku
confused-1.gif


Hvala Philips !
cheer.gif


Lp M
 
P

philips

Guru
Osebje foruma
Administrator
17. avg 2007
9.956
744
113
Mislim da bi pri tej drugi metodi moral dati še htmlju height na 100%.
Tako da tam ko imaš "body {....}", daj "body, html {...}".

Če pa ti je obstoječa rešitev dovolj dobra, potem pa se ne rabiš več s tem ukvarjati
smile-1.gif
 
Za odgovor se prijavite ali registrirajte.
Na vrhu Bottom