I came across the website http://www.swiftkey.net.
On my widescreen I see the gray background on the sides of the content area..On my regular(1024x768) the grey bars are not there.
How do they acheive this effect?
Using firebug, I was able to decipher what I think MIGHT be doing this:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
I do have experince with CSS and HTML, but the above code is a little bit cryptic to me, especially considering w2 is inside w1.
I'm answering this under the assumption that the grey bars you're talking about are the ones shown in the second sample image:
The simple answer is that the page uses a wrapper with a static maximum width that is horizontally centered:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
The grey bars are created by having a background color on the <body> or <html> elements:
body {
background-color: #888;
}
I haven't checked the source to see where these styles are specifically set, I'll leave that as an exercise for the reader.
This has to accomplished with javascript screen object
var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;
availWidth and availHeight gives actual available width and height, considering taskbars and scrollbars etc.
width and height give the actual screen resolution. Then access the variables and decide the type of layout.
However adjusting anything to center is easy
div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}
the javascript screen width tracing is for more control options
Related
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I am in a big of an issue here with a design I am trying to set up. Here is the website for a reference;
http://throwbackhero.com/index1.php
The problem is that I set the body to height: 100%; in the stylesheet and on the #wrapper div as well. The height goes off the current page height and does not take into account that there are other divs that could cause overflow.
I would like, a blank page to be the size of the browser even if the vertical size of the browser is changed, the content/wrapper div will shrink to accommodate.
Can this be done?
EDIT
Okay so clearly my original question was extremely confusing. Here is a picture;
So, in pic 1 (the left) is the issue. With height 100%; on the wrapper and content divs, it is creating that bad boy. I want it to look like picture, where the white/gray area grows/shrinks depending on the size of the browser...
The easiest way is simply using CSS:
height: 100vh;
Where 'vh' stands as vertical height of the browser window.
Responsive to resizing of brower and mobile devices.
Give body,HTML & main DIV height 100%. write like this:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
Check this http://jsfiddle.net/3VUGt/
The answer from #sandeep is correct. The best way of controlling the most basic container of display in the browser is to control html/body.
Normally, I need the same structure as you design:
1. the content should stay inside the container without overflow scroll, and
2. the container should resize as 100% while the browser is resizing.
So the basic way of doing it is:
html, body {
height: 100%;
}
And I always set the basic container fit both height and width:
html, body {
width: 100%;
height: 100%;
}
NOTE: there could a margin/padding issue for some browser (as user agent stylesheet):
which add a style for some of basic component like body in default (e.g. Chrome 70.0.3538.102):
body {
display: block;
margin: 8px;
}
Check within the developer mode, if that happens, add margin override, this also works for padding:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
And if your page base component looks like:
<body>
<div id="div1">
my html content ...
</div>
</body>
You could just do:
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: absolute;
width: 100%;
height: 100%;
}
This always work for me. Hope it helps. And down here is what I guessed that the target you want to reach.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#div1 {
position: relative;
width: 60%;
height: 100%;
background-color: rgb(255,125,125);
float: left;
}
#div2 {
position: relative;
width: 40%;
height: 100%;
background-color: rgb(125,255,125);
float: left;
}
<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>
Add overflow:auto to the wrapper element.
There is no complete CSS solution for this problem. This CSS "issue" has been known for many years. Since CSS has grown in functionality over the years, I thought there may be a complete CSS solution by now. But alas, there is not. I have tried many things and have searched high and low, and the issue remains the same.
To my knowledge, there are only 3 solutions that do not require 3rd party libraries: absolute positioning, faux colums (two-tone repeating background) and JS.
The only two solutions that appeal to me are: faux columns and JS. I prefer the JS solution, since it makes more use of CSS. With JS you don't have to re-work the background image if you want to change the column width or color later on. It is a more adaptable and re-useable solution. The only advantage I can see for creating faux columns is that your layout doesn't break if the client disables JS.
JS solution (wrapper not required): https://jsfiddle.net/Kain52/uec9cLe4/
var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }
JS solution (wrapper required): https://jsfiddle.net/Kain52/7udh55zq/
var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";
Explanation: If you use a div wrapper then you can assign it to the height of the wrapper. If you don't use a wrapper, then you can just set the height of the shortest side to the height of the longest side. If you know that your side menu bar will always be shorter than your content, then you only need two lines of code:
var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";
If you are okay with having some JavaScript run every millisecond on your page, and the content above the white area in question will always be the same pixel height, you could try something along the lines of this...
bodyLeadingFill = // put the size taken up by everything above the white div,
// including margin, padding, border, etc
function resizeElement(){
document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);
This is, of course, assuming that the content above the white box will always be the same size no matter the font or operating system or size of the window.
I didn't actually test this myself, but the concept should work. Look out for the comments that say where to put some info.