CSS-Meniu

Salut. Am o problema cu un meniu un css. am facut o pagina home care arata asa: http://prntscr.com/6e6bes .
Doar ca eu am aranjat meniul pentru rezolutia de la laptop-ul meu si pe alte monitoare se vede acel meniu in alta parte a ecranului. E vreo posibilitate sa fac ca meniul sa fie stabil, asa cum e in acea poza, pe toate tipurile de monitoare? Sunt incepator css .

aici codul folosit pt css:

body{
	background-image: url(backgrounddefault.jpg);
	background-repeat: round;
}
.login{
   text-align:center;
   position: absolute;
   left:550px;
   top:350px;
}
.menu_simple ul {
margin: 0;
padding: 0;
width:185px;
list-style-type: none;
	text-align: center;
	position: absolute;
	left: 800px;
	top: 350px;
table-layout: auto;
	lef
}

.menu_simple ul li a {
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: white;
display:block;
   
}

.menu_simple ul li a:visited {
color:grey;
}

.menu_simple ul li a:hover, .menu_simple ul li .current {
color: blue;
background-color: whitesmoke;
   
}

Trebuie sa utilizezi procente pentru orice, altfel o iei pe pixel si nu va fi responsive in veci,
Mai bine ai folosi flex-box, e viitorul si rezolva o gramada de probleme.

Demon000, on 08 martie 2015 - 12:20, said:

nu prea am rezolvat nimic folosind procente. e aceeasi problema. acum ma uit peste flex-box sa vad ce rezolv.

Ce vrea sa insemne pentru tine stabil?

Cu % (procente) rezolvi sigur. Ceva nu ai facut bine sau nu ai facut complet.
Vezi ca anumite proprietati se pot mosteni.
Recomand sa folosesti Mozilla Firebug (este doar un exemplu de utilitar; toate browserele au acest tool, dar eu il prefer pe acesta) si acolo te pori "juca" cu declaratiile si valorile din CSS si vezi cum se modifica si pagina.
Succes!

Adica apesi F12

Daca vrei sa te ajutam direct sau sa iti analizam codul efectiv, fa-ne un test case frumos ca sa putem vedea exact ce cod folosesti si cum se comporta.
Intra aici, pune la HTML doar mark-up-ul relevant, la CSS doar regulile relevante, salveaza si da link.

Sau fiddle.

Andrey77, on 08 martie 2015 - 13:42, said:

nu am mai folosit chestia asta, sper doar sa fi facut bine:
http://codepen.io/adryan17/pen/KwxXeN

Ok, si hai sa vedem ce vrei tu sa faci, care este obiectivul vizual. Vrei ca meniul tau sa ramana in acelasi loc indiferent de marimea ecranului?

Andrey77, on 08 martie 2015 - 14:10, said:

da. vreau ca meniul sa ramana in acelasi loc in poza, pe orice fel de ecran.
http://prntscr.com/6e7jua

pe alte rezolutii meniul nu mai apare in aceeasi zona alba. iar eu as vrea sa-l fac sa apara pe orice rezolutie in acea zona

Andrey77, on 08 martie 2015 - 14:10, said:

http://laboratorweb.herobo.com
asta e site-ul la care lucrez. si am trimis un print cum mi se vede mie. asa as vrea sa apara la toti.

Ok, deci sa inteleg ca tu vrei ca imaginea de background si elementele sa fie responsive, insa meniul intotdeuna sa ramana deasupra foii aceleia de pe background.

Hai sa o luam treptat, pornind de la zero.

• Poti face (si chiar asa ar trebui sa procedezi in mod normal) meniul sa fie exact deasupra foii albe setand un anumit set fix de coordonate in pixeli. Ca sa iti reuseasca acest efect, tu trebuie sa fii tot timpul constient de locatia foii albe in relatie cu background-ul. Deocamdata e simplu, pentru ca background-ul nu e responsive, el este fix.
  
• Poti face background-ul sa se comporte responsive adaugand `background-size: cover` la body si scotand orice fel de repeat pe el. Ca urmare, asta il va face sa nu mai fie fix.
  
• Problema stii care e? Cele doua nu se pupa. Daca tu vrei ca background-ul sa se comporte responsive, adica sa nu ramana taiat pe dimesiuni mai mici ale ecranului (si astfel sa nu se mai vada imaginea integral), sa nu mai fie fix, atunci inseamna ca el va fi..dinamic. Ce inseamna asta? Ca niciodata nu vei stii exact unde se afla foaia aceea alba.
  
• Solutia? Decupleaza elementele background-ului: ochelarii, cafeaua, telefonul, foaia alba, laptopul etc... Astfel vei face orice element vrei tu sa se comporte fix cum vrei tu, sa il pozitionezi la un anumit procent fata de body. Si acum vei spune: "Ok, voi pozitiona foaia la un anumit procent, va fi responsive, insa tot va fi dinamica deci nu voi stii niciodata unde e!!". Stii care e chestia? Foaia devenind un element individual si decuplat fata de restul elementelor, nici macar nu mai ai nevoie sa stii unde se afla. Pur si simplu plasezi inauntrul ei meniul tau. Astfel, oriunde va fi foaia, fie ca o pozitionezi relativ fie ca o pozitionezi fix, meniul va fi intotdeuna inauntrul ei.
  
• Cum faci asta? Te duci frumos in Photoshop, decupezi fiecare element pe care il doresti responsive (poate sa fie doar foaia, desi ti-as recomanda sa aplici asta pentru mai multe elemente), il salvezi ca o imagine separata iar pe background-ul initial, umpli golul cu pattern-ul acela de lemn. Apoi, in markup, creezi un nou element de marimea imaginii decupate, de marimea foii adica, cu imaginea respectiva ca background. Pui meniul in element si aia e.

Poti chiar sa decupezi toate elementele si pe fundal sa pui pur si simplu un pattern de lemn sau o imagine cu un birou gol. Sau daca nu ai chef sa decupezi, poti sa cauti pe net obiecte individuale (un laptop, o foaie goala, un telefon, un pix) si sa le pui pe astea.

Chiar si asa este destul de complicat si ilogic sa simulezi un birou real proiectat intr-o maniera responsive. Asa ca va trebui sa ai grija la `z-index`. Z-index in CSS este proprietatea care defineste ordinea in care sunt afisate elementele HTML in cazul in care se suprapun. Astfel vei avea grija ca foaia alba sa aiba cea mai mica prioritate, deoarece elementele cand se vor repozitiona pe ecrane mai mici/mari, ele se vor putea intersecta putin, iar in viata reala foaia este sub cafea sau telefon si asa mai departe. De asemenea, la dimensiuni foarte mici vei vrea sa elimini cu totul anumite elemente care pur si simplu ocupa prea mult spatiu. Nu ai ce face, ori faci responsive ori nu mai faci. Lucrul acesta il realizezi prin JS sau prin CSS media queries. De exemplu, cand treci de un anumit breakpoint de 500px, #coffee va avea `display: none`.

Andrey77, on 08 martie 2015 - 14:44, said:

Multumesc foarte mult. Am inteles ce am de facut. Ma apuc de treaba.