header i nav obok siebie - problem

pytanie zadane 13 lutego 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)
zmienione kategorie 13 lutego 2017 przez Arkadiusz Waluk

<body>
<section id="logo">
	<header>
		<img src="logo.png" alt="logo" width="60px" height="50px">
		<h1>Web design</h1>
		<div style="clear:both;"></div>
		<h2>Projketowanie stron internetowych<h2>
		</header><nav>
	<a href="#">sdfsdfsd</a>
	</nav>
</section>



</body>

body
{
	background: black;
	color: white;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
section#logo
{
	height:60px;
	width:100%;
}
section#logo header
{
	height:100%;
	width:50%;
	text-align:left;
	background: red;
	position:relative;
	top:0;
	display:inline-block;
}
section#logo header img
{
	float:left;
	position:relative;
	top:2px;
	margin:0;
	padding:0;
}
section#logo header h1
{
	display:block;
	font-size:30px;
	float:left;
	margin:0;
	padding:0;
	position:relative;
	top:2px;
	left:0px;
	margin-top:-3px;
}
section#logo header h2
{
	display:block;
	font-size:16px;
	position:relative;
	top:0px;
	left:0px;
	margin:0;
	padding:0;
	margin-top:-17px;
}
section#logo nav
{
	display:inline-block;
	width:50%;
	height:100%;
	background:blue;
	text-align:right;
	margin:0;
	padding:0;
}

Niby wyświetla mi bloki obok siebie ale nav jest oddalone od górnej krawędzi, nie mam pomysłu co jest nie tak. Z float:left działa, ale nie chcę go używać.

Usuwając link z nav na dół ucieka header.

Może ktoś pomóc?

komentarz 13 lutego 2017 przez surfeliza Stary wyjadacz (11,260 p.)

Nie zamknąłeś znacznika h2 . Kolega z kodem poniżej to samo.

komentarz 13 lutego 2017 przez maciek77 Użytkownik (830 p.)

to nic nie zmienia ;/

komentarz 13 lutego 2017 przez surfeliza Stary wyjadacz (11,260 p.)

I nie zmieni bo brakuje konsekwencji - obrazek masz przy użyciu float, a pozostałe elementy na inline-block. Ustawienie nawigacji na float: right powinno załatwić sprawę podobnie jak usunięcie obrazka. Dodatkowo warto przeczytać kiedy stosować jedno, a kiedy drugie i jakie są różnice.

1 odpowiedź

odpowiedź 13 lutego 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)
edycja 13 lutego 2017 przez `Krzychuu

<body>
<section id="logo">
    <header>
        <img src="logo.png" alt="logo" width="60px" height="50px">
        <h1>Web design</h1>
        <h2>Projketowanie stron internetowych</h2>
      </header><nav>
    <a href="#">sdfsdfsd</a>
    </nav>
</section>
 
</body>

body
{
    background: black;
    color: white;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
section#logo
{
    height:60px;
    width:100%;
}
section#logo header
{
    height:100%;
    width:50%;
    text-align:left;
    background: red;
    position:relative;
    top:0;
    display:inline-block;
}
section#logo header img
{
    float:left;
    position:relative;
    top:2px;
    margin:0;
    padding:0;
}
section#logo header h1
{
    display:block;
    font-size:30px;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    top:2px;
    left:0px;
    margin-top:-3px;
}
section#logo header h2
{
    display:block;
    font-size:16px;
    position:relative;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
}
section#logo nav
{
    display:inline-block;
    width:50%;
    height:100%;
    background:blue;
    text-align:right;
    margin:0;
    padding:0;
}

Powinno działać :)

komentarz 13 lutego 2017 przez maciek77 Użytkownik (830 p.)

niestety ale nie działa

komentarz 13 lutego 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

<section id="logo">
    <header>
        <img src="logo.png" alt="logo" width="60px" height="50px">
        <h1>Web design</h1>
        <div style="clear:both;"></div>
        <h2>Projketowanie stron internetowych</h2>
        </header><nav>
    <a href="#">sdfsdfsd</a>
    </nav>
</section>
 
</body>

body
{
    background: black;
    color: white;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
section#logo
{
    height:60px;
    width:100%;
}
section#logo header
{
    height:100%;
    width:50%;
    text-align:left;
    background: red;
    position:relative;
    top:0;
    display:inline-block;
}
section#logo header img
{
    float:left;
    position:relative;
    top:2px;
    margin:0;
    padding:0;
}
section#logo header h1
{
    display:block;
    font-size:30px;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    top:2px;
    left:0px;
    margin-top:-3px;
}
section#logo header h2
{
    display:block;
    font-size:16px;
    position:relative;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    margin-top:-17px;
}
section#logo nav
{
	position: absolute;
    display:inline-block;
    width:50%;
    height:60px;
    background:blue;
    text-align:right;
    margin:0;
    padding:0;
}