Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Ford Fiesta va fi scos din fabric...

Rezolavre aux masina

Audi a4 b7 2.0 TDI Automat

Instalare pardoseala de brad pe p...
 Copil cu droguri - "nu e un r...

[Chestionar] Relația dintre agres...

Huawei Watch Ultimate

Prindere camere de supraveghere i...
 Diferenta an constructie bloc cer...

Kill Boksoon (2023)

problema vanzare cumparare auto

Masina automata oraș 17k
 Recomandari firma colectat mobila...

Pensionarea "decreteilor"...

complex rezidential Bucuresti cu ...

Blu Ray ASUS BW-16D1HT
 

problema cu un div

- - - - -
Last Updated: Jun 23 2008 20:29, Started by XWD , Jun 23 2008 18:26  
  ·  
  • Please log in to reply
8 replies to this topic

#1
XWD
Posted 23 June 2008 - 18:26

XWD

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 27.12.2007
am facut 3 divuri in css.
totul e ok, in browsere se vede ok , cu mici diferente intre IE si FF dar diferentele astea vor fi tot timpul insa problema mea este alta.
primul div este setat float left , al doilea div e float right iar al 3-lea e tot left.
primele doua divuri vin afisate in pagina unul langa celalalt si asa am si vrut insa cel de al treilea vreau sa fie aranjat frumos subt primul div.
intradevar e sub primul div insa e prea mare distanta intre ele , cam 200px si nu stiu ce sa fac sa reduc din distanta.
ce s-a intamplat de mi-a bagat distanta aceea.

codul CSS

#div1 {  background: url(images/1.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: left;
		  font-size: 13px; }

#div2 {  background: url(images/2.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: right;
		  font-size: 12px; }

#div3 {  background: url(images/3.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: left;
		  font-size: 12px; }

am atasat si un print screen la acest post.

Attached Files


Edited by XWD, 23 June 2008 - 18:38.

#2
The_recruit
Posted 23 June 2008 - 18:36

The_recruit

    Member

  • Grup: Members
  • Posts: 276
  • Înscris: 29.08.2005

View PostXWD, on Jun 23 2008, 19:26, said:

am facut 3 divuri in css.
totul e ok, in browsere se vede ok , cu mici diferente intre IE si FF dar diferentele astea vor fi tot timpul insa problema mea este alta.
primul div este setat float left , al doilea div e float right iar al 3-lea e tot left.
primele doua divuri vin afisate in pagina unul langa celalalt si asa am si vrut insa cel de al treilea vreau sa fie aranjat frumos subt primul div.
intradevar e sub primul div insa e prea mare distanta intre ele , cam 200px si nu stiu ce sa fac sa reduc din distanta.
ce s-a intamplat de mi-a bagat distanta aceea.
sa imi ziceti daca e necesar sa pun in forum cele 3 divuri si eventual un print screen cum se cad divurile.

Ar ajuta sa postezi codul cu care lucrezi.

Cand lucrezi cu floaturi trebuie exprimat elementul "width" si trebuie calculat corespunzator.
Incearca sa dai float:left la toate div-urile si seteaza margin:0; padding:0.

#3
XWD
Posted 23 June 2008 - 18:39

XWD

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 27.12.2007

View PostThe_recruit, on Jun 23 2008, 19:36, said:

Ar ajuta sa postezi codul cu care lucrezi.

Cand lucrezi cu floaturi trebuie exprimat elementul "width" si trebuie calculat corespunzator.
Incearca sa dai float:left la toate div-urile si seteaza margin:0; padding:0.

am atasat la postul initial si codul CSS si o imagine

#4
Jumping Jack
Posted 23 June 2008 - 19:24

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostXWD, on Jun 23 2008, 18:39, said:

am atasat la postul initial si codul CSS si o imagine

Am verificat codul tau in ff2, ff3, opera9.5, ie6, ie7, safari3. Peste tot arata ok. Al treilea div vine fix sub primul. Care e problema? Adica am verificat...
am luat css-ul tau si am facut o pagina cu div-urile respective. Eu nu stiu ce ai mai scris tu acolo, ce nu se vede. Uite codul paginii:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title></title>
	<style type="text/css">
	#div1 {  background: #ccc url(images/1.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: left;
		  font-size: 13px; }

#div2 {  background: #fc3 url(images/2.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: right;
		  font-size: 12px; }

#div3 {  background: #aaa url(images/3.jpg) no-repeat; 
		  text-align: left;
		  width: 304px;
		  height: 250px;
		  padding: 65px 15px;
		  float: left;
		  font-size: 12px; }
	
	</style>
	</head>

<body>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

Edited by Jumping Jack, 23 June 2008 - 19:25.

#5
The_recruit
Posted 23 June 2008 - 19:24

The_recruit

    Member

  • Grup: Members
  • Posts: 276
  • Înscris: 29.08.2005

View PostXWD, on Jun 23 2008, 19:39, said:

am atasat la postul initial si codul CSS si o imagine
Distanta pe care o ai este generata de padding. Va ca fiecare div are padding-top si padding-bottom de 65px. Deci padding-bottom de la div-1 adunat cu padding -top de la div-3 egal cu distanta de 130px inte div-uri.

Daca nu vrei sa ai distanta respectiva poti sa scrii paddingul la fiecare div: 
padding:0 15px

Asa o sa ai distanta de 0 pe verticala intre div-uri si 30px intre.

#6
Jumping Jack
Posted 23 June 2008 - 19:29

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostThe_recruit, on Jun 23 2008, 19:24, said:

Distanta pe care o ai este generata de padding. Va ca fiecare div are padding-top si padding-bottom de 65px. Deci padding-bottom de la div-1 adunat cu padding -top de la div-3 egal cu distanta de 130px inte div-uri.

Daca nu vrei sa ai distanta respectiva poti sa scrii paddingul la fiecare div: 
padding:0 15px

Asa o sa ai distanta de 0 pe verticala intre div-uri si 30px intre.

Esti tu asa de sigur? padding-ul nu face decat ca inaltimea div-ului sa fie de 250+65+65= 380px. Dar toate trei au tot 380px inaltime, deci tot unul sub altul se aseaza.

Completare:
Ce spun mai sus este valabil cu exceptia cazului in care e vorba de interpretarea aiurea a box-modelului, caracteristic lui ie5 si 5.5 si lui ie6 in quirksmode, lucru care s-ar putea intimpla daca nu ai doctype sau daca asta e aiurea. In ie5.x si ie6 in quirksmode padding-ul este adaugat in exteriorul div-ului, nu in interior, cum e normal.

Edited by Jumping Jack, 23 June 2008 - 19:55.

#7
XWD
Posted 23 June 2008 - 19:41

XWD

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 27.12.2007

View PostThe_recruit, on Jun 23 2008, 20:24, said:

Distanta pe care o ai este generata de padding. Va ca fiecare div are padding-top si padding-bottom de 65px. Deci padding-bottom de la div-1 adunat cu padding -top de la div-3 egal cu distanta de 130px inte div-uri.

Daca nu vrei sa ai distanta respectiva poti sa scrii paddingul la fiecare div: 
padding:0 15px

Asa o sa ai distanta de 0 pe verticala intre div-uri si 30px intre.

ok am facut asa si dupa aia scrisul in divuri cun il las mai jos ? :) scz de intrebare , poate e de incepatori :) dar eu prin acel padding lasam textul mai jos in div

#8
Jumping Jack
Posted 23 June 2008 - 19:53

Jumping Jack

    Member

  • Grup: Members
  • Posts: 622
  • Înscris: 12.09.2007

View PostXWD, on Jun 23 2008, 19:41, said:

ok am facut asa si dupa aia scrisul in divuri cun il las mai jos ? :) scz de intrebare , poate e de incepatori :) dar eu prin acel padding lasam textul mai jos in div

E ok cum ai facut de prima data, citeste postul meu de mai sus. Poti folosi padding cit vrei, nu asta e problema ta acolo, ci modul de interpretare a paginii de catre browser.

#9
XWD
Posted 23 June 2008 - 20:29

XWD

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 27.12.2007

View PostJumping Jack, on Jun 23 2008, 20:53, said:

E ok cum ai facut de prima data, citeste postul meu de mai sus. Poti folosi padding cit vrei, nu asta e problema ta acolo, ci modul de interpretare a paginii de catre browser.

ok textul l-am dat in jos din pagina cu BR si se potriveste la fix :)
deci proiblema am rezolvato , ms mult pentru sfaturi baieti ;)

Anunturi

Bun venit pe Forumul Softpedia!
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