I think this question is so stupid but forgive me. I'm still learning.
I've converted my website psd to html, css and it's perfect for my monitor. But when someone runs it on less monitor or bigger, everything mess up. Even when I zoom in / out. The content itself is 1024 and the rest are only background. I want like making everything static and whoever previews the website on bigger monitors, the more expands on the background without changing any place. I see this thing in many websites but I cannot locate it in the ass, don't know where is it or what makes the website so static that when I zoom in - out it only zooms in - out as it should be. Not moving divs and messes up things that shouldn't be moved.
Explaining more easily:
There's some websites when you zoom in - out, the content only gets bigger or smaller but it doesn't move from its actual place. I can't do this thing and I would like to know how it's done. Is there any requires rule in the css to add for each div / class? Anything to insert in the body area? etc.
Sorry if I'm not clear enough.
Thanks in advance.
Related
Please forgive my ignorance. I'm not really a coder. I'm a laid off graphic designer desperately trying to get my portfolio a little more polished than the wordpress site I had.
I've rebuilt from what Dreamweaver puts in when you start a new page with bootstrap 4. I've managed to get a lot customized with some help on here.
But I've broken something in the process, because it was working well until recently.
When I narrow the page, at some point in between the most narrow and a normal desktop size, the navigation exceed the container. When I view the site on my phone in landscape this is the default. I've taken a screenshot (further below) but I also have linked the site directly below.
Is this a media-query thing? I just don't even know where to look for this issue to resolve it.
My site, such as it is
Also!
Not as crucial but I'd love to fix.
a. How can I make the black band under the navbar stretch to the entire screen when it is at it's most narrow?
b. Is there a way (that I can manage without screwing things up) to make the container holding my banner and the navigation be black all across at it's most broad?
Thanks in advance!
Clare
Misbehaving Navbar when narrowed
1.5cm of padding I don't like when at the most narrow
Ive been building this webpage, and its going great. Unfortunatley, due to resolution differences some people experience the page differently. I have been careful to use exclusively percentages to calcuate spacing and size. This is because it makes the page slightly more accesible, but also in the hopes that I could trying doing something ive thought about, this being down scaling the page. As I have been building it based mostly off my resolution, one alternative I thought about was making a div with the same aspect ratio as my computer, but a smaller size. This way I can have a window into this resolution, and other devices can experience the page as it is meant to be experienced. Since I made all measurments in percentages it should theoretically downscale correctly because it's the same aspect ratio. Before I get screamed at for bad web design, understand that the type of page I am making is very precise and so it has to be modeled by a small range of resolutions.
My first question is, is it possible? Ive been playing around with it, and after putting a div around all important elements, and changng the size, nothing happened. Im an amateur so I am not sure if it can even be done.
Second question. If it can be done, how?
Thanks in advance
It turns out you CAN just put a div around the whole thing, just make sure that it has the "position:absolute;" attribute
I'm putting together a small site for a friend (I'm not really that much of an expert as you can probably tell!).
We're experimenting with some design ideas and have come to a bit of a block.
The page in question is: http://westleemusic.co.uk/concept/epdownload.php
Basically when the window is resized so that the bottom of the viewport is high than the bottom of the content (in this case it's the "iPhone Users Click Here To Download"), the translucent background wrapper decides that it no longer wants to fill the page.
I've been sat here for a few hours trying to figure it out and I'm stumped. As I said previously, I'm a n00b when it comes to this stuff so I'm hoping one of you masters can help!
Let me know if you need more info!
Many thanks
Change the height of wrapper to auto. This will cause it to fill the entire screen even when you start scrolling.
I´ve recently started to program all my layouts in tableless CSS, but still prefering the old tables style. Much faster. Anyway, I´m stuck in this layout that is almoust finished, but I need help to one minor detais, which I can´t manage to fix.
Here is the test address:
http://www.syncsystem.com.br/
As you can see, the design and background are almoust complete. Later I´m gonna put the rest of the stuff in, like links and so on. The problem is at the bottom. The ideia behind this is that the background texture stay fixed, as is is. But there´s a white space at the bottom which I can´t get rid of...can anyone help or give a hint?
Thanks,
I'm not sure if that's what you are talking about, but the footer's background image itself has some space in it below the black part.
And the footer has the same height as it's background image, so the whole image is being shown.
Next time use some web development tool such as Firebug, or use a native one pressing F12 in Firefox or Chrome. It will help you quickly analyze the page element's properties
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.