- This topic is empty.
August 27, 2013 at 10:35 am #148246
I need a bit help, I am developing a custom theme for WordPress: http://bjorn.flabifitness.hu/
I need a fixed header, footer, menu area. And a fluid content area with page content (an image).
During browser window size is changing, only the content need to be changed/adjusted to view-size, without scrollbar, and if the picture is bigger than the browser window, or the monitor, it should be adjusted to the size of browser-window. (fluid)
Header, footer, and menu (vertical position) should be at the same place. (fixed)
This is my CSS-code for now: (main: all of page, inside header, container(sidebar, content), footer)
position: absolute; background-color:#434343; z-index:0; display: block; opacity: 0; top:0px; left:0px; width:100%; height:100%; text-rendering: optimizeLegibility;
background: #1d1d1d; margin: 0; padding-top: 15px; padding-left: 35px; padding-bottom: 13px; min-width: 100%; margin:0px auto;
clear: both; min-width: 100%;
/* two columns*/
float: none; /* not needed, just for clarification /
/ the next props are meant to keep this block independent from the other floated one */
`August 28, 2013 at 1:59 am #148324
Perhaps you could put something in Codepen for us to play with.August 28, 2013 at 3:51 am #148338
Ok, thanks! :)
so the main point is:
image should be resized only, and other elements should be sticked to the image container.August 28, 2013 at 4:03 am #148340
Is the image there for Content purposes or Styling?August 28, 2013 at 4:48 am #148343
for content purposes, this would be all the content (in content area)August 28, 2013 at 4:49 am #148344
I stripped out all of the images into the background and I think I’m mostly there.August 28, 2013 at 4:58 am #148346
I checked, now content area is adjusted by vertical resize.
The image gets smaller as you narrow the window doesn’t it?
You can’t keep the footer at the bottom of the page at all times AND have the image fill the rest of the content area exactly unless it distorts to do so.August 28, 2013 at 6:14 am #148352
Yes, your solution is perfect, and I need the same horizontally and vertically together. just like here: http://www.caesarlima.com/August 28, 2013 at 7:07 am #148363
So it’s perfect..or isn’t it, I’m confused?
I’m pretty sure you can’t be responsive BOTH ways without distorting the image..unless there is something else going on.August 29, 2013 at 7:07 am #148498
In this site, can You guess, what they use?:
It is cropping the images, but I cannot extract the appropriate CSS.
- The forum ‘CSS’ is closed to new topics and replies.