Witam Wszystkich!
Mam taki problem, muszę zrobić tak, żeby menu było obok logo (po prawej stronie). Myślałem, że uda mi się to zrobić przy użyciu float:left dla class="navigation-menu". Co robię źle?
<!DOCTYPE html> <html lang="pl"> <head> <link rel ="stylesheet" href="style.css" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl"> </head> <body> <header class = "page-header"> <nav class="page-nav"> <div id="logo"> <img src="logo.png" class="img"> </div> <ul class="navigation-menu"> <li><a href="#" title="Bieżace informacje"> Aktualności</a></li> <li><a href="#" title="Nasze produkty"> Produkty</a></li> <li><a href="#" title="Branże"> Branże</a></li> <li><a href="#" title="Branże"> Branże</a></li> <li><a href="#" title="Referencje"> Referencje</a></li> <li><a href="#" title="Kontakt z Nami"> Kontakt </a></li> </ul> </header> <div id="content"> <div id="left"> </div> <div id="center"> </div> <div id="right"> </div> <div style="clear:both"></div> </div> </body> </html>
body{
max-width:1366px;
max-height:1920px;
margin:0;
padding:0;
font-family: 'Roboto', sans-serif;
}
.page-nav {
width:100%;
height:88px;
background-color:#053f58;
}
.page-nav .navigation-menu {
list-style:none;
padding: 0;
margin:0;
width:100%;
text-align:center;
text-decoration:none;
padding-top: 20px;
}
.page-nav .navigation-menu li {
font-size:20.83px;
display:block;
display:inline;
list-style:none;
margin:0;
padding:15px;
white-space: nowrap;
}
.page-nav .navigation-menu li a {
color: #FFFFFF;
text-decoration:none;
}
#content{
width: 100%;
}
#left{
background-color:red;
width:23%;
height:1343px;
float:left;
}
#center{
float:left;
background-color:black;
width:54%;
height:1343px;
}
#right{
float:left;
background-color:yellow;
height:1343px;
width:23%;
}
#logo{
width:260px;
height: 186px;
background-color:#FFFFFF;
text-align:center;
box-shadow:50%;
position: relative;
margin-top:0;
margin-left:23%;
}
.img{
margin-top:20px;
}