Hello good people of Stack Overflow, I am having great troubles with designing a website. I have pretty much finished the first page except for a bit of content, but that's not the question. I am using a PHP include to include a menu on top of each page, to keep it uniform. However, when I resize the window, in any browser, the links will begin wrapping. I think it is an issue with my CSS, or it could be a problem caused by my lack of PHP knowledge.
The link to my website is, builtbyhabel.net63.net. The code should be able to be seen on the developer tools for whichever browser you are using.
Sounds like you have your links inside a container without a fixed width.
<div><a><a><a></div> <-- this one will contract with the width of your browser
vs
<div><a><a><a></div> <-- CSS div { width:978px; }
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I have an issue on my company's ecommerce site. On non-widescreen monitors, if you one of our pages while the browser is zoomed to 110% or higher, the layout gets messed up (specifically, the right side Div, which comprises 80% of the page (roughly) gets pushed below the left side div).
The site is built with the Smarty templating engine and uses pinnacle cart, but both have been heavily modified by the previous developer and myself. What can be done to improve the site's versatility with browser zoom? It wouldn't be an issue, except my boss alway has her browser zoomed to 110%.
Example page: http://www.buynowornever.com/handbags/ (but any page with the filters on the left side will do it).
There's obviously something wrong with the spacing on the page, such that when the browser attempts to reformat it in the zoom, the right div gets too large and overflows. I've tried correcting this with various overflow tricks, but have been unsuccessful.
I've looked through several answers here (including How to prevent the floating layout wrapping when firefox zoom is reduced) and on other sites and have not been able to make them work for my situation. My CSS and Web Design skills are not very strong.
The issue was bad data. Some of the category headers that I was using had close divs hidden in them. This caused layout issues on some pages, but because of the hierarchy, was not utterly fatal (and chrome handles some of these problems pretty gracefully). I cleared up the data issue and the pages all work as intended.....
I really should remember GIGO in these situations.
I am trying to put together a simple portfolio site, and have implemented a basic responsive design into the CSS as well (at the very bottom of it), and it behaves just fine - shrinks the 5 columns down to a single column and hides a few elements when I resize the computer browser. But on iPhone/Android browser it doesn't make any difference.
Here is the page in question -> Sample Page
And I can't figure out what the issue is... as in, this should be fairly simple to do, but apparently it's not, and now I'm losing sleep over it... so might as well ask here.
Have you [also] consider the use of viewport meta-tag? Just check This.
I tried loading the site but it seems like your custom js file is not found(404 error).
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
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