I have a div wrapped around a couple span's and using JS to make the span's fade in and out (for testimonials). Everything works, except I can't get the span text to center within the div. Here's the relevant code:
HTML -
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
And here's the slideshow CSS -
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
}
Can anyone tell me what I'm doing wrong? Oh and yes I've tried text-align:center; with no luck.
[Edit] I'd like to add I've also tried adding in !important with no change.
I tested your code and just added
.slideshow {
text-align: center;
}
and the text centered just fine.
Maybe you've got a typo, or a css definition somewhere else that overrides your text-align?
Edit
I did an "inspect-element" of the fiddle posted and here are the css definitions i got:
<div class="slideshow" style="position: relative; ">
<span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; z-index: 3; top: 0px; left: 0px; display: block; width: 13px; height: 15px; opacity: 0.275808; ">Hi</span>
<span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; top: 0px; left: 0px; display: block; width: 52px; height: 15px; z-index: 2; opacity: 0.724192; ">Goodbye</span>
</div>
element.style {
color: #333;
display: block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif;
font-size: 12px;
height: 15px;
left: 0px;
opacity: 1;
position: absolute;
top: 0px;
width: 52px;
z-index: 3;
}
I would say the "display: block" is your problem.
You need to apply text-align: center to the containing <div>, and not do anything that causes the <span>s to be rendered as a block (such as floating them). Absolute positioning would also pull elements out of normal flow so they wouldn't be influenced by text-align.
Update : Now a working example has been provided, we can see what is going on. The span elements are being absolutely positioned by the plugin:
$slides.css({position: 'absolute', top:0, left:0}).hide()
Looks like you will need to rethink the layout logic the plugin is using.
Related
I'm very new to coding and I'm trying to add some subheader text to a parallax image on my project. I created the parallax effect with SimpleParallax.js and put it, and an h2 subhead, inside of a div, but the text just sits underneath the photo. I implemented the solution outlined here
I added position: relative styling to the parallax class and the following code to the h2 text:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
But, the text still isn't positioned correctly. It moves the text all the way to the top of the page where the h1 text is.
I need help figuring out how to situate the h2 text inside of the parallax image, ideally center-left justified.
This is a snippet of the problem area:
<header>
<img src="https://cdn.glitch.me/7cebc84e-df9c-45e9-95c1-
516a7a17465b/Header.jpg?v=1675454184505" class="header-image" alt="A
rendered image of our funky trike" />
<h1 class="header-text">Join us for a Funk-Filled Ride as we
<br> Roll Out, Pop Up, and Get Down!</h1>
</header>
<div>
<img class="frame-2" src="https://cdn.glitch.global/7cebc84e-
df9c-45e9-95c1-516a7a17465b/Frame-2.jpg?v=1675454173228">
<h2 class="subhead-text">Roll Out: our portable party can go
wherever you go</h2>
</div>
<style>
.header-image {
width: 100%;
}
.header-text {
color: #f3f3f3;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 7vh;
font-weight: bold;
font-style: italic;
background-color: #f41230bd;
width: 85%;
padding: 5px;
}
.subhead-text {
color: #f3f3f3;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
font-style: italic;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.frame-2 {
position: relative;
} </style>
The whole project is available on Code Pen.
Thanks for any help!
I need to position the number "01 / 04" like this image
So far I got this
Code structure is like this in vue js, so far:
<img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
<div class="product-images-popup-number">
<span class="product-images-popup-child_num">0{{current+1}}</span>
<span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
</div>
<div class="product-images-popup-pagination">pagination</div>
</div>
css so far:
.product-images-popup-bar {
position: absolute;
left: 5vw;
}
.product-images-popup-number {
display: flex;
align-items: flex-start;
}
.product-images-popup-child_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 7vw;
}
.product-images-popup-parent_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 15px;
font-size: 4vw;
padding: 1px 0 0 4px;
}
.product-images-popup-parent_num:before {
content: '/';
padding-right: 5px;
}
.product-images-popup-pagination {
}
The goal is moving the numbers + pagination up a bit in different device size.
I am thinking to get "product-images-popup-bar" coordinate, then subtract some values, then position it. Not sure how to get the coordinate though.
Just give the elements you want moved up slightly a position of relative and then top minus the amount you want
for example
.product-images-popup-number {
display: flex;
align-items: flex-start;
position: relative;
top: -5px;
}
and then obviously use media queries to adjust it as you please
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
Website is get2gethersports.com
On the make page you see [content] [instagram] [blog]
I have a box shadow around instagram and blog.
I want that box shadow to stretch to the bottom of the content area.
I tried
#undrl {
height:100%;
}
but it did nothing.
any ideas?
UPDATE code for this custom html module is
<div class="span6">
<p style="text-align: center;"><strong style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal;"><span style="font-size: medium; font-style: italic;">Join. Create. Compete. </span></strong></p>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;"> </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">get2gether|sports is the perfect way to organize a pick-up game of any sport. You can find a game to join, or create your own! Feel free to shoot us an email with any questions you have! </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;"> </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">Subscribe below to stay in-touch with up-coming games! <br /><br /></div>
{loadposition login-join} {loadposition logout-home}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition instagramfeed}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition blogfeed}</div>
</div>
since your columns, [content] [instagram] [blog], are floating left, they will only take up as much space as needed. To fix this:
.item-page {
display: table;
height: 280px;
}
.item-page > div {
float: none;
display: table-cell;
margin-left: 20px;
vertical-align: middle; // or padding-top % if you don't want to declare a height on the table
}
.item-page > div:first-child
{
margin-left: 0;
}
Here's a better solution not using table-cells (wrap these items in a div and set the height to 280px if multiple rows):
.item-page
{
height: 280px;
}
#undrl {
text-align: center;
display: inline-block;
float: none;
margin-left: 20px;
height: 100%;
vertical-align: top;
width: 23%;
}
.item-page .span6
{
float: none;
display: inline-block;
}
This doesn't work because the Instagram and Blog portions are have float: left;, which breaks the flow of the document. If backwards compatibility isn't the biggest issue, I recommend using a flex-box, as this will allow you to control the size of the elements and the position of their content. This technique is supported by nearly 90% of browsers (source).
If you can't use flex-boxes, try setting all of the elements to a predefined height, that way the box shadow will extend to the height you want it to extend.
If that's also not an option (e.g. you need the elements to have a variable height), then you might benefit from using display: table; and display: table-cell;. These CSS declarations will allow the most backwards compatibility but they aren't a favorite of mine because they're slightly antiquated. It would work something like this:
.container {
display: table;
}
.child {
display: table-cell;
}
That should be a good starting point for the result you desire.
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.