I have a checkout system I am designing and I cannot get the footer to not eat the bottom div I have setup, unless I continually adjust the margin-bottom figure.
I have three divs nested into one. These nested divs show/hide as I proceed to the next one. The only one I will ever have an issue with is the last one because it will never be static. I use it to show a customers order, so if they have 10 different products then 10 images, name, price, etc show.
Every other area of my site that gets new things added to it, the footer responds and continuously goes down.
My fiddle isn't the best and my issue is really hard to generate as it isn't a static issue. Two products could be added and it would be fine.
https://jsfiddle.net/pfar54/rc5yffy7/
.footerOut {
width: 100%;
background-color: #202020;
position: relative;
padding-top: 30px;
left: 0px;
right: 0;
margin-bottom: 0px;
bottom: 0px;
clear: both;
}
.footer {
height: 420px;
width: 960px;
}
/*----------Main div for Checkout Process--------*/
.checkoutprocess {
margin-bottom: 150px;
display: relative;
}
I have set everything to relative...added padding: bottom (took it out because it didn't do anything). Everything I try doesn't help.
The height of the container and border are irrelevant as I am just using those to test.
Anyone see why?
I guess Your problem is footer is overlapped with content, And I found some Html Dom Structure issues ans css property Mistakes, I have cleaned up your code please verify this link below in comment
Related
So I have an image (or a div that will contain the image) that I would like to use as a banner for portfolio.
I would like this image to be the full width of the page (not height). However, this image is nested inside a div that contains all the information for each of my portfolio projects, and will not allow me to stretch outside of the container.
However, the current state of how I set margins and containers within my portfolio is a little messy, so examples online have been hard to follow.
The following are nested in the following order:
The ID that contains all of the projects
#contentContainer2 {
width: 100%;
background-color: #FFFFFF;
margin-right: 0;
margin-left: 0;
padding-bottom: 6em;
}
The ID that pushes the content/sets spacing:
#marginSetter2 {
width: 63em;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 0;
}
The ID that contains the individual project (and where the div that I want to extend to full width lives):
#projectDescription1 {
padding-top: 1em;
}
If you would like to take a closer look at the code, please DM me and I will be happy to send you the link to the live version of my portfolio.
I apologize if stuff is a little messy; I started to build this portfolio when I was first starting to get out of my comfort zone with html/css/javascript, so I was not as experienced, and haven't gotten around to making large scale fixes.
Cheers,
Alejandro
/* Actual banner image */
width: 100%;
position: absolute;
left: 0%;
You can probably do this by using position-absolute. However, from a design standpoint, I would consider refactoring your containers a bit. Consider wrapping your container with margins in a new div along with this image instead of trying to shoehorn the image into a container it doesn't belong in.
On my homepage, I'm trying to make three images span the entire width of the browser window. See my site here: http://accelfoods.com. I want the last 3 images on the page (About AccelFoods, Industry Engagement, Portfolio Companies) to be the same width as the image directly under the navigation.
I've figured out how to control #page-body and can make the image go to the edge of the left side (like this: http://imgur.com/gfXPyPK). But I don't know how to make the white space on the right disappear.
I've commented this CSS out for now until I figure it out, but here's what I'm using to manipulate the images:
#page-body {
margin-left: 0px;
padding-right: 0px;
border-right: 0px;
margin-right: 0px;
overflow-x:hidden;
width: 100%;
}
Any help would be greatly appreciated, thanks!
first of all, remove "max-size" parameter from:
#banner-area, #page-body, #page-footer{
width: auto;
}
then add this:
.sqs-block-content {
width: 100%;
}
.image-block-outer-wrapper.layout-caption-hidden {
display: block;
float: left;
position: relative;
width: 100%;
}
.sqs-block-image .intrinsic {
display: block;
float: left;
margin: auto;
max-width: none !important;
position: relative;
width: 100% !important;
}
but there's also script adding a strict width for this intrinsic class, I cannot see that from the first glance, it's kind of encription there and it will take time to understand it... though, the suggestion I'm giving you here definitely overrides the script.
P.S.
I would reccomend you not to use this kind of sitebuilder(s) (you definitely use some kind of) - because there's pretty tough class generator and if you need further updates there -you'll get pretty much more troubles.
I've spent a great deal of time and effort on toying and researching this, but I cannot figure out how to perfectly align the column headers with a scrollable table body in HTML. There are other solutions and techniques posted on here and at random places on the web, but they all yielded inconsistent results, especially with random amounts of data.
Here's the JSFiddle.
Note that I have custom CSS applied, but also Bootstrap's CSS. Please expand the result panel to be big enough for the HTML headers to not wrap.
To summarize the HTML, there are two tables - one for the column headers, one for the data cells. Each is wrapped in a <div>, which allows the cells to be scrollable and sets the width of the columns. To account for the scroll bar sometimes showing up (the data is dynamic and I have no idea how much data there will be), the <div> wrapper around the table cells is set to always show the scroll bar, and the wrapper around the table headers has this CSS applied:
.grid-container .column-wrapper {
width: calc(100% - 16px); /* 16px is the approximate width of the scroll bar */
}
This works on my monitor when the zoom is 100%, but on other monitors, the grid lines are not aligned perfectly - off by maybe 4px. The application that uses these grids uses them extensively, some of which align perfectly while others are off. I unfortunately have not found a pattern for which render correctly and which do not.
I do not want a JavaScript solution - these grids have a lot of JavaScript applied already to make them interactive and sometimes render huge amounts of data (over 7,000 rows) and I don't want to do something funky like looping through the each row, detecting widths, then apply fixes.
Thanks guys, let me know if you need any more information.
EDIT -------------------------------------------------------------------------------------
Our users use Chrome 35.0.1916.153, and I've begun explicitly setting the width of the scrollbar to make sure it's 16px:
::-webkit-scrollbar {
width: 16px;
border: 1px solid #ccc;
}
Again, this works on my monitor, but at the moment I cannot tell the results on others. Here's the updated JSFiddle.
Here is my solution to achieve a perfect alignment of the columns between the header and the scrollable body of a table.
We don't know the exact scrollbar width so :
We make the table header scrollable so that its width is now exactly the same than the body
table.scrollable thead {
width:100%;
overflow-y: scroll;
position: relative; /* for the absolute positioning of 2.*/
}
we mask the header scrolling arrows under 2 pads
table.scrollable thead:before {
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: 0em;
}
table.scrollable thead:after{
position: absolute;
right: 0;
width: 16px; height: 20px; content: ''; background-color: menu;
margin-top: -1.2em;
}
Here is a sample fiddle using flex css: https://jsfiddle.net/vyp5j257/2/
Or here your fiddle updated: http://jsfiddle.net/9g6xo8L6/1/
calc() can be iffy with cross-browser testing when you need pixel perfect rendering. Try changing the .grid-container .column-wrapper style to something like this:
.grid-container .column-wrapper {
width: 100%;
padding-right: 16px;
}
I'm working on designing a full-page site, which will be powered mostly with javascript (ajax in particular). Right now, I'm working on the basic structure and such.
I've seen several questions with similar goals, but none of them really helped. Maybe I'm misinterpreting, or something. I dunno. Anyway, my goal is to create a page that takes up exactly the amount of space a user's browser provides, without empty space on the sides or top. This means I have to rely upon percent-based measurements for my structure.
Problem is, one of the two key elements is to be a specific size, in pixels. Any bigger, and there will be space left empty and put to waste. Any smaller, and my site's logo won't fit. Take a look at my code:
HTML
[nav]The Beef[/nav]
[footer]The Cream Filling[/footer]
CSS
html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}
nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}
footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}
The problem is, now the full-page navigation (as I mentioned, javascript-powered site) continues on "under" the footer. What I want it to do, is take up all of the space the footer isn't using, without extending the page beyond the capacity of the user's screen (IE, no scroll bars).
I'd rather not use javascript for this, but I'm willing to do so if there are absolutely no other options.
Why not specify the bottom position of the content block:
bottom: 170px;
I have a movingboxes jquery plugin on my web site, and the left side of the panels in the box are shifted over approx 40px.
I suspect this has something to do with my stylesheet padding something but I can't seem to find it. Can anyone explain what is shifting this over?
My site is www.generationd.com and the movingboxes is found at Products | High Availability Asterisk, then click Screen Shots tab.
Thanks!
If you are referring to the weird space on the left of the screenshots slider thingy, the offending css seems to be:
.mb-scrollContainer, .mb-scroll {
width: 830px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
position: relative;
left: -35px;
top: 0;
font-size: 18px;
}
It's a bit half assed as i changed the width to acomodate pretty much the width of your slider thingy, and had to move it 35px to the left.
It may take a bit more work, but at least you have an idea of where the problem is.