Jump to content
php.lv forumi

Atkal background


Recommended Posts

Tātad, vēl joprojām neesmu sapratis, kas īsti ir ar to background. Man ir viena liela bilde (fons), ko vēlos savai lapelei uzlikt. Plašajam interneta atvērumam viss ir kārtībā, bet samazinot atvērumu rodas problēmas. Lai redzētu lejasdaļu (ar rulli braucot uz leju), kustas pati lapa, ko man nevajag! Vajag, lai tā ir piestiķēta pie fona un problēmas nerodas. HTHML un CSS kods zemāk

http://paste.php.lv/1b2a570281354e0c3bacde406e6c2db6?lang=php - html un css.

 

Attēlu piemēri:

#

 

Kopsavilkums: Kā fonu(veselu bildi) uzlikt kā background, tā lai nerodas problēmas stiepjot / samazinot un citādi grozot interneta pārlūku?

Edited by dcsdftw
Link to post
Share on other sites

Tas ir viens BG, tas logo arī ir uz bg. Bet bija tur paradzēta banner vieta, vienkārši man ieteica, ka vienkrāsains fons neizskatās labi, lai liek kko ar bildi saistītu, tad nu šādu uzliku. Ja es uz photoshop izgriežu to logo un ielieku vecajā (paredzētajā logo vietā) un pārējo kluci (bez logo) lieku kā background (kā agrāk), šāda problēma nebūs?

Link to post
Share on other sites

Pārlasīju šo un tavu iepriekšējo postu, nesapratu ko īsti gribi, bet ir aizdoma, ka tas nav iespējams, vismaz ne tā kā tu iedomājies :)Lai saturs būtu "piestiķēts" pie fona novāc "fixed" atribūtu fonam. Bet tad radīsies problēma, ja saturs būs garāks par bildi aiz tā būs nesmukums, fona bildes nebūs un būs balts fons.

Edited by yancho
Link to post
Share on other sites

Iedzēru vēsu ūdeni, domas noskaidrojās, padzejušo par tēmu. Teikšu ka šī ir viena no pirmajām problēmām ar ko nākas saskarties zīmējot dizainus un pārnesot tos uz HTML. Dizaina iecere uz monitora ir viens, kā to pārnest uz pārlūku, lai tā labi izskatītos uz dažādiem ekrāniem ir pavisam kas cits. Tev ir smuks gradients attēls 1280px x 1024px ar ideālu "Lorem" tekstu, bet kā redzi dzīvē viss ir ne tik rožains kā domāji. Šāds attēls vienkārši neiet cauri! Kā jau minēju ir dažādi ekrāna platumi/garumi, kas notiks uz ekrāna, kuram redzamā daļa platumā ir lielāka par 1024px, piemēram, 1920x1200, jā, tādu ekrānu nav daudz, bet tomēr? Bet tavā gadījumā lielākā sāpe ir augstums, jo saturs būs dažāds - reti kad būs tā, ka saturs būs tieši tik daudz vai maz, lai lapa izskatītos kā dizainā. Tāpēc ir jāpardomā fona attēls,piemēram, jādala pa daļām - augšas logo viens, gradients pa vidu jānovāc un beigu kājnieki ar ēnām otra daļa.

Edited by yancho
Link to post
Share on other sites

Nu ko te daudz saprast, fons ir tik liels cik viņš ir, bet ekrāna izmērs var būt "bezgalīgs"

 

Principā ir trīs varianti:

 

1. Vai nu fona attēls ir lielāks par lielāko iespējamo monitora izmēru (tādējādi nekad nebūs redzams variants, kad fona attēls izbeidzas malās vai apakšā)

2. Taisīt tādu attēlu, kas var atkārtoties kā patterns un tad ir pofig, cik liels monitors būs.

3. Attēls ir mazāks par ekrāna izmēru, bet pārējo fonu aizpilda viena krāsa, kas saskan ar fona attēla malām.

 

Ok, vizuāli uzskatam, twitter un divas lapas ko es taisīju un saskāros ar šo problēmu.

 

1. Twitteris izmanto šo variantu, viņš noliek fona bildi kreisajā augšā, un ja viņa beidzas, tad ir nesmukums.

2. Numerologi.lv Fonu pielaboju tādu, lai viņš var atkārtoties neierobežoti.

3. astrologi.lv Fons kā tavā variantā, bet pārējo laukuma daļu aizpilda viena krāsa kas saskan ar fona attēla malām

 

Vizuāli, lai top skaidrs:

 

1. http://dl.dropbox.com/u/272839/draza/foni/twitter.png

2. http://dl.dropbox.com/u/272839/draza/foni/numerologi.lv.png

3. http://dl.dropbox.com/u/272839/draza/foni/astrologi.lv.png

Link to post
Share on other sites

Modernā ideja izmantojot CSS3 - kombinēt attēlus ar "css gradients".

Principā piekrītu Briedim un teiktu, lai pārdomā un pārzīmē fonu, bet ja kristu ceļos un lūgtos, lai uztaisa tuvu tam, kas dizainā, tad vai nu mēģinātu lietot css gradientus, ko minēju iepriekš, vai dalītu fonu trīs daļās.

Arī ieliku vizuālu piemēru :)

http://dl.dropbox.com/u/150991/piemers.png

Edited by yancho
Link to post
Share on other sites

Briedi, nu jā, ņemot trešo variantu, tad praktiski sanāk, ka apakša man jāņem nost (tie TF2 cilvēciņi), tad tikai augšas logo paliek, ko uz ātru roku sataisīju. Yancho, ideju sapratu, bet problēma tāda, ka man nav fona .psd attēla, tādejādi, būs problēmas to izdarīt, ja būtu, tad uzmestu fonu cilvēkiem / headeriem vienādu un vidū krāsas kodu. Vispār, sākumā man bija tikai viena krāsa (tumši pelēka), pakonsultējos ar draugu, šis teica, lai ieliek kaut kādu bildi, būs smukāk, ir smukāk, bet jāsāk domāt par citu fonu. Varētu tā, ka augšā 2/3 ir attēls / logo (smuks img), un lejā saplūst uz gaišāku krāsu un lejā ielikt kā tu teici atkārtoto bg image vai krāsas kodu. Tikai tad jauns BG jātaisa.

 

Kaut kā lēni jau man ar to mājaslapas būvniecību iet, redzēs, kā būs. Ko par pārējo sakat? Navigācija / laukumi utt? Pieklājīga paskata? Domāju ņemt aptauju ārā un likt kko citu, jo, manuprāt, bojā visu paskatu. Tā es te uz sava pc lēnām ņemos.

Edited by dcsdftw
Link to post
Share on other sites

Uztaisīju šādu fonu - http://www.bildites.lv/images/ph7uorluev7gmi4afcw.jpg

 

Kā izskatās, kādi ieteikumi? P.S daGrevi, yancho, briedi, paldies, ka palīdzējāt, tagad tiešām viss ok. Augšā logo, pārējais #000000 bg. Vienīgi domāju, vai apakšā footer nevajag fonā ar kaut ko? Piemēram, kā tos cilvēkus iepriekš?

Edited by dcsdftw
Link to post
Share on other sites

Vajag, nevajag, patīk, nepatīk ir subjektīvs vērtējums. Objektīvi varu teikt, ka esošajā dizainā nelietderīgi tiek izmantots ekrāna platums, neticu, ka lapas mērķauditorija lieto 800x600 ekrānus :) Jau vairākus gadus aktuāli minimālais platums ir ~960px.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...