Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Receiver RX 2001 Professional Ele...

Perle aniversare

Probleme afisare Facebook

Egalizator IPRS Baneasa E2101 sch...
 ANRE - consumatorii si prosumator...

La multi ani @rinaldoparaipan!

Sursa in comutatie reglabila 0-30v

Cric hidraulic crocodil nu mai ri...
 Unde torn detergentul lichid?

Unde gasesc acest tip de bec ?

problema dinamica.

Pentru cei ce stati la bloc, va s...
 Necesar software pt. timeline

Biodome 27/ Thermica carpatino

Nu pot accesa unele pagini

Experiente cu mecanicii auto
 

dimensiune ul

- - - - -
  • Please log in to reply
11 replies to this topic

#1
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 230
  • Înscris: 08.11.2008
Salut. Deci am simplu :
		<div id="menu">
			<ul>
				<li><a href="#">Despre noi</a></li>
				<li><a href="#">Echipamente</a></li>
				<li><a href="#">Piese dezmembrari</a></li>
				<li><a href="#">Cauciucuri</a></li>
				<li><a href="#">Contact</a></li>
			</ul>


#menu {
	height:40px;
	width:50%;
	margin:0 auto;
	margin-top:13px;
	background-color:grey;
	line-height:35px;
   
}
#menu ul {
	list-style-type:none;
	width:100%
   
   
}
ul li {
	float:left;
}
ul li a {
	text-decoration:none;
   
}


Deci div-ul menu sa vreau sa fie in centru cu 50% width , dar la ul imi apare un anumit padding in stanga (asa am invatat ca padding-ul e mov si margin e galben) , care nu e nicaieri si imi strica mie treaba. Si ul de ce are sus si jos margin ? Am pus 2 poze cum se vede in firebug div-ul si ul ca exprimarea mea e cam de incepator.Mersi
la ul i-am dat height 100% cat are div-ul menu ... ar trebui sa se potriveasca exact in div nu ?

Attached Files

  • Attached File  css.jpg   59.35K   26 downloads
  • Attached File  css2.jpg   64.74K   25 downloads


#2
Ruben56

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,782
  • Înscris: 05.12.2013
Inceara sa pui la ul: margin-left:-40px;

Si eu am intampinat astfel de probleme. Mi se pare ca e de la browser. Eu personal resetez setarile stock ale browserului si dupa rescriu codul asa cum imi place fara padding/margin automat de la browser.
Exemplu:
*{ margin:0px; padding:0px; border:0px;}


#3
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 230
  • Înscris: 08.11.2008

View PostRuben56, on 20 septembrie 2014 - 19:32, said:

Inceara sa pui la ul: margin-left:-40px;

Si eu am intampinat astfel de probleme. Mi se pare ca e de la browser. Eu personal resetez setarile stock ale browserului si dupa rescriu codul asa cum imi place fara padding/margin automat de la browser.
Exemplu:
*{ margin:0px; padding:0px; border:0px;}
Aparent acel padding se misca odata cu margin-ul.Cum resetez setarile stock ? Multumesc. Inca o intrebare ,daca as lucra doar cu div-ul acela , sa fac un meniu in div cu span-uri ... ca sa scap de ul , sau nu e recomandat/eficient ? Facusem un training la o firma si mi-a spus un tip de-acolo .. " orice cacat sa bagi intr-un div " Posted Image

Edited by CristiCronik, 20 September 2014 - 19:49.


#4
Ruben56

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,782
  • Înscris: 05.12.2013
Eu la meniul meniu nu folosesc ul. Direct div id meniu si dupa li-uri la greu. Ca si HTML5 e eronat codul dar e greu in anumite situatii sa faci codul dupa standardele HTML5.

Fa cum am zis. Pune margin-left:-40px la ul si dupa vezi daca ai scapat de acea margine din stanga de care zici tu.

#5
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 230
  • Înscris: 08.11.2008
Am incercat,dar paddingul ramane.Oriunde le pun pe pagina tot asa ramane. am observat inca un lucru, de ex daca dau la ul width 100% , in dreapta mai imi pune din div portiunea padding-ului din stanga... Ar trebui sa pun width 95% la ul ca sa fie in dreapta suprapus perfect, dar padding-ul tot acolo e indiferent

#6
Ruben56

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,782
  • Înscris: 05.12.2013
Am sa iti testez imediat codul sa vad care e problema.

#7
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 230
  • Înscris: 08.11.2008
Multumesc, astept raspuns.

#8
sergiu_spooky

sergiu_spooky

    Senior Member

  • Grup: Senior Members
  • Posts: 3,738
  • Înscris: 23.06.2006

View PostRuben56, on 20 septembrie 2014 - 19:58, said:

Eu la meniul meniu nu folosesc ul. Direct div id meniu si dupa li-uri la greu. Ca si HTML5 e eronat codul dar e greu in anumite situatii sa faci codul dupa standardele HTML5.

Fa cum am zis. Pune margin-left:-40px la ul si dupa vezi daca ai scapat de acea margine din stanga de care zici tu.

Doua sfaturi proaste intr-un singur reply.
1) Daca nu vrei efecte neasteptate atunci fa cum trebuie, nu cum crezi.
2) Din moment ce elementul are by default _padding-left: 40px;_ de ce sa nu pui regula _padding-left: 0;_ in loc de _margin-left: -40px;_?

Nu intelegi ce e margin si ce e padding.
Margin e spatiere *in exteriorul* elementului.
Padding e spatiere *in interiorul* elementului.
Din cauza asta margin negativ exista, pe cand padding negativ nu.

Uite aici: http://jsfiddle.net/f90r27ho/1/

In plus, cand folosesti _float_ invata-te sa faci si clear. Ce e aia, google "clear css floats" (Articolul de pe quirksmode e foarte bun. Defapt, ar fi extraordinar daca te-ai apuca sa citesti tot ce e pe-acolo).
Eu am folosit _overflow: hidden;_ pe ul.


Edit:
Uite asta e regula CSS default aplicata de Chrome pe ul-uri:

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}

-webkit-padding-start se poate reseta cu padding-left: 0
-webkit-margin-before se poate reseta cu margin-left: 0

De unde am CSS-ul ala? Din Chrome Developer Tools. Click dreapta pe element -> Inspect element.

#9
Ruben56

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,782
  • Înscris: 05.12.2013
<style>
	#menu {
		height:40px;
		width:50%;
		margin:0 auto;
		margin-top:13px;
		background-color:grey;
		line-height:35px;
	}
	#menu ul {
		list-style-type:none;
		width:100%;
		padding-left: 0px;
	}
	#menu ul li {
		float:left;
	}
	#menu ul li a {
		text-decoration:none;
	}
</style>


Da-i replace cu acest cod.
sergiu_spooky, ai dreptate mai ales la punctul 2. Greseala mea.

#10
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 230
  • Înscris: 08.11.2008
Da,acum am ajuns si am reusit.Mersi fain baieti!

#11
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006

View PostCristiCronik, on 21 septembrie 2014 - 00:07, said:

Da,acum am ajuns si am reusit.Mersi fain baieti!
Fa si tu resetul ca toata lumea normala, google: html css reset sau html5 css reset.

#12
Alexandrwc

Alexandrwc

    Junior Member

  • Grup: Members
  • Posts: 52
  • Înscris: 19.06.2013
Ok, hai sa iti dau cateva tips...

In primul rand, evita sa faci CSS pe id-uri, foloseste-le doar pentru link-uri in-page;
In al doilea rand, de ce <div id="menu"> si dupa ul cand puteai sa faci direct <ul id="menu"> ? Din cate vad eu, nu vrei sa pui nimic altceva in meniu decat lista cu pagini si daca vrei sa pui un logo il poti pune tot in format de  <li> atribuindu-i o clasa separata cu care sa-l pui unde vrei tu. Incearca sa scrii cat mai simplu.

Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate