• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Divy nie chcą się ustawiać w szeregu

0 głosów
556 wizyt
pytanie zadane 21 marca 2017 w HTML i CSS przez leemish Użytkownik (780 p.)

Cześć, 

Mam problem z szeregowym ustawieniem Div'ów na stronie. Gdyby ktoś był tak miły i zechciał wprowadzić korektę w kodzie  :) docelowo chciałbym aby menu znalazło się po prawej stronie od logo.

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="galeria.js"></script>
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	
</head>

<body>

	<div class:"container">
	
		<div class:"logo">
			<img src="img/logo.svg" alt="LOGO" />  
		</div>
		
		<div class:"menu">
			<ul id="mainmenu">
			<li><a href="#">O mnie</a></li>
			<li><a href="#">Curiculum Vitae</a></li>
			<li><a href="#">Moje Realizacje</a><i class="arrow"></i>
			<ul>
            <li><a href="#">Kościół</a></li>
            <li><a href="#">Chata 1</a></li>
            <li><a href="#">Chata 2</a></li>
			</ul>
			<li><a href="#">Kontakt</a></li>
			</ul>
		</div>
	
		<div class:"content">
		
		lorem ipsum
		
		</div>
	
	</div>


</body>
.container
{
width: 1000px;
}

.logo
{
	float:left;
}
.menu
{
	width: 50%
	text-align: center;
	color: gray;
	text-decoration: italic;
	float: left;
	margin-left: auto;
	margin-right: auto;
}

.content
{
	width: 900px;
	border: dashed;
	border: 5px;
	font-size: 14px;
	clear: both;
}

#mainmenu, #mainmenu ul {list-style: none; margin: 0; padding: 0;}
#mainmenu ul {width: 160px;}
#mainmenu ul li {clear: both;}
#mainmenu > li {float: left; margin-right: 10px; position: relative;}
#mainmenu > li li {position: relative;}
#mainmenu > li ul {position: absolute; left: 0;}
#mainmenu > li ul li ul {position: absolute; left: 160px; top: 0px;}
ul ul {display: none;}
ul li:hover > ul {display: block;}

/*POZIOM 1*/
#mainmenu {margin: 50px 50px; font-family: calibri; tahoma, arial;}
#mainmenu > li > a {padding: 8px; border-radius: 3px; text-align: center; text-decoration: none; color: #84c5f7;}
#mainmenu > li:hover > a {background: #eee; color: #0090ff;}

/*POZIOMY NIŻSZE*/
#mainmenu ul {font-size: 12px; border-radius: 3px; background: #eee;}
#mainmenu ul li > a {color: #999; display: block; padding: 5px; border-radius: 3px; text-decoration: none;}
#mainmenu ul li:hover > a {color: #eee; background: #aaa;}

 

komentarz 21 marca 2017 przez xmentor Nałogowiec (49,520 p.)

Dziwne te twory:

class:"container"

 

3 odpowiedzi

0 głosów
odpowiedź 21 marca 2017 przez Filip2248 Dyskutant (8,840 p.)

W html'u zapisuje się: class="logo", a nie class: "logo".

0 głosów
odpowiedź 21 marca 2017 przez imklau Nałogowiec (42,090 p.)
jak usuniesz te dziwne poziomy w CSS to logo będzie obok menu
po co Ci tak css rozpisany? powtarza się przecież stylowanie, już pomijam to, że klas powinieneś używać do stylowania
komentarz 21 marca 2017 przez imklau Nałogowiec (42,090 p.)

a dokładniej ten kod w "poziomie 1":

#mainmenu {margin: 50px 50px; font-family: calibri; tahoma, arial;}

jak usuniesz margin to menu ląduje koło logo

0 głosów
odpowiedź 21 marca 2017 przez leemish Użytkownik (780 p.)
mimo usunięcia margin menu nadal ustawia się pod logo
komentarz 21 marca 2017 przez imklau Nałogowiec (42,090 p.)
a poprawiłeś zapisy w html? bo nie ma czegoś takiego jak class:""
powinno być class=""

Podobne pytania

0 głosów
1 odpowiedź 476 wizyt
0 głosów
2 odpowiedzi 907 wizyt

93,735 zapytań

142,672 odpowiedzi

323,294 komentarzy

63,297 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...