I am not that great at programming, I just look after basic updates and such for my website Heritage Hockey.
I'm not sure how it happened but the whole left bar (including navigation) has shifted down under 'On Sale' items and I am unsure how to fix it. The links are not clickable anymore either. You can see my issue here.
Any help would be appreciated.
give your <div class="main"> a float value of right, like so:
.main {
float: right
}
links are not clickable because the footer's div appears on top of them, clear the float with the following:
.footer {
clear: both
}
and your layout should be fine again
Related
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
EDIT: I'm not asking about alternative ways to solve this problem, although I appreciate the thoughts that have been presented so far. I'm looking for a way to make the left sidebar content float right instead of left. Just like it does when I enter "float: right;" in #RecoWidgetLarge with "inspect element" in google chrome.
This is driving me crazy. No matter what CSS code I use I cant make the customer testimonials box (in the left sidebar - reco.se), float right instead of left.
The current left-float gives me problems when the window is resized or when the webpage is visited through an iPad. So I figured if the left sidebar content floats right, this problem will go away..
Here's the page I'm working on www.allfemaleevent.com, try resizing to see what I'm talkning about.
I've inspected the element and tried a lot of CSS editing, two examples below:
.recoWidgetLarge {
float: right;
}
OR
div.textwidget {
float: right;
}
Nothings working, seems like something is blocking those commands or something. Any ideas?
I have been struggling with this problem for a long time now, and although I have found a number of good solutions to parts of my problem, none of them seem to work combined, so I have decided to ask you.
Here is a scrn shot of the website:
http://i.stack.imgur.com/6C0k1.jpg
What I'm hoping to achieve is to have a scroll bar appear on the far right of the page when content overflows the blue container, the div that has all my content in it, not the far right of the div itself, like it would if I set the div to overflow: auto or overflow: scroll.
In other words, I would like the page to scroll, not my div.
The site essentially consist of a body background, a div for the menu and a div for the content. The code is pretty messy, so I have left it out, but if you need it, just leave a comment and I will add it right away.
Everything is supposed to be fixed as in remain like it is on the scrn shot, except for the content in the blue container to the right. I initially figured that setting everything except the container to position:fixed would work and trigger a scroll bar to appear for the page that could be used to scroll through the div, but it didn't. This doesn't work though, as any visible overflow in the container just 'leaves' the page; it doesn't trigger a scroll bar.
As I've also pointed out in the scrn shot, the container-div has padding on the top and bottom and is also slightly transparent.
These two features seem to make things even more difficult. The padding, because setting overflow: visual makes content overflow, and thereby be visible, even through padding.
The transparency is an issue, since I can't just cut out the padding and give it a z-index that's higher than the content itself, in order to hide it; it will still be visible through it. The background image is set at a percentage or set to 'cover' (still figuring out which one works best), so cutting out the padding with the segment of the background image it covers, will not work either.
I hope I presented my problem and the issues clearly enough. If you have any questions or any feedback, please leave a comment.
Thank you in advance for any replies,
Magnus
NOTE: This is a repost of an early question that was trashed by someone who didn't bother reading through it properly before rating it down. The question essentially died afterwards. I have tried to make things even more clear this time, so I'm sorry if I repeat myself. This is also the reason why my post is so long this time.
Something like this?
Demo: http://jsfiddle.net/6R7c2/
HTML:
<div id="top">Top</div>
<div id="middle">
<div>Content
</div>
</div>
<div id="bottom">Bottom</div>
CSS:
html,body{
width:100%;
height:100%;
margin:0;
}
#top,#bottom{
height:10%;
background:blue;
color:white;
}
#middle{
height:80%;
overflow:auto;
}
#middle>div{
height:10000px;
border:25px solid red;
}
It can be something like this
see http://jsfiddle.net/QfsvB/
CSS
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
HTML
<div class="scroll">You can use the overflow property when you want to have better control of the layout, the overflow property specifies what to do if the content of an element exceeds the size of the element's box.</div>
Thanks to everyone who helped with my last question but I've got a new browser-independent problem:
For some reason, the image navigator (not yet functioning) on a website I'm working on is currently not displaying in the correct place on Firefox. It appears in the right place in IE8 and Opera but Firefox seems to have a problem with it.
As can be seen in the below image, the imageContainer div (the image and the left/right arrows) appears on top of the footer, this is how it should look i.e. how it looks in IE8 and Opera.
But in the image below, the imageContainer div is cutting into the footer div for some reason, and I don't know why.
imageContainer has a margin-top: 110px; to get it in the right place at the bottom of its column. There are 2 columns, the left housing the paragraphs and imageContainer and the right housing the Calendar and contact details. The footer div also has clear: both;
Also, it's not just the image that is falling into the footer, it's the arrows as well only they are the same colour as the footer so this isn't immediately apparent.
Any ideas why it isn't displaying correctly? Is there a better way of aligning the imageContainer to the bottom of it's column (to keep the box shape of the website) other than using the margin-top to position it?
Thanks in advance,
infinitifizz
P.S.
Completely forgotten I hadn't posted the site's link, here is where I got some temp space to host it: Temp Hosting
Not having access to the actual site makes it difficult to answer, but you could try something like position: relative; bottom: 0 to place items at the bottom.
Alright I have a CSS liquid div based layout for my personal web site. The address is
http://danberinger.com/preview.html
The problem is the I do not want the footer section to act as if it were displayed inline, because right now when the window is stretched beyond the pixel width needed for the intro_container, it moves the footer div to the right of it. I would like this footer to stay put at the bottom of the page rather than moving up and to the right when space allows for it.
Thanks for any help you can offer. I have loved this forum so far, very helpful.
#footer {
clear: both;
}
This will ensure it is always pushed down below all other floated content. This seems to provide the effect you are asking for.
here is css fix for it
#footer{
position:absolute;
bottom:0;
}