Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a problem with horizontally centering a DIV.
I have provided a full example here.
This is inside a Content Editor WebPart in SharePoint 2010 Standard.
http://fiddle.jshell.net/hdA7d/
<div class="weathercontainer">
<div id="weather" class="items" onClick="window.open( 'http://www.weather.com/weather/today/33196','_blank' ); return false; " >
</div>
</div>
.weathercontainer{
width: 100%;
}
.items {
width: 170px;
margin: 0px auto;
position: relative;
cursor: pointer;
}
Like this
demo
css
.center
{
left: 50%;
position: absolute;
top: 50%;
}
.center div
{
border: 1px solid black;
margin-left: -50%;
margin-top: -50%;
height: 100px;
width: 100px;
}
You can just give the absolutely positioned .items a left and right position of 0 and a margin of auto:
.items {
position:absolute;
margin: 0px auto;
left:0;
right:0;
}
See this updated fiddle.
Check if this works for you.
click here
display: table-cell;
vertical-align: middle;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to make a very simple google dinosaur style game, where an "obstacle" constantly slides towards the "character". To do that, I have made some css code exactly the way the guy in the tutorial did it. I included a snippet of it below.
* {
padding: 0;
margin: 0;
}
.game {
height: 200px;
width: 500px;
border: 5px solid black;
}
.character {
height: 50px;
width: 20px;
background-color: red;
position: relative;
top: 150px;
}
#keyframes block{
0%{left: 480px;}
100%{left: -40px;}
}
.obstacle {
height: 20px;
width: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block is infinite;
}
<!DOCTYPE html>
<html>
<head>
<title>Jumping Game</title>
<link rel="stylesheet" href="jump.css">
</head>
<div>
<body>
<div class="game">
<div class="character">
</div>
<div class="obstacle">
</div>
</div>
</body>
</div>
<script src="jump.js"></script>
</html>
You need to declare animation duration property like this.
animation: block 0.5s infinite;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to absolutely position sideways text inside a div that there are multiple occurences of.
Each child has position: absolute; ,
and each parent has position: relative;
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
}
.child{
display: inline-block;
line-height: 1.5;
height: 5%;
position: absolute;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
}
Of of the children go to the same exact place on the page, which seems to be the first childs parent.
The structure is
Parent
child
close
close
for all 4 divs.
Can anyone please help?
In your css, if your parent has no content other than the absolute position child div, then the parent has a 0 height declaration - so you have to set the height of the parent div in pixels in order to give it a place in the DOM.
Your height: 5% on the .child may be what is throwing it off (it was for me). That, or there could be other css that is overriding something for you. Fiddle here: https://jsfiddle.net/tagb3yja/
.parent{
width: 24%;
display: inline-block;
float: left;
border-left: 1px solid #FFA500;
position: relative;
background: yellow;
}
.child{
position: absolute;
display: inline-block;
line-height: 1.5;
top: 0px;
right: 0px;
transform: translate(0px, 100%) rotate(90deg);
overflow: hidden;
float: right;
background: silver;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Any idea how to create that shape in CSS an how to keep it always centered while resizing ??
The point is to use transforms and set the transform-origin on the "fixed" point, here top right so :
transform-origin:100% 0;
Then you can rotate or skew your element :
DEMO
HTML :
<div></div>
CSS :
body{
background:gold;
}
div{
position:absolute;
width:100%; height:100%;
right:50%; top:0;
background:teal;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
Not a perfect Solution and needs some modification but should do the trick:
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
margin-left:-1000px;
width: 4000px;
height: 2000px;
background-color: yellow;
}
.arrow {
width: 0;
height: 0;
border-top: 2000px solid red;
border-right: 2000px solid transparent;
}
You can see it here: http://codepen.io/anon/pen/vsaLc
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
Here's a link:
http://www.cultsectsclothing.com/shop
Can someone please help me? I can't figure out why the header won't center. Instead, it's awkwardly all the way to the right. I feel like it's something really simple but I don't even know...
I have already tried redoing the header on css and in the html cascade layout. It's the same way I do the header on all the other pages. I just need the stupid title to center and for some odd reason it is not.
I checked my tags and made sure they matched up with my 's too. Help??
Give CSS Like this for #header and it will Work No Doubt !
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}
You can use it for your header:
#header {
width:980px;
height:130px;
margin:0 auto;
}
Instead of
width: 1000px;
Put
width: 100%;
on the #header CSS style.
It will look like this: http://d.pr/i/2OKD
And the fixed will be still there, so, your "logo" will not scroll (like the menu).
try this
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}
Demo JsFiddle
Add margin: 0 auto; in your #header. This will solve your problem..
HTML
<div id="header">CULT SECTS</div>
CSS
#header {
font-size: 60px;
font-style:oblique;
font-weight:bold;
color: #000;
text-align: center;
margin 0 auto;
width: 100%;
min-height: 30px;
display: inline-block;
}
In context to your code, you simply need to add two properties to your #header rule, which are left: 0 and width: 100% (remove your 1000px as I'm assuming you just want the header to be centered and don't care about an exact width)
See the last 2 properties in the code block below:
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
min-height: 30px;
display: inline-block;
text-align: center;
left: 0;
width: 100%;
}
http://jsfiddle.net/uberrobert/F4TgR/
This will make your header come back from the right as I see that behavior in Firefox :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
How can I create a 2 color border like this around an image?
Like this:
This is for an HTML website. What CSS should I use? Thanks in advance :)
Fiddle Link
CSS
#mainDiv {
height: 200px;
width: 560px;
position: relative;
border-bottom: 8px solid #f51c40;
background: #3beadc;
border-top: 4px solid yellow;
}
#borderLeftbottom {
border-left: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
#borderRightbottom{
border-right: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
right:0;
}
#borderLefttop {
border-left: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
}
#borderRighttop{
border-right: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
right:0;
}
HTML
<div id="mainDiv"><img src="https://www.google.com/images/srpr/logo11w.png" alt="google" />
<div id="borderLeftbottom"></div>
<div id="borderRightbottom"></div>
<div id="borderLefttop"></div>
<div id="borderRighttop"></div>
</div>
Fully reusable solution for any image - just need to wrap it with a div with class .multipleBorder
FIDDLE
1) Wrap the image in a div.
2) Give the div padding: say 12px - 10px for outer border and 2px for inner border
3) Create pseudo elements :before and :after the div - each with 50% height
4) Set a border and background for each pseudo element (background is used as inner border)
5) Remove the bottom border of the top element and the top border of the bottom element.
Done!
Markup
<div class="multipleBorder">
<img src="http://placehold.it/600x150" alt="" width="600px" height="150px" />
</div>
CSS
.multipleBorder
{
position: relative;
display: inline-block;
padding: 12px;
}
.multipleBorder:before, .multipleBorder:after
{
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height: 50%;
border: 10px solid silver;
border-bottom: none;
background: maroon;
z-index: -1;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.multipleBorder:after
{
bottom:0;
top: auto;
border: 10px solid maroon;
border-top: none;
background: silver;
}