"nefunkcne" position: absolut; ...

V tejto téme sa nachádzajú šablóny (templaty, vzhľady) pre Etomite.

Moderátor: Moderators

Užívateľov profilový obrázok
Marek Adamec
Medium Star
Medium Star
Príspevky: 246
Dátum registrácie: Pi Dec 28, 2007 7:58 pm
Bydlisko: Dubnica nad Váhom
Kontaktovať užívateľa:

"nefunkcne" position: absolut; ...

Príspevok od užívateľa Marek Adamec » So Jún 18, 2011 11:13 pm

Caute mam 2 male problemy:

1) potreboval by som upravit vrchnu cast tejto stranky http://nf.navrchol.sk aby vyzerala takto:

Obrázok

ale ked sa pokusam pouzit v CSS position: absolute; top: 0px; left: 0px; tak ma to hadze na kraj stranky... :( momentalne to je riesene len takto

Kód: Vybrať všetko

*{margin:0;padding:0;}
body{background:#1a1a1a;color:#444;font:76% Verdana,Helvetica,sans-serif;}
p{line-height:1.7em;margin-bottom:15px;}
a{color:#467aa7;}
a:hover{color:#333;}
h1{color:#2a5a7a;font-family:Georgia,serif;font-size:2.4em;}
h2{color:#467aa7;font-family:Georgia,serif;font-size:2.2em;font-weight:400;margin:0 0 10px 0;}
h3{color:#467aa7;font-family:Georgia,serif;font-size:1.6em;font-weight:400;margin:0 0 8px;}
ul,ol,dl{margin:0 0 20px 20px; padding:0;}
li{padding-bottom:5px;}



#containerfull,#container980,#container760,#container600{margin:0 auto;padding:0;overflow:hidden;border-left:1px solid #ddd;border-right:1px solid #ddd;}
#containerfull{width:100%;border:0;}
#container980{width:980px;}
#container760{width:800px;}
#container600{width:600px;}

#header{background-color:#467aa7;padding:0px 0px;}
#jazyk{background-color:#467aa7; padding:0px 0px;}

#header h1{padding:0px 0px;}
#header h1 a{color:#eee;font-family:Georgia,serif;font-size:2em;font-weight:400;text-decoration:none;}

#header h2{color:#ddd;padding:0 0 10px 25px;margin:0;font-family:Georgia,serif;font-size:1.8em;font-weight:400;}

#menu{background-color:#467aa7;height:40px;}
#menu ul{float:right;height:40px;list-style:none;margin:0;padding:0 25px 0 0;}
#menu ul li{background-color:#2a5a7a;display:block;float:left;margin:0 0 0 5px;padding:0;}
#menu ul li a{background-color:#2a5a7a;color:#ddd;display:block;font-size:1.4em;padding:10px 12px;text-decoration:none;}
#menu ul li a:hover{color:#fff;}
#menu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}

#feature{background-color:#eee;color:#555;padding:25px 25px 5px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
#feature h2{color:#467aa7;font-size:2em;line-height:1em;}
#feature p{font-size:1.3em;margin:0 0 15px 0; line-height:1.5em;}

#main{clear:both;margin:0;background-color:#fff;padding:0px 0px 0px;}
#content{width:72%; float:right; padding:0px 10px 0px 0px;}

#sidebar{background:transparent url('images/sidebar-top.jpg') no-repeat scroll top right;float:left;width:25%;}
#sidebar .sidebarbox {margin:0 0 0px 0;background-color:#fff; /*border:1px solid #ccc;*/ border-right:1px solid #ccc;}
#sidebar p{margin:10px 0 10px 10px;} 
#sidebar ul{list-style:none;margin:10px 0 10px 10px;padding:0;}
#sidebar ul li{margin:0 0 5px 0;}
#sidebar ul li a{color:#467aa7;font-weight:400;}
#sidebar ul.sidemenu {margin:0;}
#sidebar ul.sidemenu li{display:inline;padding:0;margin:0;}
#sidebar ul.sidemenu li a{display:block;padding:7px 5px 6px 10px;font-size:1.2em; font-weight:400;text-decoration:none;border-bottom:1px solid #ddd;} 
#sidebar ul.sidemenu li a:hover{background-color:#eee;color:#333;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul{margin:0;padding:0;font-size:0.9em;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul li a{padding:5px 5px 5px 25px;border:0;font-weight:400;}
#sidebar ul.sidemenu ul li a:hover{border:0;}
#sidebar ul li a:hover{color:#333;}
#sidebar h2{background-color:#467aa7;color:#fff;font-size:1.5em;margin:0 0 0 0;padding:10px;}
#sidebar h3{font-size:1.4em; padding:10px 10px 0 10px;}


#footer{background-color:#ddd;margin:0 auto;padding:20px 25px 10px;border-top:1px solid #ccc;}
#footer h2{color:#467aa7;font-weight:400;font-size:1.5em;}
#footer p{color:#555;margin:0 0 10px 0;padding:0;}
#footer ul{border-top:1px solid #ccc;list-style:none;margin:0 0 15px 0;padding:0;}
#footer ul li{padding:0;margin:0;}
#footer ul li a{border-bottom:1px solid #ccc;color:#333;display:block;padding:7px 10px;text-decoration:none;}
#footer ul li a:hover{background-color:#eee;}

#footersections{display:block;margin:0 auto;}
#footersections .half{float:left;margin:0 3% 0 0;width:47%;}
#footersections .lasthalf{float:left;margin:0;width:50%;}
#footersections .quarter{float:left;margin:0 3% 0 0;width:22%;}
#footersections .lastquarter{float:left;width:25%;margin:0;}

#credits{background-color:#333;color:#aaa;padding:15px 25px;}
#credits p{text-align:left;font-size:1.2em;margin:0;padding:0;line-height:1.4em;}
#credits a{color:#aaa;font-weight:400;}

.left{float:left;width:49%;}
.right{float:right;width:48%;}
.clear{clear:both;visibility:hidden;}
.small{font-size:0.8em;}
stravil som nad tym uz viac ako 5 hodin pokusov a neuspesne... Podla mna by bolo najjednoduchce to riesit cez to position: absolut; ale ako som uz spominal hadze to od kraja a nie od tial ako by som chcel ako je na obeazku... Neviem ci existuje nato nejaka finta...

2) V menu sa mi nedari odstranit zarovnanie vybrateho statu... aby splival s ostatnymi....

Užívateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať užívateľa:

Re: "nefunkcne" position: absolut; ...

Príspevok od užívateľa _rasel^ » St Jún 22, 2011 6:34 pm

Ahoj, ak chceš, aby ti to fungovalo, tak div jazyky musíš presunúť do divu header. Absolútna pozícia divu sa určuje vzhľadom k nadradenému rodičovskému elementu, čiže teraz to fungovalo vzhľadom k divu container, ktorý vypĺňa celú stránku a ak sa div jazyky bude nachádzať v dive header, tak to bude vyzerať normálne a nebude sa to zobrazovať mimo:

Kód: Vybrať všetko

#jazyk {
    background-color: #467AA7;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    width: auto;
}
..:: Etomite CMS → Rulezzz !.!.!. ::..

Užívateľov profilový obrázok
Marek Adamec
Medium Star
Medium Star
Príspevky: 246
Dátum registrácie: Pi Dec 28, 2007 7:58 pm
Bydlisko: Dubnica nad Váhom
Kontaktovať užívateľa:

Re: "nefunkcne" position: absolut; ...

Príspevok od užívateľa Marek Adamec » So Jún 25, 2011 9:05 pm

Cau, dnes som to skusil spravit ako si mi radil, ale stale mi to zarovnava uplne od kraja... :(

Užívateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať užívateľa:

Re: "nefunkcne" position: absolut; ...

Príspevok od užívateľa _rasel^ » Ne Jún 26, 2011 3:36 pm

Ahoj, pridaj ešte:

Kód: Vybrať všetko

#header {
    position: relative;
}
..:: Etomite CMS → Rulezzz !.!.!. ::..

Užívateľov profilový obrázok
Marek Adamec
Medium Star
Medium Star
Príspevky: 246
Dátum registrácie: Pi Dec 28, 2007 7:58 pm
Bydlisko: Dubnica nad Váhom
Kontaktovať užívateľa:

Re: "nefunkcne" position: absolut; ...

Príspevok od užívateľa Marek Adamec » Ne Jún 26, 2011 7:48 pm

Super funguje, ja som skusal vcera davat position: relative namiesto absolut do jazyka a neslo to, ale pridat relative do header by ma vobec nenapadlo... si kapacita! Dakujem.

Užívateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať užívateľa:

Re: "nefunkcne" position: absolut; ...

Príspevok od užívateľa _rasel^ » Ut Jún 28, 2011 3:20 pm

Ďakujem, nz.
..:: Etomite CMS → Rulezzz !.!.!. ::..

Napísať odpoveď