Artefakty przy skalowaniu

pytanie zadane 20 listopada 2018 w HTML i CSS przez Łukasz Bombała Początkujący (300 p.)

Witam. Jakiś czas temu na forum udało wam się mi pomóc. Mam nadzieję że tym razem też dacie radę.
Tworzę stronę zsofestiwal.pl . Strona jest zrobiona w tabeli. Mam problem z skalowaniem strony(co możecie zauważyć po powiększeniu lub pomniejszeniu jej. Wyskakują paski lub nie wszystkie kawałki do siebie pasują. Czy macie jakiś pomysł co mógłbym zrobić aby działało to dobrze?

<!DOCTYPE html>
<html>
	<head>
		<title>Festiwal Talnetów Elbląg</title>
		<meta charset=utf-8 />
		<link rel="stylesheet" href="css.css" text="text/css" />
		<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	</head>
	<table id="user_Table_01" border="0px" cellspacing="0" cellpadding="0" height="100%";>
		<tbody>
			<tr>		
				<td><img style="display:inherit" src="1_0_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_0_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_0_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_1_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_1_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_1_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_2_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_2_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_2_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_3_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_3_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_3_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_4_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_4_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_4_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_5_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_5_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_5_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_6_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_6_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_6_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_7_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_7_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_7_2.jpg" width="100%" ></td>
			</tr><tr>
				<td><img style="display:inherit" src="1_8_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_8_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_8_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_9_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_9_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_9_2.jpg" width="100%" ></td>
			</tr>
			<tr>
				<td><img style="display:inherit" src="1_10_0.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_10_1.jpg" width="100%" ></td>
				<td><img style="display:inherit" src="1_10_2.jpg" width="100%" ></td>
			</tr>
		</tbody>
	</table>
</html>

1 odpowiedź

odpowiedź 21 listopada 2018 przez sefir Dyskutant (8,560 p.)

Nie żeby coś ale w takich czasach robić stronę za pomocą tabeli :P Lepiej na divach to zrobić z tabelami nieraz są cyrki.

Pokaż 33 poprzednich komentarzy

komentarz 7 grudnia 2018 przez Łukasz Bombała Początkujący (300 p.)

Great Verbs

komentarz 7 grudnia 2018 przez sefir Dyskutant (8,560 p.)
edycja 8 grudnia 2018 przez sefir

Wisisz mi piwo :D


<!DOCTYPE html>
<html>
    <head>
        <title>Festiwal Talnetów Elbląg</title>
        <meta charset=utf-8 />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet"> 
        <style>
            *{
                padding:0;
                margin:0;
                font-family: 'Great Vibes', cursive;
            }
            body{
                background-color: black;
            }
            #kontener a{
                position: absolute;
                text-align: center;
                vertical-align: middle;
                color: inherit;
                text-decoration: none;
            }
        </style>
    </head>
    <script>
        let $ = id=>document.getElementById(id);
        let updatePrzyciski = ()=>{
            let kontener = $("kontener");
            let obraz = $("obraz");
            let property = {
                top:id=>{let tab = [220, 275, 333, 392, 447]; return tab[id]*obraz.ratioSzerokosc();},
                left:()=>97*obraz.ratioSzerokosc()+obraz.offsetLeft,
                wysokosc:()=>38*obraz.ratioWysokosc(),
                szerokosc:()=>114*obraz.ratioSzerokosc()
            }
            for(let i = 0; i < 5; i++){
                let div = document.getElementById("div"+i);
                let style = div.style;
                style.top = property.top(i)+"px";
                style.left = property.left()+"px";
                style.width = property.szerokosc()+"px";
                style.height = property.wysokosc()+"px";
                style.lineHeight = style.height;
            }
        }
        let calcObrazProperty = ()=>{
            let obraz = $("obraz");
            if(obraz.setMaxWidth!==undefined)
                return obraz; 
            let style = obraz.style;
            style.position = "absolute";
            obraz.startowaSzerokosc = obraz.clientWidth;
            obraz.startowaWysokosc = obraz.clientHeight;
            obraz.szerokoscOkna = ()=>window.outerWidth,
            obraz.setMaxWidth = ()=>{
                    let szerokoscOkna = obraz.szerokoscOkna();
                    let startowaSzerokosc = obraz.startowaSzerokosc;
                    style.maxWidth =  (startowaSzerokosc>szerokoscOkna?szerokoscOkna:startowaSzerokosc)+"px";
            }
            obraz.wysrodkuj = ()=>{
                style.left = (obraz.szerokoscOkna()-obraz.clientWidth)/2+"px";
            }
            obraz.ratioSzerokosc = ()=>obraz.clientWidth/obraz.startowaSzerokosc;
            obraz.ratioWysokosc = ()=>obraz.clientHeight/obraz.startowaWysokosc;
            return obraz;
        };
        
        let f = ()=>{

            let obraz = calcObrazProperty();
            obraz.setMaxWidth();
            obraz.wysrodkuj();
            updatePrzyciski();
        }
        window.onload = f;
        window.onresize = f;
    </script>

    <body>
        <div id="kontener">
            <img id="obraz" src="https://images90.fotosik.pl/86/1a00f458ebe96834med.jpg"></img>
            <a id="div0" href="http://google.pl">jeden</a>
            <a id="div1" href="http://google.pl">dwa</a>
            <a id="div2" href="http://google.pl">trzy</a>
            <a id="div3" href="http://google.pl">cztery</a>
            <a id="div4" href="https://google.pl">piec</a>
        </div>

    </body>
</html>