I am having the hardest time here...I have searched for a while now and can't quite figure out how to properly get my text to properly re-size in my parent container.
Here is the code:
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
font-size: 100%;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
.heart_button:hover,
.heart_button:active,
.heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 50px auto;
position: relative;
max-width: 90%;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
max-width: 90%;
word-wrap: break-word;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 3.7em;
font-family: Montserrat;
font-weight: 700;
line-height: 1.3;
text-align: left;
width: 100%;
word-wrap: break-word;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
nav {
position: absolute;
left: 35px;
bottom: 28px;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
#media screen and (max-width: 649px) {
.box {
width: 450px;
height: 350px;
max-width: 90%;
}
h1 {
font-size: 2em;
word-wrap: break-word;
}
.text_container {
width: 280px;
height: 236.6px;
max-width: 90%;
}
}
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
<nav>
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
</nav>
</div>
</body>
So again, my thought was that I could have the .box class be a parent container and then the .text_container that would be nested could 're-size the text in a responsive manner in smaller viewports. But it's not...and my hair is going grey.
Errggghhhh...
child with the position absolute can't change the size or its parent or vice versa. Alternatively you can use the float property and set it to "right". Also, you might want to use % instead of pixels if you're aiming for a responsive design.
I guess what you need is http://freqdec.github.io/slabText/
font-size cannot do resize accroding to the windows's width, unless you define different font-size accroding to the width with Media Queries
Related
I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I'm trying to emulate this behavior using CSS:
And this is what I have to this moment:
.contenedor{
height: 30px;
margin-bottom: 10px;
}
.lineaRoja{
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
}
.centreado{
font-size: 30px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
How can I get that CSS behavior?
I would cut the upper and lower part via clip-path. No need to use extra elements or pseudoelements
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
clip-path: polygon(20% 33%, 20% 70%, 80% 70%, 80% 33%);
}
<h2>STREAMING</h2>
Here is another idea where you can consider line-height
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
line-height:0.45;
/*overflow:hidden; uncomment this if you want to hide the overflow */
}
<h2>STREAMING</h2>
Another one where you can adjust the background:
h2 {
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
background:
linear-gradient(#f16c73,#f16c73) center
/100% 45% /* Adjust this value */
no-repeat;
}
<h2>STREAMING</h2>
I wouldn't use opacity, but simply white text and white background. The text can be vertically positioned by using postion: relative and a bottom setting to offset it to the optimal position.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
height: 24px;
border-radius: 5px;
text-align: center;
}
.centreado {
font-family: sans-serif;
font-style: oblique;
font-size: 50px;
color: white;
position: relative;
bottom: 8px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">STREAMING</h2>
</div>
</div>
Another solution is to move the text via transform property of CSS.
.contenedor {
height: 30px;
}
.lineaRoja {
background-color: rgba(255, 0 ,0, 0.5);
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
.centreado {
font-size: 70px;
line-height: 70px;
color: white;
margin: 0;
padding: 0;
transform: translateY(-40%);
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
Change the text colour to transparent and set the font style to italic.
.centreado{
font-size: 60px;
color: transparent;
font-style: italic;
}
Move the div downwards.
.contenedor{
height: 30px;
margin-bottom: 10px;
transform: translateY(20px); /*Change this value according to your need */
}
html:
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
css:
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
position: relative;
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
}
.centreado {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 38px;
text-transform: uppercase;
font-style: italic;
margin: 0
}
JSfiddle: https://jsfiddle.net/hansfelix50/q0zxh9ku/
The secret here is overflow: hidden; on your red line, anything overflowing it gets cut off.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
position: relative;
overflow: hidden;
}
.centreado {
font-size: 55px;
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
color: #fff;
text-transform: uppercase;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
You can do this easily with css flexbox.
Steps:
Remove the opacity: 0.5; and text-align: center; from .lineaRoja
Add background-color: #f36167; to .lineaRoja
Add display: flex; align-items: center; justify content: center; to .lineaRoja
Style the h1 as necessary; I've used: letter-spacing: 2px; font-size: 55px; font-family: arial; font-style: italic; color: white;
Here is a simple example using:
body {
background-color: grey;
padding-top: 50px;
}
.lineaRoja {
background-color: #f36167;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.centreado {
letter-spacing: 2px;
font-size: 55px;
font-family: arial;
font-style: italic;
color: white;
}
<div class="lineaRoja">
<h1 class="centreado">STREAMING</h1>
</div>
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
I'm struggling with a CSS issue and I was hoping for some help.
Here's the story:
I'm designing a header. It's split in two divs. First one must be 70% wide and second one 30% wide. I used the css-property "Display: table-cell" in order to place them side by side.
div.chapo {
width: 70%;
display: table-cell;
}
div.img_header {
width: 30%;
display: table-cell;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(...);
}
It's working fine when the text placed in the first div is long enough:
Buuuut... when text is short, it's all messy:
I can't figure out why my widths values aren't kept in this specific case.
Thanks in advance for all who would be kind enough to help me...
Here's the fiddle link: https://jsfiddle.net/vinny38/verucw8p/3/
I wrapped both div ce_text chapo and img_header to .test-wrap class and give it to below css:
.test-wrap {
display: table;
width: 100%;
}
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
.test-wrap {
display: table;
width: 100%;
}
<div class="inside">
<div class="test-wrap">
<div class="ce_text chapo">
<h1>My header</h1>
<div class='text-chapo'>
<p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
<div class="img_header"></div>
</div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
This CSS it's ok... the 'float:left' option and relative width are different.
Here, I disccount the paddings left and right of total width. The float is necessary to horizontal align.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-image: none;
width: 50%;
height: 255px;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 10%;
position: relative;
float: left;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
height: 295px;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 2%;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
float:left;
width:90%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
Try like this:
You have to define float property as well as you must define height:255px (as for another div you have given height as 255px )for your img_header class. It's really necessary.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
box-sizing: border-box
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
float:left;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
.clearfix {
clear:both;
}
.img_header {
width: 30%;
height: 255px;
float: right;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
<div class="inside">
<div class="ce_text chapo">
<div class='text-chapo'>
<h1>My header</h1>
<p>Lorem </p>
<p>Aliquam porttitor.</p>
</div>
</div>
<div class="img_header"></div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.