alexa-tracking

Kenapa yaa tampilan web saya berantakan jika di resize ?? saya pake tag div

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/54b09948902cfee55a8b4572/kenapa-yaa-tampilan-web-saya-berantakan-jika-di-resize--saya-pake-tag-div
Peringatan! 
Kenapa yaa tampilan web saya berantakan jika di resize ?? saya pake tag div
Berhubung ane udah kelas 2 di jurusan RPL, gw dikasih tugas buat bikin tampilan web emoticon-Cool

Dan masalahnya pas tampilan webnya udah jadi, eh pas di resize malah berantakan ga karuan emoticon-Baby Boy 1

gini contohnya :

SEBELUM : Kenapa yaa tampilan web saya berantakan jika di resize ?? saya pake tag div

SESUDAH : Kenapa yaa tampilan web saya berantakan jika di resize ?? saya pake tag div
Mohon pencerahannya ya mastah mastah emoticon-Angel
Script nya tampilin sini gan emoticon-Big Grin
Coba pelajari tentang media-query di CSS gan. Supaya nanti tampilan nya bisa responsif emoticon-Smilie
agan harus mulai belajar tentang desain web responsive. belajar cara bikin halaman responsif dengan css.. kalo belum tau tentang reponsif, nih baca :

Mengenal Responsive Web Design
Belajar responsive design gan
Ga masalah mau pake div ataupun tag lainnya, itu cuma masalah style aja gan. Sepertinya agan banyak menggunakan style position: absolute atau menggunakan float.
Belajar lagi CSS2/CSS3 di W3SCHOOLS

Abis Dari w3Schools.com lanjut sini gan

Abis belajar dari w3Schools.com di test disini gan:
http://responsivetest.net
Quote:


Oke thanks agan semua, kalo boleh tau tempat tutorial lengkap buat belajar web dimana yah ? selain w3school emoticon-Ngakak
kalo agan gak mau responsive kasih size yang statis aja

seperti

<body>
<div style="height:auto; width:1024px;margin:0px auto">
// content ..
</div>
</body>
Quote:


w3schools udah enak banget itu gan. ga boong deh emoticon-Cape d... (S)
Quote:


kalo mau yang lain coba lihat disini gan emoticon-Big Grin : 7 Situs Belajar Buat Website
klo d kasih kaya gtu pasti nnti ga bisa tampilan mobile ya ?
Responsive Website Design Testing Tool TRY!! it now
http://freeconverts.com/include/responsive/
Kalau mau pakai template resposive, usahakan "width" nya jangan pakai fixed, tapi pakai "persen".
Kalau widthnya fixed, ketika lebar layar kurang dari total lebar elemen, salah satu elemen bakal dipindah di bawah.

Misalnya: mau ada 2 elemen, dibikin berdampingan.
Elemen 1: lebar maksimum 200px, atau sekitar 30% dari lebar layar ketika layar di resize.
Elemen 2: lebar maksimum 600px, atau sekitar 70% dari lebar layar ketika layar di resize.
Total lebar elemen ketika layar maximized hanya 800 pixel dan ketika layar diperkecil total lebar elemen adalah 100% dari lebar layar.

Responsive CSS :

#Elemen1 {
width: 30%; <-- memastikan lebar 30% dari total lebar layar.
max-width: 200px; <-- dengan lebar elemen maksimal tidak lebih dari 200 pixel.
float: left;
}

#Elemen2 {
width: 70%; <-- memastikan lebar elemen 70% dari lebar layar (lebar elemen 1 + elemen 2 = 100% atau lebar penuh)
max-width: 600px; <-- memastikan lebar elemen maksimum tidak lebih dari 600px (lebar elemen 1 + lebar elemen 2 = 800pixel)
float: left;
}

catatan : pastikan padding kanan dan kiri 0 supaya tidak ada penambahan lebar elemen.