Jak ustawić inaczej divy?

pytanie zadane 23 lutego 2017 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)

Kolejny problem. Otóż chcę ustawić diva notetext pod divem notetittle, a notetittle niech będzie pod divem navbar :D

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
  font-family: 'Josefin Sans', sans-serif;
}

.left, .right
{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{
  display: flex;
  flex-flow: row nowrap;
}

.wrapper
{
  flex: 1;
  min-width: 1000px;
}

.title
{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 250px;
}

.navbar
{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.navbar-link
{
  height: 50px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  cursor: pointer;
  clear: both;
}

.note
{
  display: flex;
  min-height: 400px;
  background-color: grey;
}

.footer
{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

.notetittle
{
	background-color: green;
	height: 50px;
	width: 1000px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 30px;
}

.notetext
{
	background-color: red;
	height: 10px;
	width: 1000px;
	font-family: 'Lato', sans-serif;
	margin-top: 50px;
}


<html lang="pl">
<head>
    <title>Redaktor Seed1212 </title>
     
    <meta name="description" content="Redaktor Seed1212 - czyli co Seed sądzi o tym i o tam tym!" />
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" tyle="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
     
    <script src="timer.js"></script>
</head>
<body>
	<div class="container">
		<div class="left"></div>
		<div class="wrapper">
		<div class="topbar">
			<div class="title">
				<img src="seed.png" width="1000" height="250" /> 
			</div>
			<nav class="navbar">
				<div class="navbar-link">Strona główna</div>
				<div class="navbar-link">Kontakt</div>
				<div class="navbar-link">O mnie</div>
			</nav>
		</div>
		<div class="note">
			<div class="notetext">notetext
				<div class="notetittle">notettile</div>
			</div>
		</div>
			<footer class="footer">footer</footer>
		</div>
		<div class="right"></div>
	</div>
</body>
 
</html>

2 odpowiedzi

odpowiedź 23 lutego 2017 przez Typowy Janusz Dyskutant (8,150 p.)

Poczytaj o pozycjach w css.

http://webkod.pl/kurs-css/lekcje/dzial-1/pozycja-relatywna-absolutna-ustalona

komentarz 23 lutego 2017 przez zgrybus Pasjonat (24,860 p.)

ale po co ma poczytać o pozycjach? Struktura HTML moim zdaniem jest problemem. Robi rzeczy na siłę :)

komentarz 23 lutego 2017 przez Typowy Janusz Dyskutant (8,150 p.)

Ogólnie to masz "makaron" w tej strukturze html. Po pierwsze w znaczniku nav umieszcza się znaczniki nawigacyjne (menu) a ty masz tam powkładane divy, które chyba miały linkować do podstron strony ale chyba coś nie wyszło. Po drugie wszędzie używasz klas co jest złym nawykiem i nieraz może ci to przysporzyć wielu problemów. Powinieneś używać klas do elementów strony które nie są unikalne, np. jeśli masz jeden baner na stronie wrzucasz go do diva, który nie ma klasy tylko id.

Ogólnie polecam zapoznać się ze strukturą HTML 5 i jednak poczytać o pozycjach css bo to ważna rzecz.

Pozdrawiam!

komentarz 24 lutego 2017 przez zgrybus Pasjonat (24,860 p.)

@TypowyJanusz

No jak chcesz uczyć to polecam jednak poczytać. Nie stylujemy NIGDY po ID ( śmieszne, że jeszcze o tym nie wiesz :D ). A po co ma poczytać o tych pozycjach? Ma złą strukturę HTML i przez to nie wyświetli tej rzeczy tam gdzie chce ( na siłę nie ma co dla tak małego projektu ).

odpowiedź 23 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

zmień kolejność na:

<div class="note">

<div class="notetittle">notettile</div>
<div class="notetext">notetext</div>
</div>

i wywal

display: flex;

komentarz 25 lutego 2017 przez Mateusz Bogumił Obywatel (1,380 p.)

Po zrobieniu tak jak mówisz strona mi się zrypała i footer jest w prawym górnym rogu

komentarz 26 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

Nie wiem co tam zrobiłeś, ale jak zrobisz jak ja to nic się nie zrypie:

<html lang="pl">
<head>
<title>Redaktor Seed1212 </title>

<meta name="description" content="Redaktor Seed1212 - czyli co Seed sdzi o tym i o tam tym!" />
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" tyle="text/css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&subset=latin-ext" rel="stylesheet">

<script src="timer.js"></script>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="wrapper">
<div class="topbar">
<div class="title">
<img src="seed.png" width="1000" height="250" /> 
</div>
<nav class="navbar">
  <div class="navbar-link">Strona gwna</div>
  <div class="navbar-link">Kontakt</div>
  <div class="navbar-link">O mnie</div>
</nav>
</div>
  <div class="note">
    <div class="notetittle">notettile</div>
    <div class="notetext">notetext
  </div>
</div>
<footer class="footer">footer</footer>
</div>
<div class="right"></div>
</div>
</body>

</html>

* {
box-sizing: border-box;
margin: 0;
padding:0;
font-family: 'Josefin Sans', sans-serif;
}

.left, .right
{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}

.container{
display: flex;
flex-flow: row nowrap;
}

.wrapper
{
flex: 1;
min-width: 1000px;
}

.title
{
display: flex;
justify-content: center;
align-items: center;
height: 250px;
}

.navbar
{
width: 100%;
display: flex;
flex-flow: row nowrap;
}

.navbar-link
{
height: 50px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
cursor: pointer;
clear: both;
}

.note
{
min-height: 400px;
background-color: grey;
}

.footer
{
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}

.notetittle
{
background-color: green;
height: 50px;
width: 1000px;
text-align: center;
font-size: 40px;
font-weight: bold;
margin-bottom: 30px;
}

.notetext
{
background-color: red;
height: 10px;
width: 1000px;
font-family: 'Lato', sans-serif;
margin-top: 50px;
}