4 replies [Last post]
Hplatini89
Hplatini89's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT+2
Joined: 2013-08-27
Posts: 4
Points: 7

Hello World!

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)

#main {
	position: absolute;
	background-color:#434343;
	z-index:0;
	display: block;
	opacity: 0;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	text-rendering: optimizeLegibility;
}
#header {
	background: #1d1d1d;
	margin: 0;
	padding-top: 15px;
	padding-left: 35px;
	padding-bottom: 13px;
	min-width: 100%;
	margin:0px auto;
}
#footer {
	clear: both;
	min-width: 100%;
}
/* two columns*/
.container {
   height: auto;
   overflow: hidden;
}
 
.sidebar {
    width: 242px;
    float: left;
    background: #434343;
    min-height: 92%;
}
 
.content {
    float: none; /* not needed, just for clarification */
    background: #434343;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

Hplatini89
Hplatini89's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT+2
Joined: 2013-08-27
Posts: 4
Points: 7

I am on half-way

The only thing I need is footer need to be attached to the image(container)

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Can you just remove the

Can you just remove the position absolute from the footer, it should sit below the image.

Hplatini89
Hplatini89's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT+2
Joined: 2013-08-27
Posts: 4
Points: 7

I removed and it attached

I removed and it attached footer to content area, but what I really need that on window-size changing content should change not just horizontally but vertically too.
(and if footer is absolute it would be attached to content area, and full screen would be height (header+content+footer) can it be resolved?

If header+content+footer height is smaller than full-size window, image should be adjusted and has weird size.(f.e. image is 16:9 and my monitor is 4:3, full window should be )

http://codepen.io/anon/pen/JoseB

Hplatini89
Hplatini89's picture
Offline
newbie
Last seen: 6 years 10 weeks ago
Timezone: GMT+2
Joined: 2013-08-27
Posts: 4
Points: 7

I removed and it attached

I removed and it attached footer to content area, but what I really need that on window-size changing content should change not just horizontally but vertically too.
(and if footer is absolute it would be attached to content area, and full screen would be height (header+content+footer) can it be resolved?
If header+content+footer height is smaller than full-size window, image should be adjusted and has weird size.(f.e. image is 16:9 and my monitor is 4:3, full window should be )
http://codepen.io/anon/pen/JoseB