Mam do zrobienia psd z załącznika, jak zrobić by główny blok o szer 1172 px był na środku jeśli szerokość strony jest większy niż 1172px a przy tym by na bokach były kolory jak na psd?
BODY {
background-color:green;
}
#glowny_blok {
max-width:1172px;
margin:auto;
}
mam taki kod main.scss i mi nie dziala
* {
box-sizing: border-box;
}
nav {
max-width: 1172px;
padding: 0;
height: 85px;
color: #ffffff;
margin: auto;
.logo {
margin: 23px 0;
}
}
.first-section {
height: 466px;
background-color: #215398;
.heading {
margin-top: 60px;
height: 52px;
color: #ffffff;
}
.heading-two {
height: 65px;
color: #5f83b5;
margin-top: 0;
}
.divs {
height: 228px;
}
}
a to html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container"></div>
<div class="row">
<nav>
<img src="img/logo.jpg" class="logo" alt=""></a>
</nav>
</div>
<div class="row first-section">
<h1 class="heading text-center">Heading</h1>
<h2 class="heading-two text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<div class="col-sm divs">
One of three columns
</div>
<div class="col-sm divs">
One of three columns
</div>
<div class="col-sm divs">
One of three columns
</div>
</div>
<div class="row">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>
poprawiłem jednak pojawia mi się padding 12px w nav i cała reszta strony ma szerokość 1172px a nie tylko nav.
kod html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<nav>
<img src="img/logo.jpg" class="logo" alt=""></a>
</nav>
</div>
<div class="row first-section">
<h1 class="heading text-center">Heading</h1>
<h5 class="heading-two text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
<div>
<div class="col-sm divs">
One of three columns
</div>
<div class="col-sm divs">
One of three columns
</div>
<div class="col-sm divs">
One of three columns
</div>
</div>
</div>
<div class="row">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>
css
* {
box-sizing: border-box;
}
nav {
padding: 0;
max-width: 1172px;
height: 85px;
color: #ffffff;
margin: auto;
.logo {
margin: 23px 0;
}
}
.first-section {
height: 466px;
background-color: #215398;
padding-bottom: 60px;
.heading {
margin-top: 60px;
height: 52px;
color: #ffffff;
font-family: 'arial regular';
}
.heading-two {
height: 65px;
color: #5f83b5;
margin-top: 0;
font-family: 'arial regular';
}
.divs {
height: 228px;
max-width: 330px;
padding: 0;
margin: 0 8.5px;
}
}
W takim razie co ma być wyśrodkowane? Całość czy tylko nav
?
Jeśli całość, to wszystko możesz wpakować do diva z klasą .container
czyli
HTML:
<body>
<div class="container">
<div class="row">
<nav></nav>
</div>
<div class="row">
<!-- inne elementy -->
</div>
</div>
</body>
CSS
.container{
max-width: 1172px;
margin: 0 auto;
}
Jeśli tylko nav
, to możesz to zrobić np tak:
HTML:
<body>
<div class="container">
<div class="row">
<nav></nav>
</div>
</div>
<div class="some_class">
<!-- inne elementy -->
</div>
</body>
CSS
.container{
max-width: 1172px;
margin: 0 auto;
}
A te marginy to albo są predefiniowane przez przeglądarkę, albo narzuca je bootstrap
Zawsze warto dorzucić jakiś reset styli dla przeglądarek.
Najlepiej wrzuć jakąś grafikę pokazującą, jak ma to wyglądać.
Potrzebujesz na ten nagłówek dwóch elementów:
<div id="naglowek_zewnetrzny">
<div id="naglowek_wewnetrzny">
...
</div>
</div>
#naglowek_zewnetrzny {
widht:100%;
background-color:#215398;
}
#naglowek_wewnetrzny {
widht:100%;
max-width: 1172px;
margin: auto;
height:123px;
}
BODY też musi mieć 100% szerokość, nie wrzucaj tego nagłówka w żadne dodatkowe kontenery.
nie rozumiem, chodzi mi o to, że ta część z logiem by była na 1172px i w środku jak na obrazku, reszta też w środku, ale tam kolory są po bokach, i w moim kodzie jak ustawiam nav na 1172 to mam całą stronę na taką szerokość
Napisałam ci jak zrobić nagłówek o maksymalnej szerokości i z marginesami na całą szerokość.
Resztę strony sobie ustawiasz wo osobnym DIV i dajesz mu takie max-widt, jakie sobie życzysz.
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.