Responsivní hlavička – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Responsivní hlavička – CSS – Fórum – Programujte.comResponsivní hlavička – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Pavel
~ Anonymní uživatel
265 příspěvků
17. 6. 2015   #1
-
0
-

Potřeboval bych pomoci s responsivní hlavičkou. Takhle by měla vypadat: 

Připojen obrázek.

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.–
Reklama
Reklama
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Problém s responsivní tabulkou — založil týpek co neví

Hlavička — založil Martin

Hlavička — založil Levin

MPEG hlavička — založil Parcus

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý