block in background?
Permalink
Greetings! I am very new (=noob) to C5 and all, although I have some experience in html. I just found C5 as a CMS, and it is great so far :) I just have a small problem...
I enthusiastically started to transform a design I made once into a C5 template and so far things are going on great :) As you can see in the attached file there is a header witha n image. The problem is that this image has to become a slideshow. It now consists out of 2 divs, one with the white border and the logo, and the div underneath that with the picture of the drops (mind that it continues underneath the menu). In the div that deals with the image (so the 'deepest' div) i made an area, which works great, and I can add blocks (including a slideshow block) to it. The problem is that when I do so, the block does not stay underneath the logo, but comes all the way to the top and also when viewing the page it is on top of everything... How could and should i fix this problem?
Many thanks in advance!
P.S.: Don't mind the selected text in the image, and also don't mind the 2 home buttons in the menu... :P
I enthusiastically started to transform a design I made once into a C5 template and so far things are going on great :) As you can see in the attached file there is a header witha n image. The problem is that this image has to become a slideshow. It now consists out of 2 divs, one with the white border and the logo, and the div underneath that with the picture of the drops (mind that it continues underneath the menu). In the div that deals with the image (so the 'deepest' div) i made an area, which works great, and I can add blocks (including a slideshow block) to it. The problem is that when I do so, the block does not stay underneath the logo, but comes all the way to the top and also when viewing the page it is on top of everything... How could and should i fix this problem?
Many thanks in advance!
P.S.: Don't mind the selected text in the image, and also don't mind the 2 home buttons in the menu... :P
Hey, thanks for your fast reply :) I guess it has to do with that, and i don't mind that it pops out on top in the edit mode... But the problem is that i guess that according to the css it should be already in the background, and the image actually is already in the background, so that should be ok, right? But i guess i miss something important here... :(
Not sure since you stated this was a custom theme.
I would suggest that you take a look at the good ole "Yogurt Theme" css file. It is a great launch file so you can see how the css is laid out for C5. It should put you along the right path for themes for C5.
It will take a little tinkering of your css file to make it all lay out properly both live and in edit mode.
If all else fails, post a copy of the portion of your css file. You could also go to the IRC channel on freenode.net and ask the channel and if folks have a few minutes to look, they will offer their words of wisdom.
I would suggest that you take a look at the good ole "Yogurt Theme" css file. It is a great launch file so you can see how the css is laid out for C5. It should put you along the right path for themes for C5.
It will take a little tinkering of your css file to make it all lay out properly both live and in edit mode.
If all else fails, post a copy of the portion of your css file. You could also go to the IRC channel on freenode.net and ask the channel and if folks have a few minutes to look, they will offer their words of wisdom.
Sorry hard to quite understand with out looking at the site in source mode but from what I gather you need to make a "clear fix" in your css and apply it in the template below the header div.
example
in your style sheet:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
example
<div id="header"> something is in here </div> <div class="clearfix"></div> <div id "menu"> my men is in here </div>
in your style sheet:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
Go into the header.php file, identify the name of css item, modify in the css file and it should be ok.
Keep in mind, sometimes, dependent on your css, it will overlap in edit mode. There are more solutions about this in the forums...check the design forum posts.
Best
Bill