Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Arzator dublu aragaz.

Presiune Centrala Ariston.

DVR 4 canale functioneaza cu un ...
 Redactare CV

Limite maxime amenzi contraven...

Folie protectoare pentru ecrane (...

Spalare masina sau nu
 Alternative la "we are sunset...

Īncheiere penala dezinvestire

Traducere limba spaniola

Family Sharing "Ask to buy...
 CI+ (Telekom) și TV JVC

Umiditate Beci

Ariston decupleaza incalzire calo...

Retea interioara CATV proasta. So...
 

dimensiune ul

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

#1
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 221
  • Î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,777
  • Î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: 221
  • Î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,777
  • Î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: 221
  • Î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,777
  • Înscris: 05.12.2013
Am sa iti testez imediat codul sa vad care e problema.

#7
CristiCronik

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 221
  • Î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,777
  • Î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: 221
  • Î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

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

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