The CSS for the popup text (French) is:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
/* border-radius: 6px; */
padding: .5px 0;
position: absolute;
z-index: 1;
bottom: -67%;
left: -271%;
margin-left: -80px;
}
My task is to shift the popup text little bit towards the bottom which
is little upwards as shown in the image.
I tried changing the position of a popup text by using the text-align property but unfortunately I am unable to move towards the bottom.
text-align: center;
text-align: left;
text-align: right;
The CSS for the image(as shown above) before the popup text is:
.label-mobile-languageselector .popuptext:before {
content:url('img/globe.png');
display:inline-block;
float:left;
width: 30px; /* whatever width you need */
height: 29px; /* whatever height you need */
margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */
}
Here is the fiddle ( At this moment the popup not working not sure why )
Excerpt from my Fiddle:
.label-mobile-languageselector .popuptext {
visibility: hidden;
width: 360px;
background-color: #668A04 !important;
color: #fff;
text-align: left;
padding: 15px 0 0;
/* Added padding, adjust to your needs */
position: absolute;
z-index: 1;
/*height: 29px !important;*/
/* height removed */
/*bottom: -67%;*/
/* bottom removed */
left: -271%;
top: 48px;
/* top added */
margin-left: -80px;
}
.label-mobile-languageselector .popuptext::after {
content: "";
position: absolute;
top: -16px;
/* top changed to the arrow height */
left: 58.2%;
margin-left: -5px;
border-width: 8px;
border-style: solid;
border-color: #668A04 transparent transparent transparent;
transform: rotateX(180deg);
}
Related
Here is the CSS code for my webpage, I want to resize this page according to screen size and resolution.
Different div classes are made to style the div containers.
column1 is fixed div at left and column2 is scrollable div which contain further divs that needs to be resized according to the screen size.
<style>
* {
box-sizing: border-box;
}
.column1 {
float: left;
width: 22%;
padding: 10px;
height: auto;
margin: auto;
text-align: center;
line-height: 20pt;
color: #e6b122;
position: fixed;
}
.photo {
margin: auto;
height: 90px;
width: auto;
overflow: hidden;
}
.column2 {
float: right;
width: 78%;
padding: 10px;
height: auto;
}
.photo img {
margin: auto;
max-height: 100%;
width: 80px;
overflow: hidden;
border-radius: 50%;
}
.image {
height: 400px;
max-width: 100%;
background-color: white;
overflow: hidden;
}
.image img {
margin: auto;
width: 700px;
max-height: 100%;
background-color: white;
overflow: hidden;
}
.Skill {
margin: auto;
text-align: center;
line-height: 20pt;
float: left;
width: 33.33%;
padding: 10px;
height: 330px;
border: 4px solid #F281F0;
border-radius: 35px;
}
h4 {
color: #C39D19;
}
p {
font-size: 12px;
font-family: cursive;
}
a {
text-decoration: none;
color: #000;
font-family: Garamond;
font-size: 14px;
}
a:hover {
color: #cc00cc
}
/* Container around content */
.container {
padding: 5px 5px;
position: relative;
background-color: inherit;
width: 50%;
border: 4px solid #CEF334;
border-radius: 25px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -18px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
#media screen and (max-width: 600px) {
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Arrows*/
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/*For circles*/
.left::after, .right::after {
left: 16px;
}
/* Left containers position */
.right {
left: 0%;
}
</style>
I learned how to layout my webpage by understanding the following CSS Layout tools.
Flexbox
CSS Grid
Media Queries
You use Flexbox and CSS Grid to layout your content, while Media Queries can help your website be responsive to different media(Phone, Tablets, Desktop etc...) sizes.
Goodluck!
Basically, there are two good solutions for your issue:
Use the Media Queries, and set the proper config for your content depends on the viewport of the browser. I can see in the code, that you already use it, so you know how to deal with it.
the second option is to use a flexbox display, which will adjust content size depend on the page width. Here you have probably the best explanation on how to use flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would like to integrate the W3-Tooltip in my project. It works fine on normal screens, but fails on mobile phones. The example is here: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_left
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
When making the screen smaller, the tooltip will stay where it is and a scroll bar will appear.
I would like to have a css-solution, where the tooltip will be positioned differently on small screens. My idea is to have
left and width: relative to screen
top: relative to parent object (the underlined keyword)
Then the tooltip could fill the screen from left to right border but stay under the keyword.
Does anyone have an idea how to solve this positioning issue? I would prefer a solution without javascript, but if it is not possible without, then it would also be OK.
Use a media query to position the tooltip differently on a smaller screen:
#media only screen and (max-width: 600px) { /* adjust max-width for the screen-size you want */
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
margin-top: 10px; /* adjust this if needed */
}
.tooltip .tooltiptext::after {
top: 0%;
left: 50%;
margin-top: -9px;
margin-left: -5px;
border-width: 5px;
border-color: transparent transparent black transparent;
}
}
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I am trying to achieve something as close to the image below as possible.
I currently get the following with the code below and can't seem to quite get it to do what I need.
Current Styling:
My CSS:
hr:after {
background: url('../img/green_leaf.png') no-repeat top center;
content: "";
display: block;
height: 18px; /* height of the ornament */
position: relative;
top: -9px; /* half the height of the ornament */
border: 0;
color: #d7d7d7;
}
I Would like to thicken the line, and if possible, add space around the image (without making the green_leaf.png have a white bg).
How about setting the image in the hr element, and using :before and :after to create the lines? That way you won't have to set a background on the image to cover up a single line.
Working Example:
hr {
background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
background-size: contain;
display: block;
height: 18px;
border: 0;
position: relative;
}
hr:before,
hr:after {
content: '';
display: block;
position: absolute;
background: #d7d7d7;
height: 2px;
top: 8px;
}
hr:before {
left: 0;
right: 50%;
margin-right: 10px;
}
hr:after {
right: 0;
left: 50%;
margin-left: 10px;
}
<hr />
You can find the answer in this post Custom <hr> with image/character in the center
I modified it and I got this:
hr {
no-repeat top center;
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
}
hr:after {
content: ""; /* section sign */
background: url('smiley.gif') no-repeat top center;
display: inline; /* for vertical centering and background knockout */
background-color: white; /* same as background color */
padding: 0 2em; /* size of background color knockout */
}
Pay attention to padding: 0 2em; and background-color: white;.
If you set it up like this, and specify background color on the image to match whatever you have in the background of the page (probably white) it will look good:
HTML
<div class='hr'>
<hr>
<img src='../img/green_leaf.png' alt=''>
</div>
CSS
hr {
border:none;
border: 1px solid #d7d7d7;
}
.hr {
text-align: center;
}
.hr img {
position: relative;
top: -18px;
background:white;
padding:0 5px;
}
Result:
Fiddle
I am having a problem with my website. I created a button that will open a chat. But this button don't stay in the right place in all browser and screen monitors. Due to the browser zoom, the button do not stay like I want.
This is my page: http://www.assembleia.org.br/site/webtv/
The CHAT button needs to be right after the box, like this photo: http://imageshack.us/photo/my-images/20/cssfix.jpg/
But in others browsers, the button goes to right and right.
Here's my css:
<style>
* { /* trying to RESET CSS */
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
#tab /* the button CHAT */{
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 27%;
/*float: left;*/
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
#panel /* the panel */ {
min-height: 367px;
position:absolute;
left: 1355px;
top: 171px;
background-color: #D4D4D4;
max-height: 367px;
min-width: 0; /*new line*/
}
#panel .content /* for the chat */ {
min-width: 100px;
text-align: center;
/*margin-right:300px;*/
margin-right: auto;
max-width: 100px;
}
#close /* for the little red X after opening the chat */ {
position: absolute;
left: 1758px;
top: 168px;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
text-decoration: none;
}
#share /* for facebook sharing after opening the chat */ {
position: absolute;
left: 1656px;
top: 540px;
font-size: 10px;
font-family: Verdana,sans-serif;
}
</style>
Thx..
use this
#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
Use position: relative; attribute on your parent wrapper div, then change #tab CSS as follows:
Add position: absolute;
Change top to top: 50%;
Change right to right: 25px;
This was tested using Firebug and should give the desired effect.