Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Originea unor cuvinte in Lb. Fran...

Policlinica Titan sta sa se prabu...

Mașina avariata in parcare l...

Ar veni si la noi un cutremur mar...
 Sugestie boxe

Transfer joc Huawei pe xiaomi

Tastatura si mouse pe nintendo sw...

Separatoare sau disjunctoare?
 mecanica

Accident usor

Achizitie apartament doua camere/...

Recomandare boiler indirect 2 sep...
 Cargus Ship & Go - De la 1 Le...

Ce almanahuri citeați pe vremuri?

Cutremure in Turcia

Stalp metalic
 

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

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

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