Tblzatos oldalmodul kdja Brmilyen tpus oldalhoz
|
<table cellpadding="0" cellspacing="0" width="350" class="tablazatkod">
<tbody>
<tr>
<td class="fej"> Oldals tblzatkd </td>
</tr>
<tr>
<td class="tor">
Ad qui munere ceteros, te cum suas accommodare philosophia, an iriure senserit, munere ceteros, te cum suas accommodare philosophia, an iriure senserit… Ad qui munere ceteros, munere ceteros, te cum suas accommodare philosophia…
</td>
</tr>
<tr>
<td class="potroh">
</td>
</tr>
</tbody>
</table>
|
1920 pixeles fejlc mindig teljes mretben lthat HTML s Wordpress tpus oldalhoz
|
Header fajlban csak belinkeljuk a fejlecet, de minden kodolasi reszletet a css fajl fog tartalmazni.:
<div id="header" class="header"></div>
Itt fontos megjegyezni, hogy a magassagot be kell allitani a css fajlban, kulonben nem fogja teljesen kiadni a fejlac magassagat, ellenben a szelessege felveszi a teljes 1920px szelessget.
Vagyis a fejlec magassagat pixelben be kell irni a megfelelo reszhez.
Css fajlba ez kerul:
#header{
background:URL("images/header.png") top center no-repeat;
width:100%; height: 500px; position: relative;}
|
Designhez igazod fejlc - Fejlc behelyezse HTML / Wordpress oldalba A fejlc igazodik az oldal szlessghez, s mindig 100% mretben lthat.
|
A fejlecre vonatkozo resz igy fog kinezni:
<div id="header" class="header">
<img src="OLDALAD/images/header.png" width="100%">
</div>
A ccs faljban pedig ennyi lesz:
#header{
position: relative;
}
|
Oldal informcis doboz Brmilyen tpus oldalhoz
|
Oldal info doboz
<table class="oldalinfo">
<tbody>
<tr>
<td class="rightinfo"><i class="fa fa-diamond" aria-hidden="true"></i> Oldalneve</td>
<td class="leftinfo">Lorem ipsum dolor sit</td>
</tr>
<tr>
<td class="rightinfo"><i class="fa fa-user" aria-hidden="true"></i> Tulajdonos</td>
<td class="leftinfo">Neved</td>
</tr>
<tr>
<td class="rightinfo"><i class="fa fa-share" aria-hidden="true"></i> Mikor nyitott?</td>
<td class="leftinfo">2000.12.25</td>
</tr>
<tr>
<td class="rightinfo"><i class="fa fa-home" aria-hidden="true"></i> Adat</td>
<td class="leftinfo"><a href="http://" target="new">Valami</a></td>
</tr>
<tr>
<td class="rightinfo"><i class="fa fa-star-o" aria-hidden="true"></i> Alap</td>
<td class="leftinfo">Aemy Design</td>
</tr>
</tbody>
</table>
<style type="text/css">
/* oldal info doboz */
.oldalinfo {
border-spacing: 0 6px;
border-collapse: separate;
text-align: left;
letter-spacing: 0px;
width: 100%;
}
.leftinfo { /* most jobboldal */
color: #ffffff;
padding: 5px;
width: 60%;
}
.rightinfo { /* most baloldal */
color: #ffffff;
font-weight: bold;
padding: 5px;
width: 40%;
}
.oldalinfo a {
color: #ccbb69 !important; font-size:14px;
}
.oldalinfo a:hover {
color: #90863e !important;
}
.oldalinfo .fa {
font-size: 13px !important;
color: #ccbb69 !important;
font-weight: normal !important;
background: transparent !important;
margin-right: 3px;
padding: 0px !important;
}
</style>
|
Projekt doboz oldalmenbe Brmilyen tpus oldalhoz
|
Projekt doboz
<h3>Projekt neve </h3>
<div class="project"><img src="KP-LINKJE" />
Mikor?: kedd 25. 12. 2068
<i>Karakter:</i> Valaki <i>Valami:</i> reklam <i>Valami:</i> Kozmetikai sampon <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<center><a href="/">Info</a> <a href="/">Trailer</a> <a href="/">Galeria</a></center></div>
<style type="text/css">
/* projekt doboz */
.project {
margin: 0px auto;
width: 100%;
}
.project img {text-align: center;
width: 96%;}
.project p { /* tartalom kinzete */
color: #ffffff;
text-align: justify;
}
.project a {
font-size: 14px; color: #ffffff;background-color: #222222;border: 2px solid #ccbb69;
text-decoration: none;
width:29%;
display: inline-block;
}
.project a:hover {
background-color: #000000 !important;border: 2px solid #ccbb69;color: #ccbb69;
text-decoration: none;
}</style>
|
Hamburger reszponzv men Tutorialok, Kdok - G-Portlon s FTP kapcsolatos oldalon
Ez a men egyszer vzszintes men norml nzetben. De ha mobilnzetben nzed, akkor kicsi hamburger men lesz.
|
<!-- navigacio -->
<div id="hamnavbg">
<nav id="hamnav"><label for="hamburger"> ☰ </label><input type="checkbox" id="hamburger"/>
<div id="hamitems">
<a href="https://">Link</a>
<a href="https://">Link</a>
<a href="https://">Link</a>
</div></nav></div>
<!-- navigacio vege -->
<!-- css kod -->
<style type="text/css">
/* Navigation */
#hamnavbg {width: 100%;margin: 0px auto;float:center;background:#ffffff;text-align:center;}
#hamnav{width: 1300px;margin: 0px auto;float:center;text-align:center;}
#hamitems{padding:15px;}
#hamitems ul{list-style: none;padding:5px;margin:0;float:center;}
#hamitems ul li{display: inline;margin: 0px;display:inline-block;}
#hamnav label, #hamburger{display: none;padding:9px;}
#hamitems a,#hamitems ul a:link,#hamitems ul a:visited{display: inline;margin: 0px;display:inline-block;text-decoration:none; margin-left:9px;margin-right:9px;}
#hamitems a:hover,#hamitems ul a:hover{-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in; }
#hamitems:after {content:""; display:table; clear:both;}
#hamitems ul li ul li , #hamitems ul li ul li:hover {float:none; display:list-item; }
#hamitems ul ul { display: none; position: absolute; }
#hamitems ul li:hover > ul { display:inherit;}
#hamitems ul ul li {float:none;}
#hamitems ul ul ul li { position: relative;}
li > a:after { content: ' ↓ '; }
li > a:only-child:after { content: ''; }
/* responsive */
@media (max-width: 900px) {
#hamnav {width: 100%;margin: 0px auto;position: sticky;text-align:right;padding-right:50px;}
#hamnav label {display:inline-block;font-size: 1.1em; color: #969190 ; font-family: "CODE"; }
#hamitems a,#hamitems ul a:link,#hamitems ul a:visited,#hamitems a,#hamitems ul a:link,#hamitems ul a:visited{box-sizing: border-box;display: block;}
#hamitems { display: none;}
#hamitems,#hamitems ul,#hamitems ul li,#hamitems ul li ul li,#hamitems ul ul ,#hamitems ul ul li,#hamitems ul ul ul li {text-align:center;float:center;}
#hamnav input:checked ~ #hamitems { display: block; }
}
</style>
<!-- css kod vege -->
|
|
AJÁNLOM AZ OLDALT
