I'm trying to create a responsive design logo, using 2 strings, both slightly transparent. The strings are in different sizes, with the second on top of the first.
I've nearly got what I want (try the HTML below) however I would like the right hand edge of the 2 strings to align - The Div extends to the width of the browser and the overlap changes with the width of the display.
Because I want to give the browser some choices over how it's rendered I would rather not use measurements in pixels.
If it is at all relevant - I plan to add additional elements either side of the Div.
<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
position: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 800%;
text-align:center;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
top: 0;
left: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 600%;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<div style="position:relative">
<span class="outerText">OuterTxt</span>
<span class="innerText">InnerTxt</span>
</div>
<hr />
...nearly right - but the rt edges are not (necessarily) aligned
</body>
</html>
Update: jsfiddle here
You had a typo in your CSS ('postition' instead of 'position'), which was probably confusing things. Also, I think you want to remove the "float: right" once that typo is fixed.
This seems to be what (I think) you wanted:
div { /* make the selector more specific */
height: 150px; /* or whatever's suitable */
}
.outerText {
position: absolute;
bottom: 0;
right: 0;
}
.innerText {
position: absolute;
bottom: 7px; /* adjust as desired to compensate for smaller font size */
right: 0;
}
http://jsfiddle.net/nNMwb/2/
Have a look at Viewport Sized Typography
Experiment with the vw unit, I've found that in your example 28.5vw gives what seems to be the desired result.
.outerText {
position: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 28.5vw;
text-align:center;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
top: 0;
left: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 28.5vw;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
example
Embedding the Div in a table cell appears to give me the result I'm looking for - the inner and outer texts are both aligned on the right margin, share the same baseline and don't move relative to each other as the page is resized:
<!DOCTYPE html>
<html>
<head>
<style>
.outerText {
postition: relative;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 800%;
text-align: right;
letter-spacing: -0.1em;
color: red;
opacity: 0.2;
right: 0;
bottom: 0;
}
.innerText {
position: absolute;
font-family: Arial,sans-serif;
font-weight: 900;
font-size: 600%;
text-align:right;
letter-spacing: -0.1em;
float: right;
color: blue;
opacity: 0.2;
z-index: 1;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
and the result is....<br />
<table>
<tr>
<td>left</td>
<td>
<div style="position:relative">
<span class="outerText">OuterTxt</span>
<span class="innerText">InnerTxt</span>
</div>
</td>
<td>right</td>
</tr>
</table>
<hr />
...yeah!
</body>
</html>
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>
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
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.