develooper Front page | perl.qa | Postings from March 2015

Re: hackathon web page displays strangely

Thread Previous | Thread Next
From:
Lasse Makholm
Date:
March 22, 2015 10:55
Subject:
Re: hackathon web page displays strangely
Message ID:
CAGDbtsnbcZndSM6JDQhgFccjb2UyFECo4YP=+8bjAoPTF5iUVw@mail.gmail.com
On Sat, Mar 21, 2015 at 3:26 PM, Tina Müller <cpan2@tinita.de> wrote:

> Hi James,
>
> On Sat, 21 Mar 2015, James E Keenan wrote:
>
>  http://act.qa-hackathon.org/qa2015/main
>>
>> In Firefox, at least, all the pages on this site are displaying in a
>> strange way.  Each page has a left sidebar with internal links and a right
>> sidebar with sponsors.  But the main content for each page only starts to
>> appear *below* the end of the longer of the two sidebars. Unless and until
>> you scroll down past the sidebars, each page appears void of content.
>>
>
> Yes, I can see that with a small window. On mobile phones of
> course too.
> I suck at CSS, happy for any ideas =)
>

I would:

   - Make sponsors a child of wrapper, after menu, so you get:
      - outer
         - berlin
         - wrapper
            - menu
            - sponsors
            - content
            - footer
         - Menu floats left, sponsors floats right.
   - Don't float content and don't set a width on it. Let it expand and
   shrink with the window.
   - On content, set margin-left to width of menu + a bit to avoid left
   margins on content collapsing into the menu. If you don't, e.g. list items
   on http://act.qa-hackathon.org/qa2015/wiki will not indent properly.

If you do this, the page should respond a lot better to different window
sizes. For very narrow windows, the content will still eventually get
pushed down below the sidebars. But to avoid that you probably have to
start making a "proper" responsive layout by applying CSS rules selectively
using media queries on window size, but that's probably not worth the
effort here...

/L


> First I could try is to decrease the min-width of the inner
> div.
>
> thanks,
> tina
>

Thread Previous | Thread Next


nntp.perl.org: Perl Programming lists via nntp and http.
Comments to Ask Bjørn Hansen at ask@perl.org | Group listing | About