would like to solve this problem somehow nicely.
<div class="leftmenu">
some menu
</div>
<div class="content">
some content
</div>
Well.. and the question is, what to write into css file to have "leftmenu" under "content" when resizing?
Assume that media query is in use, divs are next to each other before resizing and "leftmenu" above "content" after resizing.
Thanks a lot!
jiri
EDIT1:
the fiddle is here: http://jsfiddle.net/nkkojmdf/2/
what I would like to have is yellow "leftmenu" under blue "content".
EDIT2:
"under" in previous is meant in 2D.
Well, finally found the solution
display : flex
was what I wanted: http://jsfiddle.net/nkkojmdf/4/
Anyway, thanks for help!
Related
I do not understand why my portfolio area is going full width. I would like that the row that contains 4 pictures, is staying inside the content area (red lines I marked):
[![Content area][1]][1]
I have tried everything that I know until now. In the developer tools I was trying to set a smaller width, but that did not work out. Does anybody have a suggestion on what I can do?
[Link to the testing page][2]
Add class section-boxed to this <div class="wpb_column vc_column_container vc_col-sm-12 section-boxed">
you need to wrap your pictures container with a div with this class section-boxed and it will work.
As suggested by aimenzenasni, adding the class to the div (highlighted below) will sort it. Verified in Chrome Developer Tools...
Source Screenshot
Sorry guys I made new one for this because it couldn't be done like I previously explained.
I want image to go over previous div and so it stays always at the same exact spot.
It's an border image for portfolio div what I'm trying to align here correctly, so that it makes peek kind of effect over previous div.
<div id="previous">some content</div>
<div id="portfolio">
<div class="some-other-content">Whole lot of html</div>
</div>
Link to my jsfiddle
Use in your CSS
"position:absolut" to set a fix position in your Window.
see more options here:
http://www.css4you.de/position.html
I have 3 vertically aligned div (header, content, footer)
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Like this:
Just like in this example: http://jsfiddle.net/jS6pa/2/
(Example from here: http://peterned.home.xs4all.nl/examples/csslayout1.html)
As you can see in the jsfiddle example, I'm unable to complete all the requirements. The footer div doesnt collapse the content when I resize the window. If I make some tweeks I can achieve this but then the overflow:scroll doestn work and the scrollbar is not displayed
Here is another way I tried to solve this ( with no succes :S ) : http://jsfiddle.net/rv4XS/31/
I dont know if one way or another is the best approach to solve this. Just check the first or the second jsfiddle to see which one is the best
How can I achieve a full height content in a scenario where the header has dynamic content and at the same time, show a scrollbar when the content is overflow?
Thanks in advance for any help.
Ok I finally achieve this, using javascript.
The idea is simple. The height of the header has to be setted, no matter what.
For this I dont know why (maybe because this div was called in ajax) but the jquery .height() method didnt worked for me, but using the clientHeight method worked for me well.
var header = document.getElementById('headerDiv');
if(header)
{
$('contentDiv').css('top', header.clientHeight);
}
I created a testcase here http://testcases.site44.com/ in IE-7 dropdowns are not coming over banner image. in firefox and chrome it's fine.
Please help to find the issue.
IE has a different approach in understanding z-index.
Besides the very irritating approach of HTML in the mentioned link, you should do the following:
if you have 2 divs, and in the first one there is something that should go over content in the second one, than you need to set z-index on both of them, and a higher value for the one that has the content that goes over the other.
example:
<div id="wrapper">
<ul id="flyout">
//
</ul>
</div>
<div id="content">
//
</div>
CSS:
#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}
IE now understands that the content in the first div should go over the content in the second div.
Try to put yours element id="footer" with a higher z-index than id="main"
Remove
z-index:1 from div id="banner" do this changes for ie-7 only
in-fact only z-index:1is affecting for ie-7
I have currently the following problem:
The footers width gets smaller as soon as i click on a product. Live example here:
(Small footer:)
http://osolemio.nl/serdar/index.php?route=product/product&path=59&product_id=97
(How it should be:)
http://osolemio.nl/serdar/index.php
I have tried several ways by editing the css, width 100% etc but nothing worked.
Someone see what is wrong??
Thanks in advance.
The <div id="content"> is not closed properly. It has to be closed before <div id="footer">.
It's because your footer in the product page is getting rendered inside #content while in the main index page it's outside.
You have either forgotten to close any div or the code coming from CMS is screwing up your markup.
In the product page there is one div which doesn't close (without </div>).
Find out it and add </div>. It's inside the <div class="product-info"> element
Take the #footer element out of the #content element and put it immediately after the #content element.