I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.
Related
This question already has answers here:
Limit flexbox height to browser window (currently it's overflowing causing vertical scroll)
(2 answers)
Closed 3 years ago.
Is there a way to make a flexbox container the same size as the window?
If you want some element, flex or not to be the same size as your window, then you are looking for viewport units, wich are vh and vw.
If you want to achieve the height of the window, you want height: 100vh;, and if you want the width of the window, you want width: 100vw;
You can also use bouth.
Use the snippet below. This will fit the element to the size of the entire page.
.flexbox-container {
background-color:blue; // just to show element filling page.
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
}
<div class="flexbox-container"></div>
To make flexbox container the same size as the window add the below given properties to the flexbox container :
height:100vh;
width:100%;
*{
margin:0;
padding:0;
}
.flexdiv{
height:100vh;
width:100%;
background-color:lightgreen;
}
<div class="flexdiv"></div>
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
I have a main div that it re-sizes with re-sizing window. I want to add 2 div inside the main div (float left and right). left one width is 165 and right one width is the rest size of main div. can I simply use something in CSS?
#leftDiv{
height:100%;
width:165px;
float:left;
background-color:#244378;
}
#rightDiv {
height:100%;
width:100% - 165px;
float:left;
background-color:#244378;
}
If you really want do it this way, you can use the CSS3 calc property, but keep in mind that this isn't supported in all browsers:
#rightDiv {
height:100%;
width:calc(100% - 165px);
float:left;
background-color:#244378;
}
No! you cannot use a value like "100% -165px".
Instead you can just remove "float:left" and "width:" from #rightDiv.
That should work for your case.
You have to remofe float:left from #rightDiv and set width to auto in this way:
#rightDiv {
height:100%;
width:auto;
background-color:#ff0000;
}
If you do this, the right div will always appear near the left div and will have a dynamic width.
Take a look at this: http://jsfiddle.net/b9BrB/1/
I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}
is there a simple css way to achieve the following layout?:
here you can see 2 div containers which are 100% in height. The right div is for menu and is 200px in width. And the left div should be also 100% in width but with a 200px margin-right (this solution is not working for me :/ ) at least not in all browsers.
If it is not possible, can anyone recommend maybe a jquery plugin?
You do like this :
CSS
.right{
float:right;
width:200px;
height:100%;
background:red;
}
.left{
overflow:hidden;
background:green;
height:100%;
}
html, body{
height:100%;
}
Check this http://jsfiddle.net/RDyY5/
https://stackoverflow.com/a/13726054/14493760
In searching I came across this and it worked far better for me than the solution listed above