I'm using the RefineSlide responsive slideshow and I can't center it, it always sticks to the left of my page.
#slideshow{
position: relative;
width: 960px;
height:auto;
left: 50%;
margin-left: -480px;
}
I've tried adding the above to my CSS, and although this successfully centers it, it's unfortunately no longer responsive as when I test on the iPhone the slideshow doesn't fit to the screen.
#slideshow{
position: relative;
width: 100%;
height:auto;
}
When I style it like this, it is responsive... but sticks to the left. What do I need to change with this CSS to center it and keep it responsive?
It somewhat depends on your other markup, but in general this is enough:
#slideshow {
margin: auto;
width: Npx;
/* also display: block if the element doesn't already have it */
}
Sample.
Related
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I need to centralize a block made by a div, for instance, in the middle of the screen of a fluid grid layout. Inside this block, I want to put an image, a password field and a submit button. When I do this in a non-responsive layout with the following code, it works perfect but, in a fluid grid layout it doesn't:
#block-login {
width: 650px;
height: 378px;
float: left;
clear: both;
margin-top: -189px;
margin-left: -325px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
the fluid div I refer is one like this:
<div class="gridContainer clearfix">
<div id="div1" class="fluid"></div>
</div>
thanks in advance.
There are a few methods of doing so: CSS tables, CSS transforms and CSS flexbox. I typically avoid using CSS tables, though. Both CSS transforms and flexbox solutions, unlike the fixed negative margin solution, is that they are child-dimension agnostic (size of child does not matter, fixed or fluid).
For CSS transforms, a major caveat is that the parent's dimensions (that of .gridContainer) has to be explicitly predefined. The trick is to position it's child absolutely, but offset by 50% to the left and from the top. In order to take into account the child's own computed dimensions, we use CSS transforms to fix that. You might want to add vendor prefixes to the transform property though.
.gridContainer {
position: relative;
width: (have to declare);
height: (have to declare);
}
.gridContainer > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The other solution (which I feel is way more elegant, but lacks cross-browser support in older browsers) is to use CSS flexbox:
.gridContainer {
display: flex;
align-items: center;
justify-content: center;
}
You can view the demo of both solutions here: http://jsfiddle.net/teddyrised/B7PVh/
This is a possible solution for you :
FIDDLE
CSS :
body,html,.gridContainer{
width:100%;
height:100%;
margin:0;
position:relative;
}
#div1 {
width: 80%;
height: 80%;
margin:0;
position: absolute;
top: 10%;
left: 10%;
text-align: center;
background:gold;
}
If you don't need to support IE9 and below, you can get a fixed-wdith, fixed-height div centered in a fluid container by using relative positoining and the new CSS calc() function:
<div class="gridContainer">
<div id="#block-login">
</div>
</div>
#block-login {
position:relative;
top:calc(50% - 189px); /* 50% - 1/2 of it's own height */
left:calc(50% - 325px); /* 50% - 1/2 of it's own width */
}
A jsfiddle demo
Note: caniuse.com lists "partial support" for calc() with ie-9
Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?
link to site
Using this code at the moment;
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}
Many thanks
These two lines
display: block;
margin: 0 auto;
are a good place to start to center something.
Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.
There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.
Try this for your CSS
header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}
No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.
I tried the code out on your website so it should work. Hope it makes sense.
I've been looking around for a while today and can't find a question that answers my specific problem.
I am designing my website and the content is in the center placed inside a div, which is the wrapper. My problem is that even though the height is set at 100%, if I add to much content, the wrapper does no stretch with the content, so the text ends up being placed outside the wrapper; it is still centered with it.
How can I fix this? The CSS I have is:
#wrapper {
position: absolute;
left: 50%;
width: 800px;
height: 100%;
min-height: 100%;
margin-bottom: 0px;
margin-left: -400px;
background-color: #F7F7F7;
border-radius: 5px;
}
Change
#wrapper{height:100%;}
to
#wrapper{height:auto;}
Fiddle here.
You could also take off the Height Property, if you need to have a minimum height of 100% before the wrapper div begins to enlarge as respective to its content. so it will be:
#wrapper{
min-height: 100%
}
not:
#wrapper{
height:100%;
min-height: 100%;
}
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).