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
Related
I'm not a web developer by any means, but I tried my best with a site my company launched. I wrote the code for https://nullptrsec.io, but for some weird reason, if the page is made scrollable, this gray box appears at the bottom of the initially rendered page. I have tried many things to eliminate it (various CSS) hacks. I know that you're supposed to list what you tried, but because I tried so much, I figured that would be pretty lengthy.
To replicate this issue, you can visit https://nullptrsec.io on a mobile device or use your browser to mimic portable dimensions (through dev tools). I'm trying to eliminate this gray box but cannot figure it out!
I've looked through your page and I see that the body isn't adjusting itself to your content, and the body is the component that has that certain blue color over the gray.
Adding the h-auto to you body should solve this:
class="company bg h-auto"
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
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 am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.
Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.
Image depiction (from FF7.0.1, win7):
Add display: inline-block; to .box_content.
Not sure whats causing it but that should fix it. At least it did on my computer.
Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.
I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.
Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!