Postingan lainnya
web berantakan setelah di hosting
misi mas mw tanya , web saya berantakan setelah di upload ke hosting , lebih tepatnya saat di tambah artikel baru, tampilan di halaman artikel akan berantakan, denger2 katanya ada hosting yang tidak support beberapa script yaa
ini script di bagian index saya , saya menampilkan 3 berita yang baru ditambah ke index tetapi ketika ditambah berita baru , tampilan akan berantakan
<div class="row">
<?php
$query_for_berita = $pdo->prepare('SELECT * FROM berita ORDER BY id_berita DESC LIMIT 3');
$query_for_berita->execute();
$data_of_berita = $query_for_berita->fetchAll();
for($x = 0; $x < sizeof($data_of_berita); $x++):
?>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<a href="isi-berita.php?id_berita=<?php echo $data_of_berita[$x]['id_berita']?>"><img class="card-img-top" style="height:200px" src="admin/foto/<?php echo $data_of_berita[$x]['foto'] ?> ?>" alt=""></a>
<h4 class="card-header"><?php echo $data_of_berita[$x]['judul']; ?></h4>
<div class="card-body">
<p class="card-text"><?php echo substr($data_of_berita[$x]['isi'], 0, 400); ?> ...</p>
</div>
<div class="card-footer">
<a href="isi-berita.php?id_berita=<?php echo $data_of_berita[$x]['id_berita']?>" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
<?php
endfor;
?>
</div>
0
13 Jawaban:
Bisa di sertakan juga screnshot websitenya? Mungkin cssnya tidak terpanggil
0
pas cobanya di 1 layar komputer apa gk? kalo beda layar komputer jadi berantakan berarti websitenya gk responsive
0
@metcore kayanya responsive deh gan dari classnya dia pake bootstrap tapi dari style guide nya kaya material design atau malah di gabung 22 nya :v
Di coba liat developer console nya gan. Tar keliaran error nya
1
@markeronly maksdunya developer console gimana mas , kurang ngerti
0
Di browsernya mas , coba CTRL + SHIFT + I atau F12 di windows , kalau di mac CMD+ALT+I
1
Kalau kasusnya kaya gitu emang sepertinya dari css nya mas, kalau itu php saya rasa web hosting sekarang sudah pada support sampe php 7.2 . Kalau sudah ada yg jadi boleh mas di share di sini situsnya itu
1
Kaya gini yang di mau mas ?
kalo iyaa sebaiknya perhatiin lagi mas struktur dari file html nya. Hanya kurang beberapa aja kok mas.
1
@markeronly iya mas , saya juga bingung di localhost ok ok aja pas di hosting kok jd gitu , biasanya itu masalah di div row nya yaa ?
0
Jawaban Terpilih
Iya mas @zulfiyanto itu masalah di bagian div class row aja .. Di liat lagi ya mas
Silahkan mas buat perbandingan aja
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="foto/main.png">
<script language='JavaScript'>
var txt="SDN 004 Samarinda Kota ";
var speed=200;
var refresh=null;
function action() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresh=setTimeout("action()",speed);}action();
</script>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
</head>
<body>
<style>
/*!
* Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
*/
body {
padding-top: 54px;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.portfolio-item {
margin-bottom: 30px;
}</style>
<br><br>
<!-- Navigation -->
<style type="text/css">
.navbar-custom {
color: #FFFFFF;
background-color: #CC3333;
}
/* Style The Dropdown Button */
.dropbtn {
background-color: #CC3333;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #CC0000;
}
</style>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark navbar-custom fixed-top" style="box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
<div class="container">
<a class="navbar-brand" href="index.php">SDN 004 SAMARINDA KOTA</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<div class="dropdown">
<button class="dropbtn">PROFIL</button>
<div class="dropdown-content">
<a class="dropdown-item" href="visimisi.php">VISI MISI</a>
<a class="dropdown-item" href="denah.php">DENAH SEKOLAH</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">INFORMASI</button>
<div class="dropdown-content">
<a class="dropdown-item" href="agenda.php?pg=1">AGENDA</a>
<a class="dropdown-item" href="hal-berita.php?pg=1">BERITA</a>
<a class="dropdown-item" href="guru.php">DATA GURU</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">GALERI</button>
<div class="dropdown-content">
<a class="dropdown-item" href="galeri.php">GALERI PHOTO</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="location.href = 'kontak.php';">KONTAK</button>
</div>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li> -->
</ul>
</div>
</div>
</nav>
<header>
</div>
</div>
<header>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" style=" width:100%; height: 400px !important;">
<div type="hidden" class="carousel-item active" >
<img class="d-block w-100" src="vendor/Untitled-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="admin/image/KELAS I LAMA.JPG" height="555" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="admin/image/perpus1.JPG" height="555" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="admin/image/UKS 1.JPG" height="555" alt="Second slide">
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<h1 class="my-4">Agenda</h1>
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Libur Nasional Hari Raya Nyepi</h4>
<div class="card-body">
<p class="card-text">Seluruh siswa SDN 004 Samarinda Kota dari kelas 1 sampai 6 akan di libur pada tanggal 17 Maret 2018 sampa tanggal .. ...</p>
</div>
<div class="card-footer">
<a href="isi-agenda.php?id_agenda=5" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Libur Nasional Tahun Baru Imlek</h4>
<div class="card-body">
<p class="card-text">Seluruh siswa SDN 004 Samarinda Kota dari kelas 1 sampai 6 akan libur pada tanggal 6 februari 2018 sampai tanggal ...</p>
</div>
<div class="card-footer">
<a href="isi-agenda.php?id_agenda=4" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Libur Tahun Baru</h4>
<div class="card-body">
<p class="card-text">Seluruh siswa SDN 004 Samarinda Kota dari kelas 1 sampai 6 akan di libur kan sampai dengan tanggal 2 Januari 2018 ...</p>
</div>
<div class="card-footer">
<a href="isi-agenda.php?id_agenda=3" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Section -->
<h1 class="my-4">Berita</h1>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<a href="isi-berita.php?id_berita=18"><img class="card-img-top" style="height:200px" src="http://sdn004smdkota.sch.id/admin/foto/5.png" alt=""></a>
<h4 class="card-header">afafafafaf</h4>
<div class="card-body">
<p class="card-text"><p>saas<span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span> ...</p>
</div>
<div class="card-footer">
<a href="isi-berita.php?id_berita=18" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<a href="isi-berita.php?id_berita=18"><img class="card-img-top" style="height:200px" src="http://sdn004smdkota.sch.id/admin/foto/1479096_905057036171741_2075598319123964041_n.jpg" alt=""></a>
<h4 class="card-header">afafafafaf</h4>
<div class="card-body">
<p class="card-text"><p>saas<span style="background-color: #ffffff; color: #626262;">dsdfffffffffffffffsdfsdfsdf sdfs</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span> ...</p>
</div>
<div class="card-footer">
<a href="isi-berita.php?id_berita=18" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<a href="isi-berita.php?id_berita=18"><img class="card-img-top" style="height:200px" src="http://sdn004smdkota.sch.id/admin/foto/6f25f-tutwurihandayani.png" alt=""></a>
<h4 class="card-header">afafafafaf</h4>
<div class="card-body">
<p class="card-text"><p>saas<span style="background-color: #ffffff; color: #626262;">sasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasdasd asdasdasdasdasdasdasdasdasdasd asdasdasdasdasd asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span><span style="background-color: #ffffff; color: #626262;">asdasdasdasdasd</span> ...</p>
</div>
<div class="card-footer">
<a href="isi-berita.php?id_berita=18" class="btn btn-primary">Selengkapnya</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<!-- /.row -->
<!-- Call to Action Section -->
<!-- /.container -->
<!-- Footer -->
<footer class="py-3 bg-dark">
<div class="container">
<div class="text-white" style="text-align:justify" >
<p><img style="float:left" src="foto/logo1.png" width="150px"><h5>SDN 004 Samarinda Kota</h5>JL.Pirus , Kel.Bugis , Kec. Samarinda Kota
<br>Samarinda, Kalimantan Timur</p></div>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
1
Saran saya setiap kita memanggi asset gunakan base url misal  ?>) css dan js juga, takutnya asset yang di panggil salah alamat jadi 404
2