MENÜWebáruházunk logóját egy div-be ágyazva helyezzük el az fejlécben, balra úsztatva.
Az áruház nevét Google font felhasználásával dobjuk fel.
Árnyék segítségével tesszük egy kicsit érdekesebbé a hátteret.
1. Példa:
Forráskód
...<style type="text/css">
- {margin:0; padding:0;}
#tarolo {position:relative; display:block; min-height:100%; width:100% }
#fejlec {position:absolute; display:block; top:0; left:0;
height:50px; width: 100%; background-color:#662210; color:#ffddcc;}
#menu {position:absolute; display:block; top: 50px; left: 0;
height:30px; width: 100%; text-align:center;
background-color:#aa2210; color:#ffddcc;}
#balmenu {position:absolute; display:block; top:80px; left:0;
height:290px; width:100px; ...}
#tartalom {position:absolute; display:block; top:80px; left:100px;
background-color:#ffddcc; color:#662210; padding-bottom:40px; }
</style> ....
<body>
<div id="tarolo">
<header id="fejlec"> Webáruház neve és lógója </header>
<nav id="menu">Termkek | Vásárlás... </nav>
<div id="tartalom"><p> Az oldal tartalma ... </p>
</div>
<div id="balmenu"> <br> <b>Kínálat</b> ...
</div>
</div>
</body> Eredmény*
2. Példa:
Forráskód
...
<link href='https://fonts.googleapis.com/css?family=Finger+Paint' rel='stylesheet' type='text/css'>
<style type="text/css">
#fejlec {position:absolute; display:block; top: 0; left: 0;
height:50px; width: 100%; background-color:#662210; color:#ffddcc;
box-shadow: 0px 2px 5px 0px #441108, 0px 12px 15px 0px #441108 inset;
font:20px/34px 'Finger Paint', cursive;}
#logo { float:left; margin: 5px 15px 5px 5px; }
</style> ....
<body>
....
<header id="fejlec">
<div id="logo">
<img src="kosar_40.png" alt="Demo webáruház logó" height="40" width="40" />
</div>Demó webáruház
</header>
....
</body> Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_fejlec_2.html