I have a dynamic element which will be capable of scaling in size, its position could be placed anywhere on the screen. I'm basically trying to create an "elbow" section.
What this "elbow" needs is an extension arm at the top right... Funny thing is, while I have the position and size correct, for some reason, the pseudo element is not showing up in the grey I'm calling... (see attached image showing Element Inspector highlighting the element in the correct size and position, but not in the same grey)...
I have a JSFiddle here of the code: https://jsfiddle.net/eliseo_d/6p9z8xr3/
HTML:
<div class="elbow-1-toprt-wide0-grey1">elbow 1</div>
CSS:
html {
background-color: rgb(0,0,0);
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 14px;
margin-bottom: 4px;
margin-right: 4px;
overflow: hidden;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
text-align: right;
text-transform: uppercase;
width: 84px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
/* Initial curve */
div[class^='elbow-'][class*='-toprt-'] {
border-top-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-toprt-']:after {
content: '';
height: 30px;
left: 104px;
top: 0;
position: absolute;
}
div[class^='elbow-'][class*='-wide0-']:after {
width: 21px;
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey0']:after {
background-color: rgb(51,51,51);
}
div[class^='elbow-'][class*='-wide0-'][class$='-grey1']:after {
background-color: rgb(102,102,102);
}
I can't seem to figure out what I'm missing?
Anyone know what I'm missing? Thanks in advance.
The ::after element is being shown with the background, your problem is that div[class^='elbow-'] is set to overflow:hidden;, which is hiding the pseudo element.
Simply remove overflow:hidden;
JSFiddle Demo
Related
I'm trying to turn a hyperlink into an icon while turning the content text into a tooltip. The catch is I'm working in a place where I have only CSS to play with, and I can't modify the HTML or add any Javascript. I'm retrieving data from an external source in a table, and one of the columns is a hyperlink - this I want to transform into an icon with the text-content as a tooltip manner on hover.
Below snipped is how far I've gotten, is there any way of making the :hover part look, feel and behave more like a tooltip? Or is there perhaps another way completely to achieve what I'm after?
.external-link {
font-size: 0;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
}
Stack Overflow
It's a bit tricky, but it's achievable with modifying before and after pseudo-elements. You just have to write tooltip content in your content property, otherwise, you should modify your HMTL itself.
So your final code should be something like this:
.external-link {
font-size: 0;
}
.external-link::before {
content: 'Stack Overflow';
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
left: 40px;
z-index: 1;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.external-link::after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:hover.external-link::before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
font-size: initial;
visibility: visible;
opacity: 1;
}
Stack Overflow
You can just edit your css like below. Just some idea. Not sure if you can write the tooltip text into css
.external-link {
font-size: 0;
position: relative;
}
.external-link:after {
content: ' ';
background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
display: inline-block;
height: 32px;
width: 32px;
}
.external-link:before {
content: 'Text';
position: absolute;
display: inline-block;
height: auto;
padding: 2px 5px;
width: 100%;
display:none;
color: white;
font-size:initial;
background: #00000099;
bottom: -15px;
}
.external-link:hover:before {
/* Well it shows the text, but it ain't pretty nor very functional.. */
display:block;
}
Stack Overflow
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
#border {
position: static;
z-index: 1;
width: 120px;
height: 120px;
margin-left: 92% ;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
margin-left: 93%;
z-index: 2;
color: white;
font-weight: bold;
}
<div id="border"></div>
<div id="text">Users online</div>
I can't post the image here, cuz I have less than 10 reputation, so try to imagine it please. I want to place it's "Users online" inside the border, how should I do this? Thanks.
I'm assuming you are trying to have an element with a semitransparent background.
Since you are using the opacity property on the element with an id of border.
The problem here is that z-index will not have any effect, if the position is set to static, which is the default value for div elements.
The other thing is, that you should be using a relative positioned parent to make your life easier and have more control over the elements since positioned elements will leave the normal document flow and result in new stacking order.
Here you can find good information on the the z-index property, stacking and the document flow.
This is one solution to your problem.
body {
background:black;
}
.holder {
position:relative;
}
#border {
position: absolute;
z-index:1;
right:0;
width: 120px;
height: 120px;
padding: 15px;
border-radius: 11px;
background: white;
opacity: 0.2;
}
#text {
position: absolute;
z-index:2;
right:0;
width: 120px;
height: 120px;
padding: 15px;
text-align: center;
color: white;
font-weight: bold;
}
<div class="holder">
<div id="border"></div>
<div id="text">Users online</div>
</div>
But i would actually try to solve this with a different approach, because i find the above solution a bit to complex and it involves to much positioning, so if all you need is a semitransparent background just make use of the background property with an rgba value. Here is an example.
.user-panel {
float:right;
height: 120px;
width: 120px;
padding: 15px;
border-radius: 11px;
/* fallback for browser that do not support rgba */
background: #ccc;
/* semitransparent background */
background: rgba(0, 0, 0, .2);
text-align: center;
color: white;
}
/* clear the float using the pseudo after element */
user-panel:after {
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
<header>
<div class="user-panel">Users online</div>
</header>
Hope that helps.
Change
position: static;
to
position: absolute;
for #border. That way, border will be "removed from the flow" (i.e. other elements will ignore it). You may need to adjust the margin-left property for #text so it properly aligns.
Fiddle: https://jsfiddle.net/xzdmLt33/1/
I'm writing a small website to learn HTML and CSS and I'm having trouble getting my content to scroll in any direction.
When the browser window is resized to the point where any of the content cannot fit, instead of allowing a scroll, it just disappears. The Login button's div is supposed to appear 950px from the left. Meaning that if the browser window is smaller then that, it will allow you to scroll over, right?
And the News box will display any content written until it reaches the bottom of the browser window. Then it won't scroll or display.
Any suggestions?
The HTML is here is here and the CSS is here.
Your CSS has many position:fixed attributes in it. When an object's position is set to fixed, it will stay stationary, even if you are scrolling. Therefore, there was nothing that can move, so you couldn't scroll. Try changing your CSS to the following:
body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }
#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}
#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}
#boxes {
margin-top: 100px;
margin-left: 100px;
}
#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}
This will keep everything in the same position as it was, except the page can now scroll when the browser is resized to a point that it cannot display all its contents.
I have IE6.
[EDIT: you can see the template live here: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]
I have a template, with 3 <a></a> that change the position of their background to create a button effect.
This is how it looks in any browser
This is it with IE6:
This the CSS code:
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
#featured-nav a {
height: 35px;
float: left;
cursor: pointer;
display: block;
padding: 47px 20px 20px 120px;
font-size: 12px;
line-height: 16px;
text-decoration: none;
font-weight: normal;
color: #777;
}
#featured-nav a span {
margin-top: 10px;
height: 30px;
width: 150px;
font-size: 12px;
text-transform: uppercase;
color: #5aa0b1;
font-weight: bold;
position: absolute;
top: 12px;
left: 120px;
}
#featured-nav a img {
position: absolute;
left: 40px;
top: 23px;
}
#featured-nav a.left {
background: url(/images/site/leftbutton.png) top left no-repeat;
width: 178px;
overflow: hidden;
position: relative;
}
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; }
#featured-nav a.middle {
background: url(/images/site/middlebutton.png) top left no-repeat;
width: 174px;
overflow: hidden;
position: relative;
}
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; }
#featured-nav a.right {
background: url(/images/site/rightbutton.png) top left no-repeat;
width: 172px;
overflow: hidden;
position: relative;
}
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; }
.content-wrapper {
width: 678px;
overflow: hidden;
margin-top: 10px;
margin-left: 8px;
}
Any idea?
Thank you.
IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the
#featured-nav {
width: 944px;
height: 131px;
background: url(/images/site/shadow.gif) bottom center no-repeat;
}
as the last rule in the CSS so IE 6 picks it up last ..
you are bound to face similar problems elsewhere though ..
To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...
[EDIT] it does not apply to your case .. scrap my suggestion ..
as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide...
[EDIT 2] here is some code for the specific template you mentioned in your comment
They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.activeSlide').removeClass('activeSlide');
$('#featured-nav ul li#' + slide).addClass('activeSlide');
}
now if you change it to
function onBefore(){
var slide = $(this).attr('id');
$('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide');
$('#featured-nav ul li#' + slide).addClass(slide+'activeSlide');
}
it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide
You might want to add display:inline to the floated elements. This doesn't affect other browsers, but prevents IE from doubling margins on the element.
I believe the IE6 has issues with background-positioning certain PNGs. Just as a test, you ought to try replacing the image with a JPG or non-transparent PNG.