Styling catalogue icons and text

-

i working on web page: http://www.cprtrainingmackay.com.au/courses , trying style catalogue boxes display entire catalogue name , image icon. if @ page right now, you'll see text being hidden behind catalogue image. there way fix if client enters long catalogue name, box automatically adjusts height accommodate?

 

also, i've tried playing line-height css property of text there isn't such big gap between lines, doesn't seem changing anything, how change this?

 

thanks in advance.

 

nicole

let's examine you've got going on here... each catalog item wrapped in div.shop-catalogue.  , div.shop-catalogue set have height of 180px , set "overflow:hidden" means content inside rendered on 180px in height not visible. 

 

if had setup can have number of lines of catalog name long name, push icon catalogue further down inside div.shop-catalogue , see half of shop icon because you've got 4 lines of catalog title push icon down.

 

if decided, instead, remove "overflow:hidden" css property div.shop-catalogue div.shop-catalogue grow in height accomodate lines title , icon, if had 1 row has few one-line titles , catalog 4 line title, catalog item 4-lined title taller rest , throw off layout because catalog items different heights.

 

i think best bet here have client try keep catalog names maximum length.  then, in css set catalog titles 3 lines in height , past hidden "overflow: hidden".

 

you on right track line-height option-- should use make sure titles don't have vertical spacing-- right now, can fix adding css style main stylesheet says:

 

.shop-catalogue h4 { line-height: 1.2; }

 

this make each line has little spacing.  if want make title takes 3 lines icons , text consistently formatted should adapt css to:

 

.shop-catalogue h4 { line-height: 1.2; height: 3.25em; overflow: hidden; margin: 5px auto; }

 

this make sure titles 3 lines in height little space below , hide text on 4th line , preserve layout.  now, in order bring catalogue image closer bottom of title, can add css main stylesheet:

 

.shop-catalogue .image { padding: 0; }

 

this remove padding that's set in bc's default modulestylesheets.css file.  if css changes in all.css file catalog should better , accomodate maximum of 3 lines title on hidden. can't allow number of multiple lines because having 4 or more lines title items repeating share same style break layout , lead different catalog items having different heights , make shop catalog page inconsistent , break layout.



More discussions in How to - HTML / CSS / JavaScript


adobe

Comments

Post a Comment

Popular posts from this blog

Thread: gpg: Conflicting Commands

-
Image
hi, relatively new linux (have used many live disks) , have had install of ubuntu 12.04 few days now. part have found easy use , have been comfortable it. have first question can't resolve myself: adding googles repository list. when first ran command supplied google found did not have wget installed. used apt-get install it. worked fine (as far can tell) re-ran googles code : wget -q https://dl-ssl.google.com/linux/linux_signing_key.pub -o- | sudo apt-key add -deb http://dl.google.com/linux/deb/ stable non-free , message 'gpg: conflicting commands' tell me going wrong , how fix please new script : wget -q https://dl-ssl.google.com/linux/linux_signing_key.pub -o- | sudo apt-key add linux_signing_key.pub need edit /etc/apt/sources.list , add line @ end deb http://dl.google.com/linux/deb/ stable non-free end hope find usefull edit: need root or use sudo make changes /etc/apt/sour...
Read more

Adobe Acrobat Pro , Terminal Server Use

-
hello,   a fellow employee requires adobe acrobat pro installed use, , management me have sorted out. employee uses thin client connect terminal server of administration work.   i require single license adobe acrobat pro used single user.   will there license issues installing adobe acrobat pro on terminal server?   can install adobe acrobat pro on terminal server?   thanks, david hi david,   yes, can install acrobat terminal servers... !   the licensing terminal server considered normal licensing process, means need buy many number of licenses acrobat number of users accessing terminal server (like citrix) access software. eg if 10 users accessing citrix server @ particular time use acrobat software need 10 licenses same. More discussions in Installing, Updating, & Subscribing to Acrobat adobe
Read more

when i try using AE CC 3d camera tracker after the first step it says "Analysis solve failed." help?

-
im attempting editor , trying edit segment video game (bo2) , im trying have text stick wall in video. every time try using camera tracker spends 5 minutes completing first step , guess succeeds because goes second step says "solving camera" or that, red bar appears saying "analysis solve failed." do? if you're trying use 3d camera tracker on movie froma vieo game not shot real camera, camera tracker unable solve "real" camera matched scene. More discussions in After Effects adobe
Read more