Still learning to work with spans did some debug in the console browser and they are currently not getting the dimensions I gave them in my CSS class. I am just wondering what am I missing so they get the width and height I gave them. Thank you
HTML CODE
<div id="content">
<div class="forum-group">
<h2 class="header-2">General Discussion</h2>
<ul class="child-forums">
<li class="child-forum">
<a class="forum-link" href="#">
<span class="forum-icon"></span>
<span class="forum-details">
<span class="forum-title"></span>
<span class="forum-desc"></span>
</span>
</a>
CSS CODE
.forum-group{
width:948px;
height:259px;
margin-left:auto;
margin-right:auto;
}
.header-2{
width:948px;
height:35px;
}
.child-forum{
width:310px;
height:106px;
float:left;
background-image: url(images/forum-child-background.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
margin-left:4px;
margin-bottom:4px;
}
.child-forum:hover {
opacity: 1.0;filter: alpha(opacity=100);
}
.child-forums{
width:948px;height:219px;
}
.forum-link{
width:309px;height:106px;
display: inline-block;
}
.forum-icon{
width:60px;height:60px;
}
.forum-details{
width:220px;height:43px;
}
.forum-title{
width:217px;height:18px;
}
.forum-desc{
width:217px;height:15px;
}
span elements are inline elements are so are not affected by width and height properties.
Try setting them to display:inline-block and the properties will take effect.
You should give your spans: display:inline-block
Related
So i've read multiple times that putting display:inline-block; in your span will fix it. But i just can't get it to work for me. Probably i just missed something, but i would like help on this.
<html>
<head>
<style>
#font-face {
font-family:myRobotoRegular;
src:url(fonts/Roboto-Regular.ttf);
}
#font-face {
font-family:myRobotoBold;
src:url(fonts/Roboto-Bold.ttf);
}
#font-face {
font-family:myRobotoLight;
src:url(fonts/Roboto-Light.ttf);
}
body {
background-color:black;
color:white;
}
h1 {
font-family:myRobotoBold;
text-align:center;
}
.right {
float:right;
width:49%;
}
.individual {
height:100%;
margin:0 auto;
overflow-y:scroll;
padding-right:10px;
text-align:left;
width:440px;
}
.bannerGreen {
background-color:#0D731D;
padding:10px;
}
.bannerTitle {
font-family:myRobotoBold;
}
.bannerRarity {
font-family:myRobotoLight;
}
.description {
background-color:black;
font-family:myRobotoRegular;
padding:20px 10px 10px 10px;
}
.quotes {
color:#C0B9A7;
}
.orangeStat {
color:#F26A1C;
display:inline-block;
font-family:myRobotoBold;
font-size:20px;
}
.yellowStat {
color:#FFD30B;
display:inline-block;
font-family:myRobotoBold;
font-size:20px;
}
.imgDiv {
float:right;
margin-top:-10px;
}
.img {
height:58px;
}
</style>
</head>
<body>
<div class="mainDiv">
<div class="right">
<div class="individual">
<h1>
CATEGORY
</h1>
<div class="bannerGreen">
<div class="imgDiv">
<img class="img" src="">
</div>
<span class="bannerTitle">
TITLE
</span>
<br>
<span class="bannerRarity">
SUBTITLE
</span>
</div>
<div class="description">
DESCRIPTION
<span class="yellowStat">
STATISTICS
</span>
DESCRIPTION
<span class="orangeStat">
A STATISTIC
</span>.
</div>
<br>
</div>
</div>
</div>
</body>
</html>
The "A" in "A STATISTIC" should well be able to be on the first line, but instead it follows the entire span to the second line.
(Bonus points if you recognize this. ;) )
EDIT: Inline instead of inline-block surely fixes the problem, but then the period after the .orangeStat span jumps away from the span. And i'd like it to not jump away but i do not want it to be included in the span either. Is there a way to get that?
Well, if you want the A and STATISTIC to be treated individually, then you should put them in individual (inline-)block elements:
<span class="orangeStat">
A
</span>
<span class="orangeStat">
STATISTIC
</span>
OR (edit):
Use inline instead of inline-block and to remove the space between the STATISTIC and the period, try something like this:
<span class="orangeStat">
A STATISTIC<!--
--></span>.
Increase the width of the outer container
.individual {
width: 490px;
}
The words are coming in second line because there is no enought space in the container.
Or
Decrease the font-size of yellowStat and orangeStat
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I'm making a menu selection bar, and I'm running into a problem when I mouse over. The icon's corners should all be curved, but only the left hand side ones are.
Here's a demo of the code: https://jsfiddle.net/gfqgcwq5/
From what I can tell, it seems like inline-block is the culprit here:
.wrapper{
display:inline-block;
margin:10px;
}
I just don't know how to accomplish the inline array without it. I'm not great at css, so if someone could lend me a hand, I'd appreciate it.
try this one:
.icon{
border-radius:8px;
padding-top:15px;
padding-bottom:5px;
transition:.1s;
font-size:60px;
display: inline-table;
}
.icon:hover{
cursor:pointer;
background-color: #00B1EB;
color:#fff;
}
span#picture > span {
padding-right:9px;
padding-left:10px;
padding-top:7px;
padding-bottom:10px;
}
.text{
text-align:center;
}
.wrapper{
display:inline-block;margin:10px;
}
DEMO HERE
Used to this
Define your .icon display inline-block
as like this
.icon{display:inline-block;line-height:60px;}
or you can used to
.icon{display:block;}
Demo
Remember that the border-radius is a property (in this case) of the .icon class, if you use the inspector you will see that the wrapper has the proper size and shapewraper
So as the other says the issue is on the display of the .icon class, If your idea is to have more than one .icon elements inside of the wrapper and inline, you should use display: inline-block;, if your call is to have just one per wrapper use display: block;.
Hope this helps you.
You gotta give icon block display: inline-block property in order to work !!
.icon {
border-radius: 8px;
padding: 15px;
padding-bottom: 5px;
transition: .5s all ease;
font-size: 60px;
display: inline-block;
}
.icon:hover {
cursor: pointer;
background-color: #00B1EB;
color: #fff;
}
span#picture > span {
padding-right: 9px;
padding-left: 10px;
padding-top: 7px;
padding-bottom: 10px;
}
.text {
text-align: center;
}
.wrapper {
display: inline-block;
margin: 10px;
}
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
<div class="wrapper">
<span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
<div class="text">PICTURES</div>
</div>
Apply padding for the text div to allow the entire curve to visible.
.text{
text-align:center;
padding:0px 7px;
}
DEMO
I Jerry-rigged a line behind 3 elements by having bars on the right and left of the elements. However, this solution isn't consistent across browsers -- See images below.
Is there a better way to place a line centered behind several objects using HTML and CSS? I tried and failed using pseudo elements/selectors (i.e., :after or :before) before coming to my solution below, but I don't want to rule them out.
Chrome
IE
My solution is, in fact, so jerry-rigged that I can't reproduce it in JS fiddle, but I did something like this:
(My fiddle just for reference https://jsfiddle.net/8t6qtafy/1/)
HTML
<div class="tab-header">
<span>
<div class="header-bar bar-left bar-blank"></div>
<p>1</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>2</p>
<div class="header-bar bar-right"></div>
</span>
<span>
<div class="header-bar bar-left"></div>
<p>3</p>
<div class="header-bar bar-right bar-blank"></div>
</span>
</div>
CSS
html {
font-family: calibri;
}
.container {
width = 400px;
margin:auto;
}
.tab-header {
margin-top:10px;
position:relative;
padding:5px 10px;
//display:inline-block;
}
.tab-header span {
height:45px;
width:45px;
border-radius:50%;
margin:auto;
color:#4c4a47;
background-color:transparent;
border:2px solid #99958E;
display:block;
position:relative;
}
.tab-header span p {
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
top:-4px;
left:.5px;
margin:2px;
}
.tab-header .header-bar {
width:130px;
height:3px;
background-color:#99958E;
position:relative;
}
.tab-header .bar-right {
left:42px;
top:-36px;
}
.tab-header .bar-left {
right:130px;
top: 19px;
}
.tab-header .header-bar.bar-blank {
background-color:transparent;
}
A bit late to the party: what browsers needed to be compatible?
Something like that is a bit neater and could work on all modern browsers and IE10: https://jsfiddle.net/fparent/qhprm41a
<div class="tab-header">
<span class="step active">1</span>
<span class="step">2</span>
<span class="step">3</span>
</div>
Working on a forum right now and the dimensions I gave to my a href and his children's are not working. When I debug it in the console in the browser they don't get the dimensions width and height I gave them in the CSS they are 0px 0px so there's probably a problem with my class named "forum-link" because his parent "child-forum" works perfectly. Thank you
HTML CODE
<div id="content">
<div class="forum-group">
<h2 class="header-2">General Discussion</h2>
<ul class="child-forums">
<li class="child-forum">
<a class="forum-link" href="#">
<span class="forum-icon"></span>
<span class="forum-details">
<span class="forum-title"></span>
<span class="forum-desc"></span>
</span>
</a>
CSS CODE
.forum-group{
width:948px;
height:259px;
margin-left:auto;
margin-right:auto;
}
.header-2{
width:948px;
height:35px;
}
.child-forum{
width:310px;
height:106px;
float:left;
background-image: url(images/forum-child-background.jpg);
opacity: 0.5;
filter: alpha(opacity=50);
margin-left:4px;
margin-bottom:4px;
}
.child-forum:hover {
opacity: 1.0;filter: alpha(opacity=100);
}
.child-forums{
width:948px;height:219px;
}
.forum-link{
width:309px;height:106px;
}
.forum-icon{
width:60px;height:60px;
}
.forum-details{
width:220px;height:43px;
}
.forum-title{
width:217px;height:18px;
}
.forum-desc{
width:217px;height:15px;
}
a tags are inline by default, and you cannot set width or height on inline elements.
To force it to be a block element, use one of these styles:
.forum-link {
display: block;
}
… or
.forum-link {
display: inline-block;
}
You need to give a position to your anchor tag in order for it to recognize width and height. You can do so by floating the link, display:block or display:inline-block whichever that fits your need.
a.forum-link {
width:309px;
height:106px;
float:left;
}