Cikkajánló
Múlt héten vasárnap véget ért a közönségszavazás az oldalon. Az első 9 honlapra, ami igazából 10 (csak elszámoltam) nem jött túl sok szavazás, de azért helyezés így is lett.
Felkerültek a galériába a Portfólió albuma a nagyjából pár hónapja rendelt kinézetek. Nem tudom, hogy mi történt főleg most ősszel, mert magamhoz képest elég sok rendelés összegyűlt. Főleg azért
Kérdeztétek már jó sokan, hogy van-e rá valami megoldás, hogy KrazyJokes, Chazz és hasonló nevű egyének vagy robotok (ki tudja), ne firkálják tele a Chat-et. A válasz pedig, hogy
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Vízszintes menü 24.

 

Menü kódja
A menüben vannak ikonok. Az ikonokhoz azt a kódot is át kell másolnotok magatoknak, ami itt lejjebb található. (Kivéve, ha már használatban van az oldalatokon). A kódomban az ikonok nem <i> kód közé kerültek, hanem a <strike>kód közé, ami az áthúzott szöveget idézi elő. Az i értelemszerűen dőlt szöveget csinál, és mivel alapból főleg G-Portálon sokan használnak hozzá CSS kódot, így ha strike közé teszitek az ikonokat, kevesebb eltérés lesz és az ikon nem veszi fel pl. a dőlt CSS-etek stílusát.

 

A menü kódjában a perjel helyére kell a linketeket írni!

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Ikonokat itt tudtok választani másikat: https://fortawesome.github.io/Font-Awesome/icons/

 

<div id="navi">
<div class="navi-link-left">
<a href="/">Főoldal</a> <a href="/">Leírások</a> <a href="/">Galéria</a></div>
<div class="navi-link-right">
<a href="/"><strike class="fa fa-facebook-square"></strike></a> <a href="/"><strike class="fa fa-twitter-square"></strike></a> <a href="/"><strike class="fa fa-envelope"></strike></a></div>
</div>

 

CSS kód

 

<style type="text/css">
#navi {
margin: 0;
padding: 12px 0;
overflow: hidden;
background: #2A2A2A; /* menü háttérszíne */
width: 600px; /* a menü szélessége */
}
.navi-link-left {
float: left;
}
.navi-link-left a { /* bal menüpontok */
display: inline;
color: #797979; /* menücímek színe */
font-family: Arial;
font-weight: bold !important;
text-transform: uppercase;
font-size: 11px;
text-align: center;
letter-spacing: 1px;
padding: 0 16px;
text-decoration: none;
}
.navi-link-left a:hover { /* ha ráviszed az egeret */
color: #ffffff; /* menücímek színe */
background: #393939; /* menücímek háttere */
padding: 18px 16px;
text-decoration: none;
}
.navi-link-right { /* jobb menüpontok */
display: inline;
float: right;
}
.navi-link-right a {
display: inline;
color: #797979;
font-size: 14px;
font-weight: normal;
text-align: center;
padding: 0 16px;
text-decoration: none;
}
.navi-link-right a:hover {
color: #ffffff;
background: #111111;
padding: 18px 16px;
text-decoration: none;
}
strike {
text-decoration: none !important;
}
</style>

lindadesign Hozzászólások
1 500 megtekintés

Hozzászólások