Centering Fixed Width Page Content - html

I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.

What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.

Related

Responsive image resize and selectively crop it's width with a set of rules

I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes

Div with sticky height and bottom

I want a div to stick to both top and bottom while being responsive on all sides.
I have a view consisting of 4 divs and 3 of them works well in responsive layout but in one I have a chat window (bottom/left) that doesn't have a very good height response.
Below you can see the 4 divs in full view and it's looking the way that I want it to look:
But once I start, either moving the side of the inspector to the left or look on a mobile device, the chat window reveals it has a solid height and leaves empty space below it (it sticks nicely to the top at least):
I can't seem to get around this problem (stuck for a week now); if I change the current viewport height (vh) to more it will only disappear underneath the screen and if I use % nothing happens. Here is a piece of the actual chat css:
#chatlioWidgetPlaceholder{
position: absolute;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 5px;
font-family: input;
}
...but once again, vh or % doesn't work out on this one either. Does anyone understand my problem?
I believe it could be something with the height of the top parent div because it doesn't stretch to the bottom (blue marked) and therefore can't grow:
I placed the HTML and CSS in https://jsfiddle.net/3chdp873/2/
I stripped the syntax from other divs for easier readability but if needed, just let me know :)

How to exceed the body's height beyond the view port & have the content centered vertically?

I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-

Website container won't align to the centre (Mobile and web)

Hoping that the community will be able to help me out here as I really am stuck. I've having 3 I issues with my website:
Website Link
For some odd reason - I can't get my columns to line up straight. The entire page seems to be more to the right than in the centre on both desktop and mobile
What I'm trying to do with the top image is have it take up the entire page upon loading, and then as you scroll, the image disappears. For some reason, on mobile, the image doesn't cut off and allows for the user to scroll to the right.
On mobile, I can't get the top image to show properly. It stretches vertically, and users have to scroll all the way past the photo to get to my content... I want the main image to resize like it does on a desktop browser and only take up the screen real estate when the page loads
Any advice here would be helpful...
In your projects sections - if that is where your issue is has padding on a UL tag - which is causing it to look misaligned.
You could do this to fix that section:
ul.skillssection {
padding-left: 0;
}
It'll be more helpful for the community if you made points or set up a jsfiddle.
Update - answer for number 2.
I can't seem to replicate it but I've noticed you've got:
img.bg {
min-height: 100%;
width: 100%;
min-width: 780px;
overflow: hidden;
}
I would change it to:
img.bg {
min-height: 100%;
max-width: 100%;
overflow: hidden;
}
So the max-width is always 100% and it should follow the width of the parent.

Div within a Div

I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/