I have a site based on Solar Sentinel Joomla template. www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
EDITED
It's hard to answer your question because you've not provided any code or other way for us to determine what might be going on for you.
At a guess, I'm going to say that the main content div on your page is extending (in width) and forcing the sidebar to drop underneath.
You can test this by making your main content section slimmer and see if the right hand bar decides to shift back into place.
As for why this might only be happening in Chrome and not other browsers, it's hard to know without more information.
Related
I've been fighting with a small(big) issue on a wordpress site all morning. I've tried adjusting margins, adding and adjusting an overflow attribute, adding media queries, and the lot. But it seems I can't get these elements to play nice with a minimized window.
As you can see, I just need the h1 text (Quiescent imaging...) to always stay visible and in place and I also need the text in the sidebar to stay together.
These issues also only occur with a minimized window.
Any tips are highly appreciated. Thank you!
So it turns out this is a lot more simple than needing to edit any code. The h1 attribute, rather, the title bar I was trying to edit can be modified toward the bottom of the page editor which we are using (fusion builder).
I usually overlook these simple solutions, but I'll accept the embarrassment if this helps someone out one day!
More info:
The Page Title Bar is not an Element; rather it is controlled via the Theme Options and the Fusion Page Options. This article will look in depth at the options that are available for this often overlooked tool.
https://theme-fusion.com/documentation/avada/options/page-title-bar-options/
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I currently have a WordPress theme online and appears to work fine but one of my clients noted that the blog page layout is broken in Google Chrome. The sidebar appears right underneath the page content. So I checked his website and my demo and it does indeed look broken. So I have spoken to another programmer and he says it's not broken and he uses the latest version of Chrome too. I have never encountered such an issue, it works for some but not for others.
EDIT: The issue has been fixed with thanks to Joseph Erickson.
Looks like it has to do with the width of the #sidebar. If you shrink it just a little bit, it'll fit properly.
Why is this happening? Who knows. These little pixel shifts with floats can be hard to track down. I would recommend not trying to fit everything so snug together and allow some wiggle room when putting two fixed-width floating elements inside the same element.
This is probably the worst question I have ever posted on Stack Overflow but I am trying to figure out how to fix this page so that it renders the same way in IE7 as it does in IE8.
As far as I can tell there are 3 differences.
The first is that the content becomes centered in IE7.
The second is that the middle section of the video shifts slightly to the right so that it is out of alignment with the top and bottom border images.
The third is that the thumbnail of the active video becomes slightly messed up on the right hand side as if it is too big for its background image.
I could post all the code but I think there's too much for it to be effective on SO.
Here is a link: http://facebook.icrossing.de/tools/youtubetab/esprit/
Perhaps there's someone who has seen this sort of problem before and is able to diagnose a quick and not too painful solution.
If you are not using the New features IE8 has to offer, you should consider using compatibility mode.
Here is MSDN page on how to define document compatibility.