PC Ekspert Forum

PC Ekspert Forum (https://forum.pcekspert.com/index.php)
-   Web dizajn, programiranje i ostalo (https://forum.pcekspert.com/forumdisplay.php?f=39)
-   -   CSS help ! (https://forum.pcekspert.com/showthread.php?t=143385)

malixx 28.03.2009. 16:02

CSS help !
 
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 28.03.2009. 17:32

:hitthewal:

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. :nono:

malixx 28.03.2009. 22:29

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 29.03.2009. 15:45

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.

:kafa:

malixx 29.03.2009. 16:16

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

zwer 29.03.2009. 16:49

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

postoji forum i PP.

zwer 29.03.2009. 21:17

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 30.03.2009. 19:27

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

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!?

Citiraj:

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 31.03.2009. 12:27

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. :beer:

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. :goood:

malixx 31.03.2009. 19:45

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 01.04.2009. 11:50

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/

:care: :google:

Dalje mi se neda raspravljat...

malixx 01.04.2009. 16:47

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 01.04.2009. 17:05

A lika...lol. :D

malixx 01.04.2009. 19:02

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:

<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 </div>
    <div id="desnibox">desni box</div>
    <div id="footer">footer</div></div></body></html>


F@NTOM 01.04.2009. 19:12

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

zwer 01.04.2009. 19:27

:hitthewal::hitthewal::hitthewal::hitthewal::hitthewal::hitthewal::hitthewal::hitthewal:

Ajmo ispocetka...

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

Citiraj:

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.

Citiraj:

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.

Citiraj:

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;


Citiraj:

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? :lol2: :roller::roller::roller: 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 :goood:

malixx 01.04.2009. 19:33

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

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 01.04.2009. 19:47

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

malixx 01.04.2009. 19:53

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 01.04.2009. 20:06

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 :fuming:):
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 01.04.2009. 20:17

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 01.04.2009. 20:29

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

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 :D

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

F@NTOM 01.04.2009. 21:08

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

znaci imas kod

html









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 01.04.2009. 21:24

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 01.04.2009. 21:30

Citiraj:

Autor malixx (Post 1313530)
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. :hitthewal:

(da ne ispadne da ja pricam pizdarije)

malixx 01.04.2009. 22:07

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 :goood:

zwer 01.04.2009. 23:06

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... :goood:

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

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. :stoopid:

F@NTOM 02.04.2009. 08:04

Citiraj:

Autor zwer (Post 1313659)
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... :goood:

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

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. :stoopid:

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

zwer 02.04.2009. 08:23

Citiraj:

Autor F@NTOM (Post 1313795)
koji ti editor koristis?..ja sam na pspadu. :)

Ovo na screenshotu je Notepad++ (pise gore u traci hehe :D), 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++ :chears:

malixx 02.04.2009. 18:28

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:

<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 </div>
                <div id="desnibox">desni box</div>
    </div>
        <div id="footer">footer </div>
</div></body>
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