Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Termen transcriere autovehicul

Cazare Timisoara pe 4-5 zile

Primele zile ale internetului per...

Ditra 25
 Casti USB-C ptr A-54

Aplicatie medicala / asistent med...

De ce vor atația politicieni...

ERR_ADDRESS_UNREACHABLE
 Legea 18/1968 Se mai aplica?

Digi conectare 2 routere prin fir

Succesiune notar versus instanta ...

Montaj aer conditionat in balcon ...
 Cont curent mulți valuta far...

Sugestii plan casa

Experiente cu firme care cumpara ...

joc idem Half Life gratis
 

Div Problems

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

#1
romadman

romadman

    Junior Member

  • Grup: Members
  • Posts: 24
  • Înscris: 19.11.2005
Salut, problema mea suna in felul urmator. Acesta este codul pentru container

#container {
	background-image:url(images/container_back.png);
	background-repeat:repeat-y;
	background-position:center;
	height: 100%;
	margin: auto;
	width:820px;
	visibility:visible;
	position: inherit;
}


iar acesta pentru content

#content {
	color: #333333;
		background-image:url(images/logo.jpg);
	background-position:left top;
	background-repeat:no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-left:35px;
	margin-right: 35px;
	bottom: 0px;
	height: auto;
		width: 750px;
		height: 100%;
		
}

content-ul contine niste div-uri cu float:left; si margin-left:...px;

Problema e ca in Firefox content-ul nu se lungeste pe toata portiunea cu continut ci doar putin sus. Si alta problema e ca nu pot insera doua div-uri folosite cel superior cu adrese contact si cel inferior footer, suprapuse cu float:right; care sa fie continute in content, tot in firefox problema.

#2
sagarion

sagarion

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 19.12.2006
Firefox este unul dintre browserele care respecta specificatiile standard CSS in proportie de peste 90%, asa ca scrie CSS-ul pentru el si hackuieste cand ajungi la IE. In mod normal un float nu afecteaza inaltimea blocului care il contine (uite aici niste info despre float-uri http://www.456bereas..._in_body_text/).
Ai grija la combinatie de float si margin, IE dubleaza spatiul specificat cu margin, singura rezolvare care o stiu eu este sa specifici display: inline la div-ul float (sau imagine).

#3
romadman

romadman

    Junior Member

  • Grup: Members
  • Posts: 24
  • Înscris: 19.11.2005

View Postsagarion, on Apr 28 2007, 12:22, said:

Firefox este unul dintre browserele care respecta specificatiile standard CSS in proportie de peste 90%, asa ca scrie CSS-ul pentru el si hackuieste cand ajungi la IE. In mod normal un float nu afecteaza inaltimea blocului care il contine (uite aici niste info despre float-uri http://www.456bereas..._in_body_text/).
Ai grija la combinatie de float si margin, IE dubleaza spatiul specificat cu margin, singura rezolvare care o stiu eu este sa specifici display: inline la div-ul float (sau imagine).



Ceea ce trebuia facut era div-ul content din interiorul container-ului sa aibe display:table ca sa se prelungeasca pe 100%. Multumesc oricum pentr link-ul cu info despre float-uri.

#4
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
ceea ce era de facut nu era display:table. asta e una din pseudo-solutiile care iti rezolva problema pt un numar limitat de browsere. ceea ce trebuia sa faci era clearing, explicat mai in detaliu aici:
http://www.positioni...syclearing.html

#5
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007

View Postromadman, on Apr 29 2007, 02:01, said:

Ceea ce trebuia facut era div-ul content din interiorul container-ului sa aibe display:table ca sa se prelungeasca pe 100%. Multumesc oricum pentr link-ul cu info despre float-uri.


la faza este pti sa faci urmatoarea chestie. Floatul trebuie "curatat", asa ca cea mai simpla si infailibila solutie este urmatoarea:
Faci urmatorul div:

.clr{
width:1px;
height:1px;
font-size:1px;
matgin-top:-1px;
margin-left:-1px;
clear:both;
}

Eu o folosesc la toate "containerele" care au elemente "flotante'. De exemplu, la box-urile cu colturi rotunde.
<div class="container">
   <div class="header"></div>
   <div class="content"></div>
   <div class="header"></div>
   <div class="clr"></div>
</div>

E un fel de "Ultimu' stige lumina!"  :P

#6
Cosmi

Cosmi

    Member

  • Grup: Members
  • Posts: 260
  • Înscris: 05.08.2006
(scriu si eu problema mea aici ca sa nu mai fac alt topic)


Am pus niste divuri... dar nu inteleg de ce pe mozilla/opera/dreamweaver se vede bine, iar pe IE se vede gresit.
LINK
Cred ca problema este la acel div cu clasa "style-subbut" (se afla intre butoane (height: 4px))
Poate si pe mine cineva sa ma lamureasca ?  :mellow: Sunt sigur ca nu e chiar corect css-ul si ca trebuie sa mai adaug ceva ..

#7
Extinct

Extinct

    Senior Member

  • Grup: Senior Members
  • Posts: 9,079
  • Înscris: 24.02.2007

View PostCosmi, on May 6 2007, 17:09, said:

(scriu si eu problema mea aici ca sa nu mai fac alt topic)
Am pus niste divuri... dar nu inteleg de ce pe mozilla/opera/dreamweaver se vede bine, iar pe IE se vede gresit.
LINK
Cred ca problema este la acel div cu clasa "style-subbut" (se afla intre butoane (height: 4px))
Poate si pe mine cineva sa ma lamureasca ?  :mellow: Sunt sigur ca nu e chiar corect css-ul si ca trebuie sa mai adaug ceva ..


Pai puteai sa bagi o margine dedesupt si sa nu mai bagi div-ul ala de 10 mii de ori. Adica puteai sa dai un mrgin-bottom:5px sau cat vrei tu. E bine si cum ai facut tu, dar nu e chiar ergonomic. Daca mergi pe metoda ta, ai grija ca "style-subbut" saiba ori line-height:1px ori font-size:1px pentru ca daca nu, IE isi ia el marime implicita la font si spatiaza div-ul dupa inaltimea minima a liniei sau fontului. Sper ca am fost suficient de explicit. Bafta

#8
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
pt ca ai folosit div-uri dar gresit. ceea ce ai tu acolo este o simpla lista. ai doua capete de lista separate (id-uri sau clase separate) + elementele interne listei care sunt identice din punct de vedere al imagisticii.

incearca asa:

<ul>
<li class="first-element"><a href="#">img here</a></li>
<li><a href="#">img here</a></li>
<li><a href="#">img here</a></li>
<li><a href="#">img here</a></li>
<li class="last-element"><a href="#">img here</a></li>
<ul>

pe ul poti da un width si un height daca doresti, si elementele de lista ti le poti custtomiza cum doresti. de asemenea un float:left la ul ar ajuta. nu uita sa ii dai ul-ului o dimensiune, altfel va ocupa 100% fiind element de block. cred ca in curand va trebui sa scriu un articol legat de semantica in html, pt ca repet pt a nu stiu cata oara: css-ul NU MERGE cu HTML non semantic.

inca cateva recomandari: nu mai folosi proprietati pe body (mai ales ca cele folosite de tine sunt depreciate), nu mai folosi div-uri peste tot, foloseste alte nume la clase (care sa fie mai descriptive, foloseste un doctype -> asta probabil ca iti va rezolva problema si pe IE, deoarece acum IE este in quircks mode, complet incontrolabil, asta insemnand ca nu stii ce anume respecta din ce i-ai zis tu, si ce anume nu).

#9
vp-emanuel

vp-emanuel

    Senior Member

  • Grup: Senior Members
  • Posts: 2,000
  • Înscris: 09.10.2006
As avea si eu ceva probleme cu div-urile :

1) Meniul lateral se vede in IE putin diferit de Opera (pozele de jos) :

menutop { width: 145px; background: #333333 url(menu/menutop.gif) repeat-x; position: relative; top: 0px; height: 30px; bottom: 0px;}
ml { background: url(menu/menutopleft.gif) no-repeat left top; position: absolute; top: 0px; left: 0px; width: 15px; height: 30px;}
mr { background: url(menu/menutopright.gif) no-repeat right top; position: absolute; top: 0px; right: 0px; width: 15px; height: 30px;}



<div class="menu">
<div class="menutop"><div class="ml"></div>
<div class="mr"></div>
</div>

Practic in IE bucatica de 2px latime careia ii dadusem repeat-x imi apare dupa coltul rotund din dreapta.(pozele de jos)


2) Dupa ce am terminat cit de cit layout-ul i-am dat un :
 
container { margin: 0 auto; width: 980px; }
la toata pagina pentru a o centra.
Nu prea vrea.
Am dat o cautare pe google dupa "container center hack ie" dar nu a mers nimic din ce am gasit pe acolo.
Tot pe stanga sta.

Rog ajutor.

#10
vp-emanuel

vp-emanuel

    Senior Member

  • Grup: Senior Members
  • Posts: 2,000
  • Înscris: 09.10.2006
Atasez o poza mai mare pentru a se vedea mai clar :

PS. Am uitat mai sus sa precizez ca prima poza este cea din Opara (cea corecta) iar cea de-a
doua este din Explorer (cea cu eroarea)

Edited by vp-emanuel, 08 May 2007 - 19:22.


#11
sagarion

sagarion

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 19.12.2006
In IE, centrezi div-ul asa:
body { text-align: center; }

#container {
width: 980px;
margin: 0 auto;
text-align: left; 
}

Edited by sagarion, 08 May 2007 - 20:26.


#12
vp-emanuel

vp-emanuel

    Senior Member

  • Grup: Senior Members
  • Posts: 2,000
  • Înscris: 09.10.2006

View Postsagarion, on May 8 2007, 21:25, said:

In IE, centrezi div-ul asa:
body { text-align: center; }

#container {
width: 980px;
margin: 0 auto;
text-align: left; 
}

:o
Fuctioneaza.
Doar pentru un "text-align: left" nu mergea in explorer !!!!????
Puteam eu sa ma tot chinui.
Multumesc pentru raspuns sagarion

#13
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
nu.. nu mergea pt ca nu ai un doctype strict. in doctype strict merge cum trebuie margin:0 auto, si nu mai aveai nevoie de text-align:center. poate se uita si cine zicea in alt topic ca nu intelege care e diferenta intre doctype-uri si cum influenteaza ele browserele.

#14
vp-emanuel

vp-emanuel

    Senior Member

  • Grup: Senior Members
  • Posts: 2,000
  • Înscris: 09.10.2006

View Postxnoise, on May 8 2007, 23:42, said:

nu.. nu mergea pt ca nu ai un doctype strict. in doctype strict merge cum trebuie margin:0 auto, si nu mai aveai nevoie de text-align:center. poate se uita si cine zicea in alt topic ca nu intelege care e diferenta intre doctype-uri si cum influenteaza ele browserele.

Ca doctype am :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">


#15
sagarion

sagarion

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 19.12.2006
Asta functioneaza <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR...4/strict.dtd">.
text-align: center - centra div-ul, align: left - intoarcea la normal alinierea textului.

#16
xnoise

xnoise

    Active Member

  • Grup: Members
  • Posts: 1,310
  • Înscris: 08.02.2007
text-align este pentru elemente inline, margin:0 auto este pentru elemente de bloc. daca ai un div in body, text-align:center nu functioneaza pentru a centra div-ul, functioneaza pentru a centra niste text, link-uri, span-uri, adica tot ce e element inline. read the specs, o sa vezi ca asa e.

#17
vp-emanuel

vp-emanuel

    Senior Member

  • Grup: Senior Members
  • Posts: 2,000
  • Înscris: 09.10.2006
Im puteti spune va rog si la prima problema o solutie ?
Sau mai bine sa nu ma complic si in loc de cele 3 slice-uri (stinga, dreapta si bucatica de 2px careia i-am dat repeat-x) sa pun
imaginea intreaga ?
Practic prin slice-uri mai salvam cativa biti.  :rolleyes:
Mai precis slice-urile au 1,5kb si imaginea 1,58kb.
Deci salvez 0,08kb, adica nimic mai ales in contextul in care headerul are 36kb.
Si de aici inca o intrebare :D : daca mentin o pagina sub 100kb e bine sau deja e foarte mult ?

#18
sagarion

sagarion

    Junior Member

  • Grup: Members
  • Posts: 162
  • Înscris: 19.12.2006

View Postxnoise, on May 9 2007, 08:28, said:

text-align este pentru elemente inline, margin:0 auto este pentru elemente de bloc. daca ai un div in body, text-align:center nu functioneaza pentru a centra div-ul, functioneaza pentru a centra niste text, link-uri, span-uri, adica tot ce e element inline. read the specs, o sa vezi ca asa e.

Stiu si eu pentru ce este text-align, numai ca IE 5 si 6 interpreteaza gresit margin: 0 auto. Intradevar a mers cu html 4.01 strict, merci pentru sfat (pe asta nu o stiam).

Anunturi

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

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