Fails to position elements - javascript

I am still learning CSS. I am creating a game with time and score.
To be short I want to create this:
And this is what I have:
jsFiddle link: http://jsfiddle.net/yZKTE/
CSS:
#boxbuttons {
/*text-align: center;*/
/* margin: 20px;*/
display: block;
top:0;
left: 0;
right: 0;
padding:50px;
/*width:900px;*/
}
#boxbuttons .button {
text-transform: uppercase;
padding: 5px 10px;
margin: 5px;
border-radius: 10px;
cursor: pointer;
}
#rezz
{
background:url(../images/score.png) left top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#counter{
margin-left:50px;
}
#time
{
background:url(../images/time.png) right top;
width:35px;
height:35px;
background-repeat:no-repeat;
}
#ttime{
margin-right:50px;
}
HTML:
<span id="boxbuttons">
<span class="button" id="rezz">
<span id="counter">0</span>
</span>
<span class="button" id="time"><span class="button" id="ttime"></span></span>
</span>

There is a lot of this that are causing this problem.
The first thing you're going to want to do is "shrink wrap" your outer div. This will make it so that when you float an element, it will float to the right of the parent div, not the outermost div. This is hard to explain, but put the following CSS in, and notice the width of the #picbox div shrink to be as wide as it's contents.
#picbox {
display: inline-block;
}
Your #boxcard CSS has margin: 0 auto; which is centering it. You want to remove this, which will start the #boxcard div all the way to the left. Add some margin-left to the div to get it to line up with the header. Like this:
#boxcard {
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin-left: 50px;
width: auto;
z-index: 1;
}
Lastly, lets get your #time div to float to the right. First, change #time to #boxbuttons #time so that it overrides your #boxbuttons .button styles. First, we're going to float it right with float: right;. Then, we're going to remove the width you've set, so that it takes up auto width. Lastly, we'll give it some padding-left and change the background to left top, so that the time and the clock image are separated from each other, and the clock is now on the left.
#boxbuttons #time {
background:url("http://remake.hr/memtest/images/time.png") left top;
height:35px;
background-repeat:no-repeat;
float: right;
padding-left: 30px;
}
I think that's everything.
http://jsfiddle.net/yZKTE/6/

Change the #time css like so:
#time
{
background:url("http://remake.hr/memtest/images/time.png") right top;
width:100px;
height:35px;
background-repeat:no-repeat;
display: inline-block;
float:right;
}
The span HTML element is by default display:inline, meaning that width and height attributes do not affect it. By setting it to display:inline-block, this allows the width attribute to take charge. I changed the width to 100px because otherwise it was too small. I also added the float:right attribute because that tells the element to float to the rightmost position inside its parent element.
http://jsfiddle.net/yZKTE/1/
EDIT:
Do this to move the time to the right side of the clock icon:
#time {
background: url("http://remake.hr/memtest/images/time.png") left top;
width: 145px;
height: 35px;
background-repeat: no-repeat;
display: inline-block;
float: right;
line-height: 35px;
padding:0!important;
}
#ttime {
float: right;
font-size: 35px;
line-height: 35px;
margin: 0!important;
padding: 0!important;
}
http://jsfiddle.net/yZKTE/4/

Related

How to find height and width of point where we want to place our div in #css

I have created 4 div in my html. Div contains heading, paragraph and parallax image in background. Now what i want to put my text i.e heading and paragraph in some exact point inside div.
How to find the dimension of point where i want to place my text inside div.
Help guys.
div{
height: 600px;
/* background-color: grey; */
margin: 0px;
padding: 0px;
}
h1{
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
line-height: 90px;
}
p{
text-align: center;
}
.center{
margin: 0 auto;
width : auto;
padding-top: 250px;
}
In this if you can place the header and paragraph in anywhere in the div by using position property like this,
.div{
height: 600px;
width:100%;
float:left;
position:relative;
background:gray;
}
h1{
position:absolute;
top:40px;
right:40px;
}
p{
position:absolute;
top:50px;
right:40px;
}
In above case, h1 40px from top and 40px from right in inside the div.you can move the absolute positiond elemet(h1 or any..) anywhere you want by change the values.
make sure h1 and p must inside the div that have position:relative;

Displaying a partial line of text

How can I display the bottom half of a line of text in a text area or label? In my CSS, I have this
.label {
font-size: 13px;
height: 7px;
width: 200px;
display: inline-block;
overflow:hidden;
}
<label class="label">TEST CODE</label>
What this does is display the top half of the label as if the line was cutoff. For example, the letter O would be displayed as a semicircle arc similar to an n. I have a need for this type of display and it works for me.
What I need to do is display just the bottom part of the line so a semicircle arc on the letter O would look something like a u. I can't use a mask because I'm displaying an image beneath the label so it has to have a transparent background. I tried padding-bottom but that didn't help. Any suggestions would be appreciated.
From my understanding, you are trying to crop the top half of the text horizontally rather than cutting off the bottom half.
To do this, you need to include an overflow: hidden value if you wish to 'crop' elements. In addition, you will want to set the line-height value for text elements to 0px. The bottom padding will then push the content above the original top position.
.crop-top {
overflow: hidden;
font-size: 13px;
line-height: 0px;
height: 7px;
width: 200px;
padding-bottom: 7px;
display: inline-block;
}
<label class="crop-top">THIS TEXT IS CROPPED</label>
You can wrap the inner content in <span> and then using the transform css property you can achieve this
Stack Snippet
body {
background: black;
color: white;
margin: 0;
}
div {
margin-bottom: 30px;
}
.upper,
.bottom {
font-size: 50px;
line-height: 50px;
height: 25px;
display: block;
overflow: hidden;
vertical-align: top;
color: red;
}
.bottom {
transform: rotateX(180deg);
margin-top: 10px;
color: yellow;
}
label span {
line-height: 50px;
display: block;
}
.bottom span {
transform: rotateX(180deg);
}
<div>
<label class="upper"><span>HELLO</span></label>
<label class="bottom"><span>HELLO</span></label>
</div>
<div>
<label class="upper"><span>WELCOME</span></label>
<label class="bottom"><span>WELCOME</span></label>
</div>

Removing gap without affecting styling

so in a previous post I asked how to remove a gap so that the body takes up the entire height of the browser window. This was solved using:
margin: 0;
However, I need (or the only way I know to) style my text using margins. As soon as I apply something like
margin-top: 50px;
the body doesn't fit the 100% height of the browser. I know all of the contents of the div have to use margin 0 in order for it work, but how am I supposed to style things using a margin.
Are there any other ways I can make the body 100% of the browser height?
https://jsfiddle.net/fveb8wsu/
body{
margin:0;
padding:0;
}
Did the trick for me, the body has some default paddings. So since the content of the mid was 100vh + padding this would be greater than 100vh
Is that what you need ? DEMO
#content-mid {
background-color: #000000;
opacity: 0.9;
height: 100vh;
width: 750px;
margin-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width: 725px;
}
/* Content Text */
#sv_title {
font-family: BebasNeue;
font-size: 60px;
color: #FFFFFF;
text-align: center;
margin-top: 50px;
}
#sv_sub {
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color: #FFFFFF;
text-align: center;
margin: 0;
margin-top: -20px;
}
<div id="content-mid">
<div id="basics">
<div id="sv_title">Community Name</div>
<div id="sv_sub">Your sub title here!</div>
</div>
</div>
i agree with everyone, instead of margin use padding, take a look:
#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics {
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}
https://jsfiddle.net/keinchy/5up22vom/1/
-cheers
What you have here is collapsing margins between parent and child element because parent has no margin-top and child has margin-top: 50px Demo
So now parent element has height: 100vh and margin-top: 50px and that is why body doesn't fit the 100% height of the browser.
There are couple options how you could prevent collapsing margins
Use display: inline-block Demo
Use display: flex Demo
Use float: left Demo
Or if you want to keep margin on parent but you don't want height to be more then window height you could use calc(100vh - marginofchildren) like this Demo

Blind with negative margins

I'm using JQuery UI so that I can slide down a div using the blind function, however, it's not working properly.
Here's the JSFiddle I started: http://jsfiddle.net/CBe3w/192/
For some reason, the sides don't register until the sliding animation is done, at which point they pop out. How can I make it so that the sides are registered from start to finish (they should always be the width of the box class)?
HTML:
<div class="box">
Click Me!
<div class="footer">
Why does it do this?
</div>
</div>
CSS:
.box {
background: #f5f5f5;
width: 250px;
padding: 25px;
}
.footer {
background: red;
padding: 15px 25px;
margin-top: 25px;
margin-left: -25px;
margin-right: -25px;
display: none;
}
JS:
$('.box').click(function() {
$('.footer').toggle("blind");
});
I think the issue is with the order in which jQuery changes the attributes of the element when it toggles it, and the fact that you have negative margins set on the footer.
You could potentially take off the left and right padding of .box, and then put your .box content in a separate div inside, which has margins. Kind of a "hacky" way to do it potentially, though.
Here's a potential solution
The jQuery stays the same, only the CSS/HTML have changed.
See the jsfiddle
HTML
<div class="box">
<div class="content">Click Me!</div>
<div class="footer">
The sides don't pop out anymore!
</div>
</div>
CSS
.box {
background: #f5f5f5;
width: 250px;
/* took off the left and right padding */
padding: 25px 0;
}
.content {
/* "simulates" the padding of .box that you had before */
margin: 0 25px;
}
.footer {
background: red;
padding: 15px 25px;
/* took off the negative margins */
margin-top: 25px;
display: none;
}
You don't need jQuery UI at all: LIVE DEMO
$('.box').click(function() {
$('.footer').slideToggle();
});
<div class="box">
<h3>Click Me!</h3>
<div class="footer">
See how the sides popped Greatly?
</div>
</div>
.box {
background: #f5f5f5;
width: 300px;
padding-bottom: 15px;
}
.box h3{
padding:25px 25px 10px;
}
.footer {
background: red;
padding: 15px 25px;
display: none;
}
The explanation : Jquery UI blind effect will set margin:0 while it's animating on the height of your element.
You will have to redesign your html to split your .box in order to remove it's padding, otherwise, patch jquery-ui javascript to remove that 'margin:0' from the effect er,
you'll be able to fix this issue by positionning your inner container 'relative', so no html remake involved.
.footer {
background: none repeat scroll 0 0 #FF0000;
display: none;
left: -20px;
margin-top: 25px;
padding: 15px 25px;
position: relative;
right: 0;
width: 100%;
}
jsFiddled here

'Stretching' a div to the edge of a browser

I'm trying to achieve a fixed width centred layout with headings that 'stretch' to the edge of the users browser. Like this...
Any ideas how I can achieve this?
This works splendidly. It could use some refinements, but the idea is quite solid.
Live Demo (edit)
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 80%;
margin: 0 auto;
background: #bbb;
}
#menu {
overflow: auto
}
#menu li {
float: left;
width: 40px;
margin: 5px;
height: 24px;
background: #fff
}
h1, h1 span, h2, h2 span {
padding: 3px 0;
height: 25px;
}
h1, h2 {
position: relative;
margin: 9px 0
}
h1 span, h2.left span {
display: block;
position: absolute;
width: 100%;
left: -100%;
top: 0
}
h2.right span {
display: block;
position: absolute;
width: 102%;
left: 100%;
top: 0
}
h1 {
background: red;
width: 80%
}
h1 span {
background: blue /* blue for demonstration purposes */
}
h2.left {
background: red;
width: 30%;
float: left
}
h2.left span {
background: blue /* blue for demonstration purposes */
}
h2.right {
background: red;
width: 30%;
float: right
}
h2.right span {
background: blue /* blue for demonstration purposes */
}
#content {
clear: both
}
HTML:
<div id="container">
<h1><span></span>Heading</h1>
<h2 class="left"><span></span>Sub-heading</h2>
<h2 class="right">Sub-heading<span></span></h2>
<div id="content">
Hi!
</div>
</div>
Maybe you could use an illusion to accomplish this? You can try having a blue bar with width = 100% sit behind all of your page content, such that it is only exposed to the right of the blue "sub-heading" section, but always reaches the right edge. You just have to make sure you eclipse the rest of it (anything to the left of the blue "sub-heading" element).
if you want be fixed in the window you can use position:fixed otherwise position:absolute. Then with left:0 and right:0 you position them in the left or right side. Using top you can set the offset from top.
Demo: http://jsbin.com/awoke3
Perhaps this would work?
<h1 id="mainHeader">Heading</h1>
#mainHeader {
float:left;
clear:both;
width:800px;
background-color:#ff0000;
color:#fff;
}
Here is my attempt using JavaScript, maintaining a fixed width center: Demo
Otherwise, I don't think what you want is possible using pure CSS, but I could be mistaken.

Categories