I could really use some css help. Is it possible to swap the order of 2 words using css, WITHOUT using :after? (ex "Hello World" should become "World Hello")
The specific reason I cannot use :after which does in fact work, is that the div snapshot utility html2canvas.js does not take :before or :after into account, hence the workaround.
any help is very much appreciated.
Niko
You can stack the sentences with CSS z-index and using keyframes to make an effect of swapping. (see code-snippet).
After that you need to decide how/when to call for the change, through buttonclick or time. For calling you probably need some javascript.
If your are looking for a solution that really replaces the text in the HTML div, then you need solve that through javascript.
.div-1 {
position: absolute;
z-index: 1;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: white;
width: 100px;
height: 20px;
margin: 0px 0px 0px 20px;
animation-name: swap;
animation-duration: 5s;
animation-delay: 0;
}
#keyframes swap {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="div-1">Hello World</div>
<div class="div-2">World Hello</div>
</div>
</div>
</body>
</html>
Related
I am trying to have a responsive web design, but when I shrink my browser size, button is overlapping my text parts, does anyone know how to fix this? 1st picture is for normal screen size, 2nd picture is for shrunk screen size. I'd like to show like 1st picture even for shrunk screen size.
HTML code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="button">
<button onclick="getQuote()">Give me a quote!</button>
</div>
<div id="para">
<p id="quote"></p>
<p id="quoteauthor">test</p>
</div>
<script src="script.js"></script>
</body>
</html>
And CSS file code is
body{
background:rgb(68, 142, 226);
}
#para {
margin-top: 30%;
}
p {
text-align: center;
color:white;
}
button{
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
/*CSS center element trick*/
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:
translate(-50%, -50%);
transform:
translate(-50%, -50%);
-webkit-transition-property:
all;
-webkit-transition-duration:
1s;
-webkit-transition-timing-function:
ease-out;
transition-property:
all;
transition-duration:
1s;
transition-timing-function:
ease-out;
}
button:hover{
background:green;
color:white;
font-size:34px;
/*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
}
You are positioning your button absolutely, which takes it out of the elements flow. You just need to use some layout technique: for example, flex or grid. See the example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote API</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: rgb(68, 142, 226);
}
.vbox {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: white;
padding-block: 15%;
}
button {
background:white;
border: 4px solid white;
border-radius:1em;
font-size:24px;
padding:1em 3em;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-out;
}
button:hover {
background: green;
color: white;
font-size: 34px;
}
</style>
</head>
<body>
<div class="vbox">
<button onclick="getQuote()">Give me a quote!</button>
<span id="quote">Your favorite quote from your favorite author.</span>
<span id="quoteauthor">Your favorite author</span>
</div>
<script src="script.js"></script>
</body>
</html>
When I add a border to a div, the content inside doesn't have 100% width and height anymore.
I already added padding: 0; and margin: 0; as well as box-sizing: border-box; but the background still shows up at some zoom levels.
Is this a browser bug? On Firefox the red background never shows up (but Firefox has different zoom levels, too).
red background
#outside {
box-sizing: border-box;
background: red;
border: 1px solid #808080;
border-radius: 12px;
height: 500px;
overflow: hidden;
padding: 0;
margin: 0;
}
#content {
background: green;
height: 100%;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="outside">
<div id="content">
</div>
</div>
</body>
</html>
In browers there is some inner css
You can write in your css file
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
this style will be appliced for all document, not only for div id="outside".
I use also this file to apply the default code : Normalise.css
I am trying to position a div in the center of a grid header but many of my attempts have failed.
Here's link to code pen: https://codepen.io/ZeePintor/pen/OKxLRe
Here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ermesinde Clube de Karaté</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Work+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="brand">
<img src="/images/eck_logo.png">
<div class="page-headers">
<h1>ECK</h1>
<h3>ERMESINDE CLUBE KARATE</h3>
</div>
</div>
</div>
<div class="section1">Section1</div>
<div class="section2">Section2</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
And here is the css:
.wrapper{
display:grid;
width:100%;
background-color:#e3e3e3;
grid-template-rows:
[grid-start hd-start] 100vh
[hd-end sc1-start] 100vh
[sc1-end sc2-start] 100vh
[sc2-end ft-start] 125px
[ft-end grid-end];
grid-template-columns: 100%;
}
div div:hover{
border:1px solid black;
}
/*
HEADER
*/
.header{
grid-row:hd;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../images/black_belt_stock_photo.jpg);
}
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
}
.brand img{
border: 2px rgb(109, 12, 12) solid;
border-radius: 50%;
}
.brand h1{
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}
.brand h3{
color:white;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.section1{
grid-row:sc1;
}
.section2{
grid-row:sc2;
}
.footer{
grid-row:ft;
}
This is supposed to be the big header of the page to when people open the page, animations might be added to the headers and image, but first I would like to center vertically while aligning the element to the far right.
I have tried to move around in the css with somethings like:
- position:absolute;
- vertically-align:center;
- justify-content:right; align-content:center;
But none of these worked for me, so please could someone help me?
Thank you.
This might work for you:
.brand{
grid-row: brand;
display:flex;
justify-content:flex-end;
position: absolute;
right: 2rem;
top: 50%;
margin-top: -160px; /* 1/2 image height */
}
Basically i am trying to create a side panel placed on the right that works in both ie11 and chrome when hovering on top of it, it opens and when coming out it closes.So this is the code works well in chrome but not in ie11. In ie11 it spreads through the bottom half of the view i would like it to cover part of the middle and to be perfectly positioned in the middle. Any help would be much appreciated. I figured out that the problem is in the css transform:translateY tried -ms-transform -webkit-transform nothing is working. .Here is the code:
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
<script>
$(function () {
//Function to show side panel on hover
var $pCont = $("#panel-content");
$pCont.width(0);
$('#panel').mouseenter(function(){
$pCont.stop().animate({width: 27}, 200);
});
//Animation for closing the sidepanel when mouseleave
$('#panel').mouseleave(function(){
$("#panel-collapse").hide("slide", { direction: "right" }, 300,function(){
$pCont.stop().animate({width: 0}, 200);
});
});
});
</script>
<style>
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
position: fixed;
right: 0;
background: black;
height:100%;
}
</style>
It happens cause you put position: fixed in #panel-content so in the ie11 the page is going to be his parent, height: 100% would be the height of the page not the #panel's height
You don't need to use javascript to do this hover, you can do that with this code
here is a fiddle
HTML
<html>
<head><title>Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<body>
<div id="panel">
<div id="panel-content">
</div>
</div>
</body>
</html>
CSS
body
{
overflow-x: hidden;
}
#panel
{
position: fixed;
right: 0;
height:180px;
width:27px;
margin-top: 50vh;
transform: translateY(-50%);
}
#panel-content
{
border-radius: 10px 0px 0px 10px;
left: 100%;
position: absolute;
background: black;
height:100%;
width: 100%
transition: .2s;
}
#panel:hover #panel-content{
left: 0;
}
I have a certain problem and searched through a lot of questions to find a solution but I just can not seem to fix it. The problem is as following:
There is the main "wrapper" div on the page (for centering reasons), and inside this is some text, images and a number of includes (footer, header etc.). The images are using "position: absolute" and using the CSS "top" and "left" property to offset them. However, Firefox and Internet Explorer 7 seem to start their offset from a different point, meaning the most of the images are just about 10px lower and 10px more to the right in IE7
What I've done to make sure;
- validated my html with the W3C validator (fixed everything)
- tried to replace position:absolute; with some position:relative;
- The position of the wrapper has been set as position:relative;
- would rather not want to work with a a specific stylesheet just for IE7 (so didn't try that)
- PS: used meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" to let my IE8 browser shows my project like it was in IE7
I'm really hoping you could help me out! Thanks in advance and hereby i'm giving the corresponding HTML and CSS
HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>
Document Title
</title>
<link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>
</head>
<body>
<div id="bg"></div>
<div id="wrapper">
<div>
<!--#include virtual="includes/mainmenu/mainmenu.html" -->
</div>
<div>
<!--#include virtual="includes/header_main/header_main.html" -->
</div>
<div id="about_us" class="about_us">
<p>Some text.</p></div>
<span class="displace"></span>
<div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
<img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>
<div>
<!--#include virtual="includes/footer_main/footer_main.html" -->
</div>
</div>
</body>
</html>
CSS:
#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}
#bg {
width: 100%;
height: 614px;
position: absolute;
top: 93px;
left: 0;
background-image: url(images/stripe.png);
background-repeat: repeat-x repeat-y;
background-attachment: scroll;
}
body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}
.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}
a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}
a.rollover:hover {
background-position: 775px 0;
}
.displace {
position: absolute;
left:287px;
top:-205px;
}
Thanks in advance again for anyone who could help me out!
the style.css file from the html5boilerplate will make all browsers have the same 'default' settings.. adding this css file to your site (as the first one to be loaded), might fix the issue.
http://html5boilerplate.com/