Dopiero zaczynam swoją przygodę z pisaniem stron. Stworzyłem sobie prosty layout i niestety podczas przybliżania lub oddalania wszystko się rozjeżdża. Jest w stanie ktoś powiedzieć mi co jest źle? Tutaj kod:
CODE
<!doctype html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<meta name='viewport' content='width=device-width, initial-stale = 1'>
<style>
.cialko{
background-color: skyblue;
}
.kontener {
Left: 50px;
width: 1000px;
background-color: #723132;
}
.czcionka-lewa{
padding-top: 4px;
padding-bottom: 3px;
font-size: 20px;
}
.col-1 {
float: left;
width: 200px;
background-color: #086813;
text-align: center;
}
.col-2 {
float: left;
width: 350px;
background-color: #A25758;
text-align: center;
font-size: 22px;
}
.col-3 {
float: left;
width: 100px;
background-color: #1B4198;
text-align: center;
font-size: 11px;
}
.col-4 {
float: left;
width: 340px;
background-color: #AD0087;
text-align: center;
font-size: 22px;
}
.przyciskiww{
width: 100px;
background-color: #550001;
text-align: center;
vertical-align: middle;
border-radius: 10px;
text-transform: uppercase;
margin-top: 4px;
margin-bottom: 4px;
letter-spacing: 1px;
border: 2px solid #494949;
color: #A00305;
transition: all 0.3s linear;
}
.dotred {
height: 20px;
width: 20px;
margin-top: 2px;
margin-bottom: 2px;
background-color: red;
border-radius: 50%;
display: inline-block;
border: 2px solid;
}
</style>
</head>
<body class='cialko'>
<div class="kontener">
<div class="col-1"><div class="czcionka-lewa">Pierwszy</div>
</div>
<div class="col-2">
<a href='/AAB'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAC'><button class='przyciskiww'>Po</button></a>
</div>
<div class="col-1"><div class="czcionka-lewa">Drugi</div>
</div>
<div class="col-2">
<a href='/AAD'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAE'><button class='przyciskiww'>Po</button></a>
</div>
<div class="col-1"><div class="czcionka-lewa">Trzeci</div>
</div>
<div class="col-2">
<a href='/AAF'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAG'><button class='przyciskiww'>Po</button></a>
</div>
</div>
</body>
</html>
<html lang="pl-PL">
<head>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<meta name='viewport' content='width=device-width, initial-stale = 1'>
<style>
.cialko{
background-color: skyblue;
}
.kontener {
Left: 50px;
width: 1000px;
background-color: #723132;
}
.czcionka-lewa{
padding-top: 4px;
padding-bottom: 3px;
font-size: 20px;
}
.col-1 {
float: left;
width: 200px;
background-color: #086813;
text-align: center;
}
.col-2 {
float: left;
width: 350px;
background-color: #A25758;
text-align: center;
font-size: 22px;
}
.col-3 {
float: left;
width: 100px;
background-color: #1B4198;
text-align: center;
font-size: 11px;
}
.col-4 {
float: left;
width: 340px;
background-color: #AD0087;
text-align: center;
font-size: 22px;
}
.przyciskiww{
width: 100px;
background-color: #550001;
text-align: center;
vertical-align: middle;
border-radius: 10px;
text-transform: uppercase;
margin-top: 4px;
margin-bottom: 4px;
letter-spacing: 1px;
border: 2px solid #494949;
color: #A00305;
transition: all 0.3s linear;
}
.dotred {
height: 20px;
width: 20px;
margin-top: 2px;
margin-bottom: 2px;
background-color: red;
border-radius: 50%;
display: inline-block;
border: 2px solid;
}
</style>
</head>
<body class='cialko'>
<div class="kontener">
<div class="col-1"><div class="czcionka-lewa">Pierwszy</div>
</div>
<div class="col-2">
<a href='/AAB'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAC'><button class='przyciskiww'>Po</button></a>
</div>
<div class="col-1"><div class="czcionka-lewa">Drugi</div>
</div>
<div class="col-2">
<a href='/AAD'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAE'><button class='przyciskiww'>Po</button></a>
</div>
<div class="col-1"><div class="czcionka-lewa">Trzeci</div>
</div>
<div class="col-2">
<a href='/AAF'><button class='przyciskiww'>Przed</button></a>
</div>
<div class="col-3">
<span class="dotred"></span>
</div>
<div class="col-4">
<a href='/AAG'><button class='przyciskiww'>Po</button></a>
</div>
</div>
</body>
</html>