[HTML]Problem z tłem diva

pytanie zadane 6 maja 2016 w HTML i CSS przez domi10052 Obywatel (1,180 p.)
edycja 6 maja 2016 przez domi10052

Witam!

Mam kolejny problem tym razem z tłem div'a

tak powinno być:

Nie dziala

a jest tak:

NIe dziala

a to jest kod CSS:

body
{
	font-family: 'Ubuntu Mono';
}

#logo
{
	opacity: 0.7;
	margin-left: auto;
	margin-right: auto;
}

#menu
{
	width: 725px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.7;
	background-color: black;
	padding: 10px;
	height: 10px;
}

.switch
{
	color: white;
	font-size: 20px;
	float: left;
	background-color: black;
	padding: 10px;
	margin-left:  20px;
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(1.jpg) no-repeat;
    background-size: cover; 
}

Kod HTML:


<!DOCTYPE HTML>
<html lang = "pl">
	<head>
		<meta charset="utf-8" />
		<title>Gry Blizzarda</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<video autoplay loop poster="img/1.jpg" id="bgvid">
			<source src="img/wlocznia.webm" type="video/webm">
			<source src="img/wlocznia.mp4" type="video/mp4">
		</video>
		<center>
			<img id="logo" src="img/2.png"/>
		</center>
		<div id="container">
			<center>
			
				<img src="img/pasek.png" style="opacity: 0.7" />
			</center>
				<div id="menu">
						<div class="switch">
							Strona glowna
						</div>
						
						<div class="switch">
							Strategie
						</div>
						
						<div class="switch">
							Filmy
						</div>
						
						<div class="switch">
							Nowości
						</div>
				</div>
				
			</center>
		</div>
		
	</body>
</html>

komentarz 6 maja 2016 przez CzikaCarry Szeryf (75,340 p.)

Daj resztę plików to postaram się Ci pomóc! Nawet nie wiemy który to div ;/

komentarz 6 maja 2016 przez domi10052 Obywatel (1,180 p.)

Po co ci reszta? reszta to tylko png i webm a ten div to menu i switch.

komentarz 6 maja 2016 przez CzikaCarry Szeryf (75,340 p.)

Skopiowałem kod css i html do plików na moim komputerze, podlinkowałem i odpaliłem. Widzę pustą stronę(prawie pustą, 3 napisy... no dobra, 4 :D). O który div ci chodzi dokładnie?

komentarz 6 maja 2016 przez domi10052 Obywatel (1,180 p.)

ok zdjęcia ci dam ale filmu nie wiem gdzie dać bo na tym hostingu nie mozna .webm

komentarz 6 maja 2016 przez CzikaCarry Szeryf (75,340 p.)

Okej

4 odpowiedzi

odpowiedź 6 maja 2016 przez mbabane Szeryf (79,260 p.)
wybrane 6 maja 2016 przez domi10052

Najlepsza

zdaje sie ze to przez padding menu, mozna zwiekszyc np. wysokosc.

A i przez float: left switcha tez.

mozna np. zrobic tak (bez definiowania wysokosci menu; jednak nei wiem czy jest to optymalny sposob, ale na ta chwile nie znam innego, procz jeszcze zwiekszenia wysokosci menu):

  <div id="menu">
       <div class="switch">
         Strona glowna
       </div>
                         
       <div class="switch">
         Strategie
       </div>
                         
       <div class="switch">
          Filmy
       </div>
                         
       <div class="switch" id="last">
         Nowości
       </div>
		
       <div class="clearBoth"></div>
 </div>

--------------------------------------------------------

#menu
{
  width: 725px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
  background-color: black;		
}
		 
.switch
{
  color: white;
  font-size: 20px;
  float: left;
  background-color: black;
  padding: 10px;
  margin-left:  20px;
}

.clearBoth
{
  clear: both;
}

a i nie uzywaj znacznika </center>. Centrowanie powinno sie robic w css poprzez margin-left: auto; margin-right: auto;

komentarz 6 maja 2016 przez domi10052 Obywatel (1,180 p.)

tylko png nie chce mi się centrować przez auto działa tylko przez center ;/

komentarz 6 maja 2016 przez mbabane Szeryf (79,260 p.)

w css, dla obrazka, ustaw display: block; i potem margin-left: auto; margin-right: auto; lub jesli div zawiera tylko obrazek to text-align: center; dla ustawien css tego diva.

komentarz 7 maja 2016 przez domi10052 Obywatel (1,180 p.)

dzięki :)

odpowiedź 6 maja 2016 przez nerdxg Obywatel (1,760 p.)

odpowiedź 6 maja 2016 przez bartek7910 Obywatel (1,980 p.)
edycja 6 maja 2016 przez bartek7910

Usuń w css wysokość diva #menu, a w pliku html dodaj

<div style="clear:both;"></div>

bezpośrednio za ostatnim divem o klasie switch, ale jeszcze wewnątrz diva menu.

Zamiast dodawać w kodzie strony dodatkowego diva możesz też to zrobić w css>

#rodzic:after {
  content:'';
  display:block;
  clear:both;
}

Możesz o tym poczytać tutaj http://webkod.pl/kurs-css/lekcje/dzial-1/kilka-blokowych-elementow-html-obok-siebie

komentarz 6 maja 2016 przez bartek7910 Obywatel (1,980 p.)

Lub jeszcze fajniejsze rozwiązanie z overflow:

#menu
{
    width: 725px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.7;
    background-color: black;

    overflow:auto;
    height:auto
 }

Więcej tutaj https://kurs.browsehappy.pl/CSS/Float