0
Web sayfamı dört eşit parçaya ayırmaya çalışıyorum. Ben çevrimiçi bazı ipuçları bulduk aşağıdakileri yapmak için söyledi vardı:Boşluktan kurtulmak için yardıma ihtiyacınız var CSS
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
div {
width: 50%;
height: 50%;
float: left;
}
sorun Böyle yapınca ben kurtulmak istediğiniz her resmin sağına siyah alana sahip olduğunu. Kalan floattan kurtulmayı denedim, ancak sayfa artık 4 parçaya bölünmedi. Nasıl bir resim ile her div resmi ile tamamen doldurulur?
body {
\t background-color: black;
}
.next {
\t color: #995c00;
\t vertical-align: center;
}
h1 {
\t color: #995c00;
\t font-family: Garamond ;
\t font-size: 50px;
\t text-align: center;
display:table-cell;
vertical-align:middle;
}
h2 {
\t color: #995c00;
\t font-family: Garamond;
}
ul {
\t color: #995c00;
\t font-family: Garamond;
}
/*body {
position: fixed;
top: 35%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}*/
.result-section{
\t color: #995c00;
\t font-family: Garamond ;
}
html, body { height: 100%; min-height:100%; padding: 0; margin: 0; }
#div1 {width:50%;
height:50%;
float:left;
position:relative;
}
#div2 { background-image: url(pictures/drums.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}
#div3 { background-image: url(pictures/keyboard.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}
#div4 { background-image: url(pictures/mixer_2.jpg);
\t \t background-repeat:no-repeat;
background-size:contain;
width:50%;
height:50%;
float:left;
position:relative;
}<!DOCTYPE html>
<html lang="en">
<head>
<TITLE>2016 Grammy Quiz</TITLE>
<meta charset="utf-8"/>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="div1">
<div id = 'container'>
<h1> 2016 Grammy Quiz</h1>
<h2 id='questionTitle'> </h2>
<ul id ='selectionList'> </ul>
<button type="button" class = 'next'> Next </button>
<section class="result-section" style="display: none;">
<h2 class="text"> Final Score </h2>
<h3 class="text" id="finalScore">10/10</h3>
<div id="result_msg"></div>
<button class="start-button" id="tryagain">Try Again</button>
</section>
</div>
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Pls kodunu güncellemek ve boşluk gösteriyoruz resimleri ekleyin. Üzerinde çalışacağım. – Dev
Kodunuzu, çevrimiçi olarak barındırılan resimlerle güncelleyebilmeniz için, gördüğünüz şeyi görebilmemiz açısından yararlı olur. Yayınladığınız şeyle, arka plan resimlerinin sorun mu olduğunu veya taşkın DIV'leri mi olduğunu söylemek mümkün değildir. Ayrıca, bu sorunu hangi işletim sisteminde gördüğünüzü ve tarayıcınızı bilmek iyi olur. – Angelique