I just noticed a resolution issue with a site I am creating, and as I am pretty new to HTML & CSS, I really can't figure out how to fix it.
here is the page where the issue occurs : http://website213.com/tour
I need to make the Right elements of the page lined all together, but as soon as the resolution increases a bit, it gets messy !!
Kindly help me fix this issue.
Best,
The problem is the positioning. Some elements are absolute, some are relative and some seem to be fixed. It would be impossible to go one by one, you will have to see how the whole site is being constructed.
I recommend you start by reading how positions work. They are really easy to understand, but if you haven't read about them they can ruin your life. Just do a search for css positioning or check this link: Learn CSS Positioning in Ten Steps.
Related
I am learning front end web development and i was trying to make Netflix clone and its going smoothly until i resize my page vertically, the main tagline of the page moves upward as i keep decreasing the size vertically.
Can someone help me to figure it out, how to make it static like the original Netflix sign up page.
I hope you understand what i am trying to say!
https://drive.google.com/drive/folders/1cYgQs0d4PLP4fzSRlMM1wN8jWu_55XyD?usp=share_link
i have uploaded a folder containing my files html and css.
I know its messy and unresponsive but i will fix that later as a pioneer that'a great progress for me so please help me to find a solution.
The problem is with your .info class, position:absolute with top:50% is what is causing the movement of info bar.
Unless necessary, you should minimize the use position:absolute, it breaks the 'flow' of document and messes with a lot of things you might be unaware about.
An easy workaround is as follows:
.info{
margin:auto;
width:50vw;
}
I am sure there are better workarounds but the basic idea is to preserve the Flow of document.
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).
I'm going to try and ask this the best way I can so sorry if I am not clear.
I am trying to learn css and html.
When it comes to positioning a image, for example top: # px;, how do I know what the pixel location is? Is there a program for that or is it a guessing game?
I hope you can understand my question. Thanks
Knowing the position of a element just by using CSS is not possible. This can be done using javascript. Check this link1 and link2.
If you know jQuery, it would have been more simpler.
Just use .offset().
is there a program for that or is it a guessing game?
You can also guess the position of an element when you assigned fixed dimensions to all the elements in your layout.
If you're trying to use the CSS top property in conjunction with display:absolute or fixed, then yes, it's mostly a guessing game. You can use browser addons to adjust your CSS so that you can see your element being positioned as you change it, get an IDE that supports live updating or previewing, or take a screenshot and measure the pixels yourself.
Normally, however, you shouldn't be placing elements this way. Just let the DOM do it's thing, and use padding and margins to put things into the right place. It takes a bit of trial and error to get things visually appealing, but it really isn't so bad.
i know this is so basic ,its so basic that it hurts me to ask this question but the issue is starting to make my hair too fall out lol.
i'm making a liquid website so everything resizes,so far so good...my page has a couple of iframes ,they will resize just great in i.e using % for height and width but when it comes to firefox only the width will resize and not the height ,the frame ends up pushing over my tables and making the whole thing look wrong
does anyone have a fix/solution to this please.
thanks to everyone that tried to help ,it was a bit vauge i managed to solve it in the end simply by
putting the iframe i wanted inside a layer/div set the layer to absolute and size it in % and then add the iframe inside the layer worked a treat for all browsers.