Reaching the limit of pocket-grid css ?

[pwired]

In the top part of my website, I want to have a background image and then over this image, I want to show

a little banner, a navigation menu and at the bottom 2 small images.

I have always used pocket-grid css for everything but now I face a few problems that I could not solve so far.

If I put the background image for the block-group in it's own first row (class block) it will be responsive but then I have
to use negative margins for the rows holding the other parts to give them the right position over the background image

and everything will move away on different screen-sizes.
Another solution would be to give the parent block-group directly the background image like this:
<div id="top" class="block-group" style="background-image:url(<?php echo $image->url ?>); background-repeat: no-repeat; background-size: contain;">
But then the problem is that this div needs to have a content with a correct height for every screen-size or the background image will not show up or only partly show up.
I was wondering if you could accomplish this more easy with another css grid e.g. with susy or maybe there is another css way that would still make this work with pocket-grid.
 

[dowmedia]

Please provide code.So that we can get the exact idea.    

[kongondo]

As we wait for some code and/or graphic/drawing, I can say with almost 100% certainty that this should work with pocket-grid  css. I use it everywhere . Remember that pocket-grid, actually, does, eh, nothing...or nothing much (seemingly). All it gives you out of the box are 100% width and float:left when you use the class .block. It sounds to me like you want to position some image absolutely. Shouldn't you be able to accomplish that with the normal parent element positioned relatively and the thing you want to stay in place positioned absolutely?

Anyway, I don't need to tell you that pocket-grid does not get in the way of your CSS. It sounds to me like the issue is your CSS, not pocket-grid   

Edited March 23, 2016 by kongondo

[pwired]

This is the last I tried by giving the parent block-group the background image

<div id="top" class="block-group" style="background-image:url(<?php echo $backpicture->url ?>); background-repeat: no-repeat; background-size: contain;">

<div id="banner" class="c20 block">
<?php echo "<img src='$banner->url'>"; ?>
</div>

<div id="horizontalplacer" class="c30 block">
</div>

<div id="topnav" class="c50 block"><?php
echo "<ul id='' class=''>";
echo "<li id=" . '"gastenboek"' . ">" . "<a href=" . '"' . $pages->get('/gastenboek/')->url . '"' . ">"  . $gastenboek . "</a>" . "</li>";
echo "<li id=" . '"videos"' . ">" . "<a href=" . '"' . $pages->get('/videos/')->url . '"' . ">"  . $videos . "</a>" . "</li>";
echo "<li id=" . '"fotos"' . ">" . "<a href=" . '"' . $pages->get('/fotos/')->url . '"' . ">"  . $fotos . "</a>" . "</li>";
echo "<li id=" . '"intro"' . ">" . "<a href=" . '"' . $pages->get('/intro/')->url . '"' . ">"  . $intro . "</a>" . "</li>";
echo "<li>" . "<a id=" . '"start"' . " href=" . '"' . $pages->get('/')->url . '"' . ">"  . $home . "</a>" . "</li>";    
echo "</ul>";
?>
</div>

<div id="picture1" class="c50 block">
<?php echo "<img src='$pic1->url'>"; ?>
</div>

<div id="picture2" class="c50 block">
<?php echo "<img src='$pic2->url'>"; ?>
</div>

</div>

[pwired]

The problem I have with pocket-grid is to show different div's over a parent div that has a background picture.

I don't like to have to fall back to work arounds by giving class blocks negative margins.

If I would not use pocket-grid at all for this I could do this with giving the parent div a position relative

and the other div's that has to show over it position absolute.

[kongondo]

How can the problem be pocket-grid? All it does is give you a width; nothing else. You can override its default 100% widths and give an element a 20% width, or 75% or 33.33333% or whatever....but you know this. So, width has nothing (much) to do with this. What you want to focus on is positioning and that's your custom CSS

Do you have a graphic/drawing we can look at (btw, I am the last guy you should be taking CSS advice from - it's my weakest link!  - but I stand by what I've said so far..  )

Edited March 23, 2016 by kongondo

[pwired]

Thanks for your replies.

I know all that but the problems arise as soon as you want to give a block-group, or a class block (column)

a background picture for all the other parts. The background picture will not show up correctly unless there

is other content present with a specific height.

[kongondo]

You mean like this? How about adding a (min)height to the div#top or whichever element has the background img?

Edited March 23, 2016 by kongondo

[pwired]

By the way this is the background picture, and over it I want to show:

on the top left a little banner, on the top right a horizontal navigation menu

on the bottom left and right 2 pictures.

So easy with plane html and css but a block-group and class blocks of pocket grid is making stacking

different div's over a parent block-group div a pain.

[pwired]

Thanks for the link kongondo but if I set width and heigth for the div holding the background picture

it won't autoresize anymore. Then I would have to change these values for each device screen-size

with @media rules. It seems to be the only solution.

Does anyone know if susy css takes care of this ?

[kongondo]

A width of xx% auto-resizes to fit the available space. That's why pocket-grid uses percentages. So, give it a 100% width if you want it to fill the whole screen...but check if that affects your background-img and if you need to style that as well.

Edited March 23, 2016 by kongondo

[pwired]

% does not work because like you mentioned: it distorts the ratio of the background picture.

The block-group div needs a fixed width and height ratio in px the same ratio as the background picture,

and the css rules apply different for a background picture:

div#top{
width: 1075px;                    /* block-group div needs fixed ratio width and height in px */
height: 280px;                    /* or the background picture will not show correctly */
background-size: 100% 100%;     /* you have to put this rule to cover the block-group div with the background picture */
}

1.

So far so good but of course, now that one block-group has a width in px, this breaks auto responsive resizing

for all the other block-groups in pocket grid,

so to try to escape from setting fixed ratio widths and heights in px for different screensizes:

if there is a class block inside the block-group with content the background picture resizes depending

on the height of the content.

2.

I will try to make a transparant png with the same size as the background picture and put that inside

a class block and see if the block-group background picture resizes correctly and responsive.

This could be an all in one solution.

3.

Giving the block-group div a default width of 100% then you only have to change it's height

according to the ratio of the background picture. You only have to do this for 4 or 5 different

screen-size devices with @media rules. This is a workable solution.

4.

Another way to escape from setting fixed ratio width's and height's in px would be not to use the

background picture property but to put the picture directly inside a class block.

Then it will be directly automatically responsive for all screen-sizes but the disadvantage of this is that

you have to use different negative top margins for the other class blocks to position them correctly over

the picture used as background picture.

I told you that a background picture is a different cookie from a "regular" picture.

Im not sure if other css grids handle this more easy, I guess this will be the same in any one of them.

[kongondo]

Maybe helpful? http://stackoverflow.com/questions/12609110/responsive-css-background-images

Maybe some other (non-pocket-grid) nested div within div#top?

[benbyf]

just to reiterate @Kongondo - Stop fighting other peoples code and do a little CSS I've literally never used any grid system as when need one I just write a little css and BOOM.

[pwired]

Ok thanks to the link from Kongondo I followed:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

and found the solution there:
use padding-bottom and give it the following percentage: (height/width x 100)

In my case I have it now like this:

div#top{
background-image:url(banner4.png);
background-repeat: no-repeat;
width:100%;
padding-bottom: 26.2793%;
background-size: cover;
background-position:center;
}

Background picture is showing up correctly and all responsive now

[pwired]

I've literally never used any grid system as when need one I just write a little css and BOOM.

@benbyf

What point are you making there ? Your boom css skills not needing a css grid ? We'll there's whole threads in this forum about using css grids with processwire and which one is used and why. Pocketgrid happens to be one of them, using it for years and could do everything with it until today.

Honestly, did you know about using padding-bottom (image height/width x 100)%; ?

We'll I didn't but now I know thanks to helpful people in this forum.

[kongondo]

@pwired, I didn't hear you apologising to pocket-grid  . Glad you sorted it out  .  

[LostKobrakai]

Honestly, did you know about using padding-bottom (image height/width x 100)%; ?

We'll I didn't but now I know thanks to helpful people in this forum.

It's the goto way of implementing responsive video or iframes.

[Martijn Geerts]

I think what @benbyf wants to say that it is good to really understand CSS so that you don't have to rely on a grid system. CSS looks simple, but because it loose nature, the inheritance and browsers issues it's quite difficult.

[benbyf]

Sorry didn't mean to be obnoxious.

Like I said, I stay away from these "tiny" frameworks or libraries as I actually want to understand for myself how to accomplish the desired result. Using a library like the above I find myself having to learn how someone wants me to implement their code instead of how to actaully implement the result myself... which as a front-end guy I Love learning about.

On the flipside I would see myself using all sorts of tiny libraries and framesworks on the backend as i'm not as familiar.

[Soma]

Pocketgrid is neither a framework nor a library, it's an approach.