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.
Related
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
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
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 have recently created a website for our school and it was great. However, when I tested it to another laptop, the contents of my website was a mess like they are not in their exact places. Some example of my code:
#headText {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}
#label_desc {
color: #1f8e1c;
position: absolute;
margin-left: 20%;
margin-top: 1%;
}
This makes the "headText" and "label_desc" in the center of my site, but when I tested it to another laptop, the headtext and label_desc seems to appear on different places.
On the other hand, when I zoom in my website (on my laptop), the contents still moves and it disarranged itself unlike most websites when you zoom in, the contents gets bigger and still stays in their proper places.
Can you please help me? I really need it so badly.
UPDATE
Thanks to hakre, what I meant was screen-size, not resolution.
UPDATE 2
To summarize my problem -> http://postimg.org/image/r1hs6i3kb/
You are setting a left margin:
margin-left: 20%;
Each browser will do this left margin, there-fore not centering the element but aligning it to the left.
Instead set left and right margin to auto and a width (suggestable) smaller than 100% to show the effect:
<div id="parent">
<div id="child">
center-me :)
</div>
</div>
#parent {}
#child {
width: 40%;
margin: 1% auto 0;
}
Demo: http://jsfiddle.net/hRsLr/
This is independent to resolution. Resolution is about how many pixels there are per the square centimeter. Why you most likely mean is screen-size which is related, but different. More precisely, you mean the size available in the browsers view-port, that is the area where the website is rendered into.
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;