CSS help !

[malixx]

Pozdrav svima, radim si novi dizajn stranice, i sve je dobro,
radim tako da mi u svim browserima izgleda jednako, ali ima
jedan problem, kod nekih laptopa se ne vidi dobro stranica,
sve se pomakne u ljevo, neznam zašto, jel netko zna što je
uzrok tome, ili ako se nešto treba ubacit u css da bude bolje
neka mi kaže ?

Hvala.

[zwer]

Za pocetak to sto si napravio postavi negdje online pa da pogledamo u cemu je problem. Ovako, pitanje se cini kao da ja pitam: "e ekipa, auto mi ne radi, zna netko zakaj?".

Koje browsere si isprobao, koje verzije, na kojoj verziji ne radi kak spada, itd. Ak ocekujes napravit css layout koji izgleda u svim browserima isto unazad 5 godina, tesko, jedino ako imas volje i vremena za conditional CSS za svaki posebno.

[malixx]

Radim na firefoxu 2.0.0.16 i IE 8.0.6001..beta2.

Ali rekao sam, u tim browserima mi dobro radi! ali imam kritike da
ne radi stranica dobro na LAPTOPIMA, znači na laptopu je sve pomaknuto
nekud u lijevo, ja neznam zašto je to, da li radi manjeg ekrana ili šta..

I nisam skužio ovo zadnje "conditional CSS", šta je to conditional?

[zwer]

www.google.com - conditional css
za lijene: http://www.sitepoint.com/blogs/2008/...or-better-css/

Site nemoze bit pomaknut lijevo na laptopu, jer to s laptopom nema veze, nego je na laptopu mozda drugaciji browser. Opet, posto nisi direktno pokazao kod negdje online, nema ti smisla uopce odgovarati sa mogucim rjesenjima jer:

- neznam koji browser koristis na laptopu
- nemam pojma kako HTML kod izgleda
- nemam pojma kako CSS kod izgleda
- nije tocno jasno sto znaci "pomaknut u lijevo" (sta? jedan container? vise njih? svi? itd).

Opet, s obzirom da koristis "laptopima", pretpostavljam da si isprobao na vise razlicitih sa vise razlicitih browsera i rezolucija. I naravno, laptopi mozda imaju manju/vecu rezoluciju od tvog monitora, iako to jedino utjece ako radis liquid css site i nebi imalo veze s pomaknutosti u lijevo.

[malixx]

poslao sam ti na e-mail od icq-a adresu, pa pogledaj.

[zwer]

fake email ili ga ne koristim, ne sjecam se vise.

postoji forum i PP.

[zwer]

Dakle, problem je sto ne koristis wrapper container, nego ti je sve pozicionirano u odnosu ljevi na rub browsera. Tako ti je home/contact link alignan desno, i zato dolazi do razlika u izgledu kod raznih browsera i cim promijenis rezoluciju u windowsima (ili koristis wide monitor), a zapravo jedino site izgleda dobro ako ga gledas u rezoluciji za koju je prilagodjen (pretpostavljam 1024x768).

Ukratko, CSS ti je los, trebas napravit fixed size container koji se centrira u sredinu userovog browser prozora i u nejga onda trpat content, a ne micat containere od ljeve strane sa marginama. Plus, background ti izgleda lose u bilokojoj rezoluciji vecoj od 1024x768 jer si stavio da repeata po y, umjesto da stavis neku boju kao pozadinu a containere farbas u sta ti treba.

Preporucam da skines neki od gotovih CSS layouta i probas s tim.

[malixx]

kao prvo ne trebaš se ljuti, jer ja to učim još !

jer si stavio da repeata po y, umjesto da stavis neku boju kao pozadinu a containere farbas u sta ti treba.

al ja oću da kad upisujem text u stranicu da mi uvjek se pomoće dolje stranica, tj, ona tamnoplava linija, dakle to mogu samo sa Y, inaće bi bio čvrsti box bez pomicanja!?

trebas napravit fixed size container koji se centrira u sredinu userovog browser prozora

Ja sam napravio margin: 0 auto, ALI TO NE RADI NA "IE"!! i kak sad da ostale onda pomićem unutra ako ne marginama ? možeš objasnit?

[zwer]

Ne ljutim se ja, ne brini. Samo ti kazem da grijesis u nekim temeljnim stvarima i ako se naviknes tako radit, kasnije ces se samo dublje i dublje u probleme zatrpat.

Ovo s tamnoplavom linijom... Poanta je da se ta tamnoplava linija radi sa Wrapper containerom, dakle definiras div sirine npr. 760 pixela, i centriras ga u browseru. Ako ne radi u IE, vjeroajtno treba dodat jos nesto, to mozes i sam proguglat ("align center div in IE"). Upravo zato ti netreba nikakva slika u pozadini body-a, nego samo stavis sivi background za body, a containeru unutar kojeg ti je cijeli site content odredis boju pozadine i centriras ga kako ti odgovara, a on se kasnije sam povecava i smanjuje ovisno o sadrzaju.

Uglavnom, da ne pisem ja tu cijeli CSS tutorial, peglaj po gugletu i trazi gotove css layoute te ih samo prilagodi kako ti odgovara. Osim sto ces naucit kako to treba raditi, olaksat ces si stvari za kasnije.

http://layouts.ironmyers.com/

Za pocetak kreni odavde.

[malixx]

http://layouts.ironmyers.com/

A daaaj, šta je ovo, jesi ti vidio kako je to sve nabacano? to ima jedan svoj css u htmlu, i da bi još bila dva cssa izvan htmla, di piše da je za fonts, a ono je za margine, tj boxeve ! pa daj to je sve tak razbacano ! jel ima negdje neki jednostavni css stranice a da radi u više prowsera i na više veličina !?

Ja sam se sad mučio to razvlačit i slagat, al jok, nemreš si složit, to je tako glupo imenovano
sa .yui ovo, .yui ono, takvih ima barem 500 sad se ti snađi !

[zwer]

Vidim da neide ovo nigdje, jer osim sto ne baratas osnovnim pojmovima, neznas ni koristit google...

Prvo nauci CSS:
http://www.w3schools.com/css/default.asp

Ono sto tebi treba se zove 2 column layout, evo sto kaze google na prvoj stranici, s obzirom da to nisi mogao sam naguglat.

http://www.dynamicdrive.com/style/la...1-fixed-fixed/
http://www.thesitewizard.com/css/des...n-layout.shtml
http://www.ssi-developer.net/main/templates/
http://www.neuroticweb.com/recursos/2-columns-layout/



Dalje mi se neda raspravljat...

[malixx]

kak ti možeš meni reći da ja nemam pojma o nićem! ono što sam ja napravio u phpu i vbu možda ti nećeš nikad moći, nemoj mi govorit nešto ako me ne poznaš.

Kao drugo nisam neki retardirani kreten da mi tu davaš s j... googla stranice, ja sam pitao jel ti imaš možda neku SVOJU stranicu za učinje koja je najbolja ! a ove kaj si mi dao takvih sam si već našo dosta, i učim na njima.

Koristim google već barem 10 godina, i zato mi nemoj spominjat taj google više ! Eto, ni meni se neda raspravljat. hvala bog

[F@NTOM]

A lika...lol.

[malixx]

evo, ja si radim svoj od početka, jel si mislio pod ovim align right da ovako stavim margine u css? il ima drugi način bolji za to centriranje.
1. E al još ne radi u exploreru u sredini, šta sad treba?
2. I jel dobro ovo šta sam stavio u postocima, jel bolje u njima stavljat il u px?
3. I kako smjestim desni box skroz desno?

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrap {
  border: 1px solid;
  background:#99c;
  margin-left: auto;
  margin-right: auto;
  width:750px;
  }
#header {
  border: 1px solid;
  background: #FF00Cc;
  width: 100%;
    }
#lijevibox{
  border: 1px solid;
  background:#99c;
  width: 20%;
}
#desnibox{
  border: 1px solid;
  background:#99c;
  width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="header">header</div>
    <div id="lijevibox">lijevi box <br><br><br><br><br><br><br><br><br></div>
    <div id="desnibox">desni box</div>
    <div id="footer">footer</div></div></body></html>

[F@NTOM]

Ako hoces wrap centrirati na sredinu browsera stavi margin: 0 auto 0 auto; bez floata

[zwer]

Ajmo ispocetka...

- pod "align right" nisam mislio nikakve proklete margine. Zaboravi margine.

1. E al još ne radi u exploreru u sredini, šta sad treba?

Treba ovako:
http://www.google.com
upises: "how to center div in IE"
dobijes: "The trick is to add text-align: center; to the body selector, then add the usual margin: 0 auto; to the container selector which you want centered. Apply text-align: left; on the container to counter the center align for body."

Prevedeno na hrvatski: Trik je da dodas text-align: center u body css stil, i uobicajenu marginu 0 auto. Ako ti je i tekst centriran, dodas text-align: left na svaki container.

2. I jel dobro ovo šta sam stavio u postocima, jel bolje u njima stavljat il u px?

Pa logicno je, ako radis FIXED WIDTH site, koristis velicinu containera u pikselima, a ne postocima. Da radis liquid, onda ti netrebaju fiksni vec postoci sirine ekrana.

3. I kako smjestim desni box skroz desno?

http://www.google.com
upises: "how to align box right css"
dobijes: (drugi link) "I'd float the id/class right, suppose you've done that. I'd put it in front of any content I'd like on the left. "
Prevedeno na hrvatski: floatas box desno. float:right;

Kao drugo nisam neki retardirani kreten da mi tu davaš s j... googla stranice, ja sam pitao jel ti imaš možda neku SVOJU stranicu za učinje koja je najbolja ! a ove kaj si mi dao takvih sam si već našo dosta, i učim na njima.
Koristim google već barem 10 godina, i zato mi nemoj spominjat taj google više.

Jesi siguran u ovo? Sve ovo sto sam ti napisao imas na 3 od 4 linka koja sam postao par postova ranije.

Na sto ja gubim vrijeme, tjesim se jedino da sam te nesto naucio, u najgorem slucaju googlat

[malixx]

ja kažem nemoj, al nemoj mi spominjat google ! i on opet ! aaaaaaa

aha, evo jesam ovak body{text-align: center ;} i sad je u sredini,
al sad su u exploreru boxevi u sredini a u firefoxu ljevo, i slova.. ti kažeš da onda alignam sve ljevo..?

i skužio sam poravnanje desno, al mi nije jasno, stavio sam
position: absolute; right: 0;
ali onda je skroz do desnog ruba ekrana box, i šta sad? šta se on ne treba odvajat prvo od sredine
prema desno? ili s desna prema unutra, kako to?

[F@NTOM]

ne znam sto si tako alergican na google i to da ti covjek ima volje pomoc??

[malixx]

ma nisam alergičan, pa služim se s googlom, al ne mora mi ga stalno spominjat koda ne kužim da moram tamo tražit! al neke stvari bolje i lakše je kad čovjek objasni ! i drago mi je kaj oće pomoć !

stoga nastavak:

"i skužio sam poravnanje desno, al mi nije jasno, stavio sam
position: absolute; right: 0;
ali onda je skroz do desnog ruba ekrana box, i šta sad? šta se on ne treba odvajat prvo od sredine
prema desno? ili s desna prema unutra, kako to?"

[zwer]

Meni stvarno nije jasno ni sta ti radis ni kako mozes bit tako prokleto LIJEN i ocekivat da ti ja prakticki napravim CSS sitea.

Ajmo po TRECI PUT (2x u ovom threadu, jednom u PP) isti link:

( OVAJ LINK KLIKNI ) http://www.neuroticweb.com/recursos/...yout/index.php

Objasnjenje za spore i lijene (da ne kazem nesto gore ):
Na tom siteu imas GENERATOR KODA za 2 column layout. Upises sirine columna u pikselima i on izgenerira gotovi kod, koji provjereno radi u IE7+ i FF3+. I centriran je, zamisli!
Ovaj dio u kojem pise CSS je kao sto prozor kaze, CSS kod, njega ili pasteaj unutar style taga u HTML file ili ga linkaj kao eksterni file, primjerice style.css.
Ovaj dio gdje pise HTML code, to pejstas unutar BODY taga svog html file-a.

[malixx]

Gle tu sam bio sto puta, al stvarno, i fakat mi ne treba to kad ja oću
sam skužit od početka kak to ide, a ne da mi tu napiše hrpu koda sad se
ja pitam koji je koji box, nemam blage, zato vidim da mi samo daješ gluposti
koje sam već sve prešao a ništa mi nemožeš objasnit, tj neda ti se, onda
ću i sam tražit na googlu, nemoraš mi ti davat linkove, ne tražim da mi
ih kopiraš, neg objasniš. Al nemoraš. samo gubim vrijeme. bye

[zwer]

Ti bi sagradio vikendicu, al' ne tako da ju sam gradis, vec da sjedis i pijes pivu dok je drugi grade za tebe...

Ako ne shvacas primjer sa zadnjeg linka (koji brat bratu ima 15-ak linija "koda", od kojeg je 95% isto kao onaj tvoj), onda sine ne razumijes ni osnove CSS-a ili HTML-a, vise ni ja neznam sta te muci zapravo. Koliko sam ja vidio, na onom linku koji si mi originalno poslao je barem 10 puta kompliciraniji i nepregledniji kod.

Jedino sto mogu rec je da si ti tu vikendicu krenuo gradit u kupacim gacama i bez materijala, da se slikovito izrazim

EOD s moje strane, ja mislim da vec pola foruma zna slozit 2CL.

[F@NTOM]

pisem iz glave ovo, tako da mozda nije ni tocno.

znaci imas kod

html

<div id="wrap">
<div id="header"></div>
<div id="sadrzaj">
<div id="lijevi_stupac"></div>
<div id="desni_stupac"></div>
</div>
</div>

css

body {text-align:center;}
#wrap {width: 500px; margin: 0 auto 0 auto;}
#header {width:500px; height:200px; float:left; margin:0; padding:0;}
#sadrzaj {width: 500px; float:left; clear:left;}
#lijevi_stupac {width: 250px; float:left;}
#desni_stupac {width:250px; float:right;}

[malixx]

Poruka za zwer:

i da si imalo gledo ovo:
http://www.neuroticweb.com/recursos/...yout/index.php
ta glupost ti ne radi u exploreru, zato i je tak jednostavna,
kaj ne vidiš da nije na sredini !

Hvala Fantom, sutra ću probat. Čujemo se.

[zwer]

Autor malixx

ta glupost ti ne radi u exploreru, zato i je tak jednostavna, kaj ne vidiš da nije na sredini !

Kod mene je (IE i FF). Na laptopu je (IE i FF). Na laptopu od frenda je, i na kompu od stare je (takodjer IE i FF).
Izgleda da imas virus koji je_e CSS.

(da ne ispadne da ja pricam pizdarije)

[malixx]

pa dobro kaj je tebi !

kaj me zezaš za prvi april ?????

sad sam dao svim frendovima kod i u IE ne radi, nemoj pričat gluposti,
jesti ti probo izvadit taj css i html, i spojit ga na kompu u novom .html filu?

sorry al ne radi. _Fantom, probaj ti

[zwer]

A neznam, izgleda da ste i frendovi i ti blagi uzas sto se tice css/html-a. Ili imate IE4 i Safari/Lynx za browsere...



http://img3.imageshack.us/img3/8120/nocommentx.jpg

Copy/pasteanje u fileove: 30 sekundi po fajlu
Otvaranje u 2 browsera: 30 sekundi.
screenshotanje s kodom i upload: 2 min

Vrijeme koje sam tebi upravo ustedio, po slobodnoj procjeni: 10ak sati.

[F@NTOM]

Autor zwer

A neznam, izgleda da ste i frendovi i ti blagi uzas sto se tice css/html-a. Ili imate IE4 i Safari/Lynx za browsere...



http://img3.imageshack.us/img3/8120/nocommentx.jpg

Copy/pasteanje u fileove: 30 sekundi po fajlu
Otvaranje u 2 browsera: 30 sekundi.
screenshotanje s kodom i upload: 2 min

Vrijeme koje sam tebi upravo ustedio, po slobodnoj procjeni: 10ak sati.

koji ti editor koristis?..ja sam na pspadu.

[zwer]

Autor F@NTOM

koji ti editor koristis?..ja sam na pspadu.

Ovo na screenshotu je Notepad++ (pise gore u traci hehe ), al' dok radim siteove najcesce u Dreamweaveru zbog svih onih auto-complete funkcija. Notepad++ je super za ovako brze promjene i jer nije orjentiran na par jezika vec kuzi brdo njih.

Bas gledam featurese PSPad-a, nije ni to lose, cini se dosta mocniji od N++

[malixx]

gle, ti si nekaj sebi unutra posebno podesio, jer ja vidim da imaš 2 (DVA) headera ! znači
ti si nešto podešavo sebi i css!!!!
ili ako to nije, možda imaš neku noviju verziju IE koji ja nemam??
Jedno od tog mora bit!
http://www.neuroticweb.com/recursos/...yout/index.php
tj. meni to radi kad otvorim tu na stranici u IE.. al kad na kompu otvorim neće,
možda moram uplodat na host ? al ne vjerujem da je to bitno

I tu sam sad otvorio editor, pa taj box u sourceu vidim da fali hrpa cssa kojega opće nema tamo
u objašnjenju.. nije onda ni čudo zašto ne radi u ie !
.....nadopuna....

evo sad je gotovo, radi u ie i ff, cjeli kod je tu pa ga isrprobajte.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {text-align: center;}
#wrapper {
  text-align: left;
  margin: 0px auto;
  padding: 0px;
  border: 0;
  width:707px;
  background:#99c;
  }
#header {
  margin: 0 0 15px 0;
  background: #FF00Cc;
  height: 170px;
}
#lijevibox{
  float: left;
  width: 150px;
  background: #2E0AF3;
}
#desnibox{
  margin: 0;
  float: right;
  width: 500px;
  margin-right: 28px;
  background: gray;  
  }
#footer{
  clear: both;
  background: #FFccCc;
}
</style>
</head>
<body>
<div id="wrapper">
        <div id="header">header</div>
        <div id="container">
                <div id="lijevibox">lijevi box <br><br><br><br><br><br><br><br><br></div>
                <div id="desnibox">desni box<br><br><br><br><br><br><br><br><br></div>
    </div>
        <div id="footer">footer <br><br></div>
</div></body></html

Evo, aj ispravi pogreške koje bi vi promjenili, i napišite tu u post.
I jel je bolje da bude u #desnibox ovako:

float: right;margin-right: 28px;
ili da bude ovako:
float: left; margin-left: 28px;
Neznam s koje strane se mora ravnati(jer je ljevi box align: left)..

---nadopuna---

I zadnje važno pitanje vezano za CONDITIONALS CSS. Naime, prepoznaje mi
samo IE browser <!--[if IE]>, a npr od FF <!--[if Grecko]>, OPERE <!--[if Opera]>,
i od drugih ne prepoznaje, zašto, dal imaju oni neke svoje nove šifre, tj imena nova?