[opolski]

Mirki pomocy. Zaczynam zabawę z HTML i jestem kompletnym laikiem. W operze mój "projekt" wygląda tak jak na zdjęciu 1, w innych przeglądarkach ostatni obraz wyświetla się jak na zdjęciu nr 2 w komentarzu. To samo dzieje się w momencie kliknięcia w przycisk na dole i powrotu na stronę główną, lecz po odświeżeniu wszytko wraca do normy.

Ustawiłem szerokość kontenera z obrazami na width 85% co przy 1920px rozdzielczości daje 1632px powierzchni.

16 x (szerokość jednego obrazka) 98px + 15 x margin-right 4px + margin-left 2px pierwszego obrazka i margin-right 2px ostatniego obrazka daje równo 1632px..


HTML !

GIFTY

















Read More

Copyrights © 2018 GIFTY

CSS ! body{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
padding: 0;
margin: 0;
background-color: #f4f4f4;

}

.conteiner{
width: 85%;
margin: auto;
overflow: hidden;
text-align: center;
padding: 0;
}

.conteiner img{
float: left;
display: inline;

}

.box img{
margin-right: 4px;
margin-top: 60px;
width: 98px;

}

.box-1 img{
margin-top: 60px;
margin-left: 2px;
margin-right: 4px;
width: 98px;
}

.box-2 img{
margin-top: 60px;
margin-right: 2px;
width: 98px;
}

footer p{
text-align: center;
font-size: 12px;
color: #000;
}

.buttony{
text-align: center;
}

.button{
text-align: center;
float: none;
overflow: hidden;
background-color: #555;
color: white;
font-size: 16px;
padding: 10px 22px;
border: none;
cursor: pointer;
border-radius: none;
margin-top: 20px;
}

#html5 #css #frontend

[opolski]

@opolski:

[zortabla_rt]

@opolski: nie dałeś zdjec. Wrzuć zipa

[opolski]

@zortabla_rt: Pierwsze zdjęcie na samym dole, a drugie w komentarzu. Tutaj zip na google drive.
https://drive.google.com/file/d/1-_vWr7YFSTY7EvG6mLkMe2cMNwInnaJu/view?usp=sharing

[Pajalockk]

@opolski użyj do tego grida.

[opolski]

@Pajalockk Ok dzięki zacznę zaraz sobie ogarniać :)

[zortabla_rt]

@opolski: dodaj do 'conteiner' display: inline-flex;
Czy o taki efekt Ci się rozchodzi, nie wiem.

[CeZiK_]

@opolski: może sobie skorzystaj z gotowego grida.

https://getbootstrap.com/docs/4.1/layout/grid/