TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Potřeboval bych pomoci s responsivní hlavičkou. Takhle by měla vypadat:
Popis: potřebuji udělat, aby se velikost hlavičky přizpůsobovala šířce, pokud by se jednalo o tablety některé části by úplně vypadly, u mobilních zařízeních by se nahradila úplně jinou hlavičkou
Už jsem se pokusil vyřešit problém, ale zdá se mi, že by se dal udělat i efektivněji. Hlavní problém mého návrhu je: poslední položka má řádkový zlom, celé menu není v jedné přímce.
body {
width:100%;
background-image: url('TetaWeb/Images/Index/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/*===========================
HEAD
=========================== */
.head{
background-color: red;
background: yellow;
width:80%;
margin: 0 auto;
overflow: hidden;
}
.head-logo {
float: left;
position: relative;
top: 20%;
width: 10.35%;
background-color: maroon;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding: 0.5vw;
text-align: center;
}
.head-logo a img{
width: 90%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.head-pictures{
vertical-align:top;
float:left;
margin-left:1.5vw;
}
.head-pictures img{
width: 7.9vw;
height: auto;
}
/*-------------------
head-categoris
------------------ */
.head-categoris{
display:inline-block;
vertical-align:top;
position: relative;
margin-left:1.5vw;
top: 2vw;
}
.head-categories-company{
background-color:green;
display: inline-block;
width: 3.64vw;
height: 6.25vw;
text-align: center;
}
.head-categories-school{
background-color:green;
display: inline-block;
width: 3.64vw;
height: 6.25vw;
text-align: center;
}
.head-categories-adult{
background-color:green;
display: inline-block;
width: 3.64vw;
height: 6.25vw;
text-align: center;
}
.head-categories-children{
background-color:green;
display: inline-block;
width: 3.64vw;
height: 6.25vw;
text-align: center;
}
/*-------------------
menu
------------------ */
.head-menu{
background-color: white;
position: absolute;
margin-left: 1%;
margin-top: -1%;
}
.head-menu ol{
margin: 0;
clear: left;
}
.head-menu ol li{
display: inline;
list-style: none;
margin-left: 1%;
font-size: 15px;
font-weight: 400;
}
.head-categories-menu-container{
float: left;
}
@media only screen and (max-width : 780px){
}
@media only screen and (max-width : 500px){
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="css/style-index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
<div class="head-logo">
<a href="myfile.htm"><img src="Images/Index/logo.gif"></a>
<p>OKO - vzdělávací a rozvojové centrum, o. s.</p>
</div>
<div class="head-categories-menu-container">
<div class="head-pictures">
<img alt="" src="Images/Index/index-head-picture.jpg">
<img alt="" src="Images/Index/index-head-picture.jpg">
<img alt="" src="Images/Index/index-head-picture.jpg">
</div>
<div class="head-categoris">
<div class="head-categories-company">
<p>školy</p>
</div>
<div class="head-categories-school">
<p>školy</p>
</div>
<div class="head-categories-adult">
<p>dospělí</p>
</div>
<div class="head-categories-children">
<p>školy</p>
</div>
</div>
<div class="head-menu">
<ol>
<li><a href="index.php">Úvod</a></li>
<li><a href="kariera.php">Kariéra</a></li>
<li><a href="bulletiny.php">Bulletiny</a></li>
<li><a href="clanky.php">Aktuality</a></li>
<li><a href="nasi_lektori.php">Náš tým</a></li>
<li><a href="nasi_partneri.php">Naši partneři</a></li>
<li><a href="reference.php">Reference</a></li>
<li><a href="fotogalerie.php">Fotogalerie</a></li>
<li><a href="kontakt.php">Kontakt</a></li>
</ol>
</div>
</div>
</div>
</body>
</html>
Nahlásit jako SPAM
IP: 194.12.44.–
Zjistit počet nových příspěvků
