I am trying to move the box by giving CSS selector for <div> a relative position attribute and some distance from left and top edge. Problem is it's not working.
Selector is clearly working because if I uncomment visibility attribute, the image is hidden. What's wrong here?
HTML:
<body>
<div id="test_logo">
<img src="http://uselessproducts.weebly.com/uploads/5/2/5/5/5255421/_6517253_orig.jpg" height="100" width="100"/>
<span id="test_logo_title">test</span>
</div>
</body>
CSS:
* { margin:0px; padding:0px; }
html {
font-family: Verdana, "Lucida Sans Unicode", Arial;
font-size: 9px;
}
body {
margin: 9px 0 0;
background-color: #f37062;
font-size: 100%;
}
#test_logo {
/*visibility: hidden;*/
position: relative;
left: 100 px;
top: 200 px;
}
jsFiddle link
You just need to remove the spaces before px:
#test_logo {
position: relative;
left: 100px;
top: 200px;
}
Take the spaces out of the left: and top: specs in #test_logo, and you should be right as rain.
Here is the modified CSS, I think this should fix your problem, you can adjust the padding of the #logo to meet your space needs from the top and sides.
* {margin:0px; padding:0px;}
html{
font-family: Verdana, "Lucida Sans Unicode", Arial;
font-size: 9px;
}
body{
margin: 0 auto;
background-color: #a37062;
font-size: 100%;
}
#logo{
padding: 5px;
}
Heres the link to my fiddle http://jsfiddle.net/r9x5A/3/
But as the others stated, the problem you're having is the space between the numbers and 'px' in your css.
Related
How can I give margin to #more so it will be always at the same distance from #logo when resizing the window?
Look at the code down here in fullscreen and resize the window you'll see that the distance from 1 to 2 changes.
Thanks for the help.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo {
top: 10px;
left: 10px;
position: fixed;
}
#more {
top: 10px;
left: 50px;
position: fixed;
}
<div id=logo>1</div>
<div id=more>23456789</div>
You want to use the same unit you use for your font-size: which is vh.
2 important side notes:
dont use position: fixed if you want to really be responsive
don't use id's in css, you are not allowed re-use these in html.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo {
display:inline;
}
#more {
display:inline;
padding-left: 2vw;
}
<div id=logo>1</div>
<div id=more>23456789</div>
Actually I can float:left both div and it works aswell.
body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo,#more {
float:left;
}
<div id=logo>1</div>
<div id=more>23456789</div>
I'm trying to animate the width of two overlapping divs, in order to show / hide the text contained within them. I'd like one div to animate from left to right, and the other to animate from right to left, so that as one piece of text is being wiped away, the other is being revealed following it.
Here's a JS fiddle of what I've got so far, but they are both being revealed from left to right. How do I get 'cancel' to be revealed from right to left?
https://jsfiddle.net/a43wrq20/
I thought that these rules would do it, but it isn't working for me:
.foo {
right: 0;
width: 0;
}
.foo.active{
right: 0;
width: 120px;
}
Also, they both shift slightly as they're animating? Can anyone see an easy fix for this?
Thanks a lot!
Animate an element's width from right to left cause some issue in this case, as the animated elements child, cancel-text, is left aligned. It will look like it slides in from the right.
The simplest solution is to leave the cancel-text, and animate the login, give it a background color (so it hides the cancel), give them both an absolute position, and you'll most likely get the desired result (if I got it right)
$(document).ready(function(){
$('.clicker').on("click", function(){
// if($('.email.input').val() ){
$('.email.input').toggleClass('up');
$('.password.input').toggleClass('up');
$('.signup').toggleClass('up');
$('.login').toggleClass('up');
$('.login-text-container').toggleClass('active');
// }
});
});
.center-clicker {
display: flex;
width: 100vw;
height: 50px;
top: 5vh;
position: absolute;
}
.clicker {
position: relative;
margin: auto;
display: flex;
align-items: center;
height: 7.5vh;
background: none;
}
.clicker:hover {
cursor: pointer;
}
.text-container {
text-align: center;
height: 100%;
width: 120px;
}
.login-text {
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
white-space: nowrap;
font-weight: 100;
font-size: 2.6em;
color: black;
}
.cancel-text {
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
font-size: 2.6em;
color: black;
}
.login-container {
height: 100%;
width: 100%;
position: absolute;
}
.login-text-container {
position: absolute;
background: white;
overflow: hidden;
left: 0;
width: 0;
-webkit-transition: width .4s;
transition: width .4s;
}
.login-text-container.active {
width: 100%;
-webkit-transition: width .4s;
transition: width .4s;
}
.cancel-container {
height: 100%;
width: 100%;
position: absolute;
}
.cancel-text-container {
position: absolute;
overflow: hidden;
width: 100%;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="center-clicker">
<div class="clicker">
<div class="text-container">
<div class="cancel-container">
<div class="cancel-text-container">
<span class="cancel-text">cancel</span>
</div>
</div>
<div class="login-container">
<div class="login-text-container active">
<span class="login-text"> log in </span>
</div>
</div>
</div>
</div>
</div>
I just modified the right:0; value for the .cancel-text-container to right:-110px;, and the left:0; value for the .login-text-container.active to left:10px;
Is this what you want?:
Updated Fiddle
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
display: block;
background-color: red;
width: 100%;
margin: 0px;
padding 0px;
border: 0px;
}
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
What I'm trying to do is create a "header" that would start from the very left of the site to the very right, from the very top around 20px down.
But when I test the site, I see that there's this little space in top-left...
How do I get rid of it?
body,html {
margin:0px;
padding:0px;
}
You just need to reset the browser default margin style for body.
body {
margin: auto;
}
Have a look at your box-model through the "Computed" tab in your browser IDE/developer tool.
Add the following in your CSS
body{
margin:0;
}
remove body margin left side
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
display: block;
background-color: red;
width: 100%;
margin: 0px;
padding 0px;
border: 0px;
}
body{margin: 8px 0px; }
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
Either I have misunderstood your question or all of the other answers have done so. I always thought that margin: 0; fixed the problem and it does on some browsers but Safari and Chrome to name a few add that little border. The code you should use top: 0; left: 0; to align with the edge of the page.
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
position: fixed;
display: block;
background-color: red;
top: 0;
left: 0;
right: 0;/* since we are moving it left a little, we use right: 0; instead of width: 100%; */
margin: 0px;
padding: 0px;
border: 0px;
}
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
I'm having a problem that absolutely triggers my OCD to no end and it NEEDS to be fixed.
I'm trying to adjust the .post_author/.post_content divs to be the same height as their parent div, in this case .post
At the moment there is a big ugly space if the post isn't long enough which is as I've said, ugly.
Post that's long enough:
Div structure:
<div class="post classic">
<div class="post_author"></div>
<div class="post_content">
<div class="post_head></div>
<div class="post_body></div>
</div>
</div>
Relevant CSS:
.post {
overflow: hidden;
}
.post.classic {
padding-top: 0;
min-height: 380px;
}
.post .post_author {
padding: 5px;
overflow: hidden;
color: #a1a1a1;
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
}
.post.classic .post_author {
height: 100%;
width: 15%;
float: left;
padding: 15px 2% 15px 3%;
margin-top
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
border-radius: 0;
/*box-shadow: 1px 0 0 #000;*/
}
.post.classic .post_content {
float: right;
width: 78%;
}
.post_content {
min-height: 321px;
background-color: rgba(255,255,255,0.04);
padding: 9px 10px 5px 0;
box-shadow: inset 1px 0 0 #000;
}
For the life of me I can't figure out how to fix this. I've tried setting the display to table, flex, inline-block, dug up many other similar stackoverflow posts but nothing's worked so far.
Just going on this info, I can only give you limited advice. I assume you're not able to reproduce this into a demo on jsFiddle because the 2 pics look like there's a lot more HTML/CSS than what you've posted. Now that I've cleared that up, I'll just concentrate on making 2 divs fit into another div at max height.
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
.post_content, .post_author { min-height: 380px; height: 100vh; overflow: none; }
See my answer on this post, it seems to be similar.
Try setting min-height of post-content to be 100% of the viewport
min-height: 100vh
Hope this helps.
On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1