I have a webpage I have added some content to, using Magento. The side bar that usually appears to the left side of the content, but is appearing beneath the content of the page (below the content that I added myself using html)
See image for reference:
With my limited knowledge I cannot find a solution, I have searched various forms, and attempted it myself, with no success. I tried making the max width of the body 800px for example, and that just made my entire page go to 800px wide.
Does anyone have any idea on what im doing wrong? If you need to see the code or anything I can add it?
Any help is appreciated.
Update - additional photos
Check the ierarchy inside the xml file containing those blocks and also the .phtml template which is calling those blocks.
You might also have an unclosed HTML tag in your DOM or another typo.
Related
I'm new to web development, mostly just trying to teach myself how with internet tutorials and such. I'm a complete newbie, so this might be a dumb question, but I've searched google up and down, and have yet to find an answer.
Basically my problem is, I've created a web page with position: fixed; header at the top of the page. I've adjusted the margins of the page so that everything seems to look great. The page displays exactly as I intended it to.
However, I've come across a small flaw which I find myself incapable of fixing: I have a few links on the page that link to specific headings elsewhere on the same page. (For example, I have an element such as <section id="section_3">...</section>, and elsewhere on the same page I'm using .... It works and leads me to the appropriate header, but unfortunately the top of <section> element I linked to (mostly just the section heading) is being covered up by the fixed header at the top of the page, so I have to scroll up a little to read the section header. I've tried linking to an <h1> rather than a <section> element, thinking it might be incompatibility with html5 or some such, but I have the same problem that way too.
I'd like to have it so that the section header is the first visible element under the header when I follow these ID links. How can I do this? I would assume this is a common enough situation that there would be a simple fix to it, but I can't seem to find anything on the subject. (I have no issues using html5 or css3. Currently this is just a personal project, and by the time I'm making anything public I expect it will be far enough down the road that there won't be any issue using those. For the time being, it only needs to work on my browser.)
Thanks in advance for anyone who can help!
Just adding #johnniebenson comment, add the css like this for the related section. Let suppose the header's height is 60px and you would like to give some space below header about 40px then do this. Example: #section_3:target{ padding-top: 100px;margin-top: -100px}
You can try setting the padding-top of each section equal to the height of your header. Then link to the h1 in each section. That should do the trick.
Upon loading our website I am having some issues fixing the lower content snapping into place. Easier to see on a slower connection but it appears the content is not loading in the place its suppose to be. but loading lower than its suppose to be and then quickly moves into place.
Heres a link to a recording of what I am seeing via google chrome - cable speeds.
https://youtu.be/RgR0IyxiEvg
Thanks!
There is a class ctaWrapper on top. Upon scrolling you are adding a class fixed to it. That is causing the problem.
When the object is fixed, it goes out of the normal flow and gets the ability to stay on top of other objects.
In your case, the object on the top goes out of the flow and all the elements jump up a bit. Just add the class fixed to it. Because, I don't see the need to add fixed on scroll as the wrapper stays fixed all the time
You are using a plug-in called "Simple Custom CSS and JS" which places your custom css and javascript inside your page's body tag, right after most of your content.
Which causes those css rules and javascript codes to be applied with a delay. Moving those from your page's body to head will solve the problem.
Edit:
Now I have checked the video you provided. It looks like the problem is about your image gallery. Before your gallery is loaded, your image(with "FRYD") has full(or auto?) width and height. When your image slider starts loading, it scales the image down to match the container's width(or height). You should consider doing this scaling with css in your page's head. most probably something like max-width:100%;height:auto; would be sufficient.
After days of trying to figure out what was wrong it was a simple render blocking issue. The height attribute for the banner was loading after the rest of the content. So i had the elements above load in their css before the elements below. Which solved the problem.
I am creating a web page which is a showcase for various kinds of content. Some of the content comes with a HTML page which plays the content (Flash, WebGL) and I am trying to use iframes to load them on the web page. I could maybe add the content straight on my page since I have the actual content, but the editors generate readily usable HTML which works great. Therefore, I wouldn't want to start dissecting what are the important parts to add on my page to get all different types of content to play properly.
Still, all this works fine. The problem is, I don't want the content to play right away and I would like it to reserve the space it needs (i.e. the iframe should match the size of the content to be loaded). I know how to do each of these separately but not together. The idea is that there would be a button which plays the content and the content would start to play in its space without resizing the page.
I see two ways of achieve this, neither of which I know how to do.
Don't load the content before the play button is pressed but read the size of the content somehow.
Load the content and prevent it from activating/playing before the play button is pressed.
Closest to the desired effect I got by using visibility: hidden styling which did reserve the space and on top of that hide the iframe content (doesn't matter to me if its hidden or not) but the content started playing. Another way might be to read width and height values from the HTML file, but this information might be in a separate CSS file or there might several width and height values in the files. It would be a mess if I need to start creating exceptions for all sorts of content I load into iframes.
Is there an easy way to achieve either of these approaches? Or is there an alternative approach?
You could load up the page with the iframes in the correct positions you need them, and set a blank page in the src attribute.
Then when they scroll into view, load the correct src attribute.
This can be achieved by using some javascript like this (using jQuery for ease, but not needed).
This is a rough example, and would need some refactoring:
https://jsfiddle.net/pLwL0843/2/
I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!
Im wondering if anyone else has come across this problem when designing websites. Basically every time I zoom far out from my webpage the structure breaks and images and containers jump in to other parts of the page.
I have tried my very best to avoid this by measuring every div to the last pixel but this issue occurs, is there any tips for sorting this problem out.
Sorry that I cannot show an example, everything is on my localhost.
For a better website which doesnot breaks on zooming , please go through the following links.
Choosing the Dimensions for Your Web Page
Layout
How to create flexible sites quickly using standards like CSS and
XHTML
In Search of the Holy
Grail
Also here is the Blueprint Tests: grid.css. Check that link by zooming!!!
Cheers.
use html table tag right after your body tag when you put your body content in a table the content take automatically the width and height of their cells so when zooming it should not be a problem