Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
[UNDE] Reconditionare obiecte lemn

Infiltratii casa noua

sugestie usa interior

ANAF si plata la selfpay
 Imprimanta ciss rezista perioade ...

Garmin fēnix 7 / PRO / Saphi...

Care sunt cele mai mari regrete a...

Alfa Romeo Stelvio 2.2 jtd
 Intrebari srl nou

La multi ani @AndReW99!

Alegere masina £15000 uk

TVR vrea sa lanseze o platforma d...
 Strategie investie pe termen lung...

Modulator FM ptr auto alimentat p...

orange cablu f.o. - internet fara...

Robinet care comuta traseul
 

dimensiune ul

- - - - -
Last Updated: Sep 25 2014 14:58, Started by CristiCronik , Sep 20 2014 19:27  
  ·  
  • Please log in to reply
11 replies to this topic

#1
CristiCronik
Posted 20 September 2014 - 19:27

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 238
  • Î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
Posted 20 September 2014 - 19:32

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,820
  • Î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
Posted 20 September 2014 - 19:48

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 238
  • Î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
Posted 20 September 2014 - 19:58

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,820
  • Î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
Posted 20 September 2014 - 20:30

CristiCronik

    Junior Member

  • Grup: Members
  • Posts: 238
  • Î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
Posted 20 September 2014 - 20:34

Ruben56

    Senior Member

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

#7
CristiCronik
Posted 20 September 2014 - 20:53

CristiCronik

    Junior Member

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

#8
sergiu_spooky
Posted 20 September 2014 - 20:54

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
Posted 20 September 2014 - 20:58

Ruben56

    Senior Member

  • Grup: Senior Members
  • Posts: 2,820
  • Î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
Posted 21 September 2014 - 00:07

CristiCronik

    Junior Member

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

#11
OriginalCopy
Posted 21 September 2014 - 06:37

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
Posted 25 September 2014 - 14:58

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 spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
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