MertCKA
Hectopat
- Katılım
- 1 Şubat 2019
- Mesajlar
- 201
- Çözümler
- 1
Daha fazla
- Sistem Özellikleri
- HP Victus 16 Ryzen 7 6800H | 8GB DDR5 4800MHz RAM | RTX 3050Ti 4GB | 512GB SSD
- Cinsiyet
- Erkek
- Meslek
- Öğrenci
Arkadaşlar bir web site tasarımı yapmak istiyorum fakat bir yerde tıkandım kaldım. Yardımcı olursanız çok sevinirim. Kodu yazmaya çalıştım fakat eklediğim fotoğraftaki gibi gözüktü. Çizimle ne yapmak istediğimi anlattım. Kodlar bu şekilde:
HTML:
<div class="ortasol">
<div class="orta">
<div class="resim1"><a href="img/eski-antakya.jpg" target="_blank"><img src="img/eski-antakya.jpg" ></a></div>
<div class="ortaust">
<div class="resim1"><a href="img/asi.jpg" target="_blank"><img src="img/asi.jpg"></a></div>
<div class="resim2"><a href="img/arke.jpg" target="_blank"><img src="img/arke.jpg"></a></div>
</div>
<div class="ortaalt">
<div class="resim1"><a href="img/uzun-carsi.jpg" target="_blank"><img src="img/uzun-carsi.jpg"></a></div>
<div class="resim2"><a href="img/gastronomi-evi.jpg" target="_blank"><img src="img/gastronomi-evi.jpg"></a></div>
</div>
</div>
</div>
CSS:
.galerialan3 .ortasol .resim1 {
display: inline-block;
margin-top: 20px;
margin-right: 10px;
}
.galerialan3 .ortasol .resim1 img {
width: 300px;
height: 620px;
border: 3px solid #FAA61A;
border-radius: 5px;
}
.galerialan3 .orta {
vertical-align: top;
}
.galerialan3 .orta .ortaust {
display: inline-block;
}
.galerialan3 .orta .ortaust .resim1 {
display: inline-block;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.galerialan3 .orta .ortaust .resim1 img {
width: 625px;
height: 300px;
border: 3px solid #FAA61A;
border-radius: 5px;
}
.galerialan3 .orta .ortaust .resim2 {
display: inline-block;
margin-top: 20px;
margin-left: 10px;
}
.galerialan3 .orta .ortaust .resim2 img {
width: 300px;
height: 300px;
border: 3px solid #FAA61A;
border-radius: 5px;
}
.galerialan3 .orta .ortaalt {
display: inline-block;
}
.galerialan3 .orta .ortaalt .resim1 {
display: inline-block;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.galerialan3 .orta .ortaalt .resim1 img {
width: 300px;
height: 300px;
border: 3px solid #FAA61A;
border-radius: 5px;
}
.galerialan3 .orta .ortaalt .resim2 {
display: inline-block;
margin-top: 20px;
margin-left: 10px;
}
.galerialan3 .orta .ortaalt .resim2 img {
width: 620px;
height: 300px;
border: 3px solid #FAA61A;
border-radius: 5px;
}
Son düzenleyen: Moderatör: