Ok, please look at my problem:
http://phone7forum.com/viewforum.php?f=2
http://phone7forum.com/viewtopic.php?f=2&t=4
I've been editing a phpBB forum and adding in all of my css customizations and I've gotten pretty far along, but you can see in the 2 pages above the problem I'm faced with. My custom "main content" box starts out fine at first and sits exactly where i want it to at the top middle of the page, but when i stick the actual phpBB "forum code" inside it, the forum content will start where my left sidebar ends (way down at the bottom of the page).
My website is a "fluid width" website. The "left sidebar" is floated to the left, has a width of 300px, and height 100%. The "main content" has a left margin of 345px to push it past the sidebar so it will sit to the right of it. So thats my setup and it seemed to be working perfectly fine for me until i started adding in "forum content". Does anyone have any idea on how to fix? Do you guys think that the problem exists in the forum's existing css/markup or is it a problem that I've created in the way I've layed out my website?
Here are screen shots of what my problem is (if for some reason you see something else in your browser):
http://phone7forum.com/images/1st_page_wrong.jpg
http://phone7forum.com/images/2nd_page_wrong.jpg
Here's how they should look, or what I'm trying to do (compliments of photoshop):
http://phone7forum.com/images/1st_page_right.jpg
http://phone7forum.com/images/2nd_page_right.jpg
I'm desperate for help! Thanks guys for looking!!
Your content div dosen't float left. Can you just add float: left and remove the left margin?
update
Muhaahaa, I found it:
html body#phpbb.section-viewforum div#main_wrap div#content div#content2 div#mybox_wrapper div#mybox-wrapper-content div#mybox-wrapper-content-inner div.forumbg div.inner span.corners-bottom
has a clearing. Remove it and all will be fine. :D
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
in the footer widget on a wordpress page, the join now button is going out of alignment when looking with responsive viewing on mobile. the code is: join now
how do i fix this so it lines up correctly? it's at https://time2track.com/ in the footer
I have looked at the code but do not know how to make this line up correctly
I just did a quick look at your website, it seems like you are using "float: left" on the div that contains 2 links before your "Join Now" button. Just use "clear: both" on the div after the floated div. In your case on div with id "custom_html-2".
Also, it would be beneficial to read this article: All about floats
Please provide code sample next time, as that would be the easiest way to seek answers.
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 absolutly know that you will downvote this question, but I cannot repeat this problem in jsfiddle or with custom html, so I can only show it using webpage.
If I understand the problem, I will update question with appropriate html code.
If you visit website http://tax.allfaces.lv/, you will see three menu items. If you click on first or third menu item (Home and Contact US), then everything is fine.
Merchants contains submenu. It is not so obvious, but if you click on second one (Merchants), then you see that the whole content is moved some pixels to the right comparing with Home and Contact Us page. If you just click "Home" and "Merchants" one by one, you can see that for "Merchants" all content is some pixels to the right.
EDIT:
This is related to webpage height and scrollbar.
Add this code to your body to keep the scroll bar all the time to avoid this issue
body {
overflow-y: scroll;
}
It's because the scrollbar disappears because all of the content fits in the page :)
its because the scrollbar on the side dispears ;)
what you could do is show the scrollbar at everypage so it doesnt move.
I've been troubleshooting this for a while now with no luck so I'm asking here in case someone is inclined to have a look. Thank you in advance.
On this website:
http://www.oldsaltmerchants.com/
I have a one page layout with a menu that scrolls the page to the correct location. Once the page scrolls past the top section a nav-menu drops down from the top edge of the window. The yellow bar is supposed to span the full width of the page but it is hidden in the margin areas and only displays in the "content" area.
I could really use another set of eyes if anyone is interested.
Thanks so much.
may not be the correct answer but may give some clue. I changed width to 100% and add text-align: center
The problem is with your #menu.pinned ul CSS selector's width: 910px attribute.
Remove it and it should display just fine.