I'm making a liquid page, and I have an horizontal menubar (ul) absolute positioned to bottom (sticky footer).
No problem with this stuff, but when I resize the browser, obviously the inner elements in the menu stacked upwards each other, making the menu too high and overlapping the main content.
Is there any way to (any of the following)
make the absolute postioned menu grow "downwards"?
or to setting the edge that aligns to the bottom in a certain high (to make it grow from that point to bottom)?
or give layout to the menu making it to push the above elements (I've tried playing with overflow but doesn't work
for me)?
That's the html:
<div class="container">
<div class="izda">
Foo
</div>
<div class="dcha">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor LAST</p>
<ul>
<li>Item</li>
<li>Another</li>
<li>More</li>
<li>Item</li>
</ul>
</div>
</div>
And the css:
.container {position:relative}
.izda {background:red;
height:20em;
display:inline-block;
width:20%;
vertical-align:top;
}
.dcha {background:gold;
display:inline-block;
width:78%;
margin-bottom:3em;
}
ul {position:absolute;
bottom:0;
background:pink;
margin:0;
padding:0;
max-width:100%;
}
ul li {float:left;
list-style:none;
border:1px solid black;
margin:0 1em;
padding:1em;
}
A working example here: http://jsfiddle.net/KQhLs/2/
If you write more paragraphs, the menu go down properly thanks to the margin bottom of his father.
But when resizing the frame you can see the overlapping effect.
Thanks in advance. The web are supposed to work only in modern browsers and, if possible, with pure css (no JS).
EDIT: I think the wind is blowing these ways:
How to avoid fixed element from hovering page contents?
To end at this:
Sticky Footer for Responsive Site
But there's no useful answers...
Well, in fact I can prevent this behavior with mediaqueries, that's simple. But I'd like to know if it's there a "one for all" solution.
EDIT2: I have just read A list apart - Exploring footers. Aside JS solutions I tried all, but the problem stills here - if you put floating elements inside the footer, it overlaps the main content.
Also, I have read CSS Sticky Footer and it seems it have same problem.
I can't figure that this is impossible to achieve with pure css... should I give up?
make the absolute postioned menu grow "downwards"?
On your <ul> footer element, replace bottom:0 with top: 83%
Or if you want to control it pixelwise, replace bottom:0 with top: 100%; margin-top: -54px;
make sure your wrapper/container is relative. Underneath it place your footer as relative and add top:100%
Related
I have a 100% width Div and two absolute positioned images hovering over the Div (z-index:1;), my problem is, when the user decreases the browser window and the Div width decreases accordingly, because some elements have text wrapping etc in my theme this means that the hovering images remain in their absolute position instead of being pushed down the page like the div and other elements of the page has.
I am trying to avoid using #media in my CSS to re-position the images.
I have tried to show this in one image, but at three different browsers sizes. The first screenshot is how it should look, the second screen is around width:1030px and the final screenshot is around width:930px
In fact, I thought I had tried everything, but when trying to place the code in again to show you guys it seems I have stumbled across the answer which works this time around:
<div class="FrontPageBanner-1">
<h3>Lorem ipsum dolar sit amet</h3>
</br>
<span>Lorem ipsum dolar sit amet</span>
<img class="FrontPageBanner-1-Img-1" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/S200_Banner_Robot.png">
<img class="FrontPageBanner-1-Img-2" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/wave_banner_robot.png">
</div>
CSS:
.FrontPageBanner-1 {
width:100%;
position:relative;
background: linear-gradient(to right, #48e2ff, #396fcf);
border-radius:10px;
}
.FrontPageBanner-1-Img-1 {
position:absolute;
width:280px;
left:21px;
top:-70px;
z-index:1;
width:280px;
max-width:280px\9;
}
.FrontPageBanner-1-Img-2 {
position:absolute;
width:26%;
right:23px;
top:-47px;
z-index:1;
width:280px;
max-width:280px\9;
}
So I guess I will add this to my CSS instead of having it in my code for quick example purposes. The only slight problem I see is that when using max-width:280\9; The images still do not shrink as fast as what the themes #media (max-wdith:xxxx) does.
Give relative position to the pool cleaning section, take both the absolute elements inside that pool cleaning section and give the absolute positions in percentage from respective sides. Though it would be helpfull if you show your code.
Try this : Here
I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
At the get-go, here's the fiddle.
I want a <ul> in which each <li> has a <p> and then an icon floating on the rhs. The paragraph may take 1-4 lines, and I want the icon to sit nicely in the middle of the line no matter what. The double wrapping <p> is necessary, trust me :)
The width of the <p> has to be 100% less whatever space is necessary for the icon. Basically, I want the icon to sit halfway up the space left by the right-margin of the <p>.
The solution here uses background-image, but that's no good for me because the image has to serve as a draggable handle for mobile devices. (I'm using this approach to modify a jQuery sortable desktop site for touch screen.)
The fiddle uses a placeholder <img> because of the demands of jsfiddle, but I'll actually use an <a> with an image off a sprite.
I want to avoid having a negative top margin, because the margin will move into the preceding line and could mess up the dragging (i.e., you could inadvertently drag the wrong line).
Thanks.
Based on this answer by bfrohs,
DEMO here
HTML
<ul>
<li class="absoluteCenterWrapper">
<p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
<img class="icon" src="http://placekitten.com/g/20/20">
</li>
</ul>
CSS
.text {
margin-right:35px;
}
.absoluteCenterWrapper {
position:relative;
}
.icon {
margin:auto;
position:absolute;
max-height:100%;
max-width:100%;
top:0;
bottom:0;
right:0;
}
Change the position of the li element to be absolute and that of the img also absolute. Consider adding this code instead of using your css.
.icon{
margin:40% 5%;
float:right;position:absolute;
}
See this fiddle.
http://jsfiddle.net/NXWPE/47/
again a problem with IE browsers version 6 and 7
Take a look at an example right away, try resizing the window and such.
a preview (easier to open in IE this way)
code
HTML:
<div class="container">
<div class="left-menu">
<ul>
<li>El1</li>
<li>Element 2</li>
<li>3</li>
</ul>
</div>
<div style="margin-right: 60px;">Тест Тест</div>
</div>
CSS:
.container{
position:absolute;
top:100px;
left:100px;
outline: 1px solid red;
background-color:pink;
}
.left-menu{
outline: 1px solid green;
background-color:#AAA;
width: 50px;
float: right;
}
Now I don't understand 2 things
What happens to the float element? the box is never too small, infact the margin of the adjacent div is bigger than the width of ul div. But when the window is small enough the float element appears to be floating to the window edge not its container edge, but if you scroll a little to the right when the window is small you will see the container is wide enough.
Less important issue why is it this wide? Shouldn't it be as wide as it's contents?
The only fix I've come up with is to give my absolute div a width, but there is the problem. It should resize with the contents say if there is a picture near the float div.
And there will be a picture =) This width workaround of course allows to use tons of javascript, to resize every element in the more complex structure than shown in the example, but i wonder may css be used instead?
Internet Explorer has issues with divs and floats, especially older versions of IE. Whenever I have problems with floats and divs not clearing each other properly, I rely on the Clearfix method.
Add the clearfix css to your main css file, then append the class .clearfix to .container so it looks like <div class="container clearfix">.
For the 2 divs inside, take the margins and widths off of them, if you want those 2 divs width to change based on the content inside them. Float one div left, and float the other div right.
You'll see that the Clearfix forces the parent div (.container) to wrap all the way around the floated elements inside.
Hope this helps!
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext