WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Fejlécvariáció 1



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='http://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