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>
Related
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
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 am trying to create a css hovering effect that the divs with text and a down arrow above the circle should be hidden and when I will hover the circle they should appear.
But I couldn't do this. Below the codes I used.
When I hover on this circle, the above two divs should appear like that
<head>
<title>CSS Hovering Effect Practical Class</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
background:#4485F5;
margin:10px 0;
padding:30px;
text-align:center;
}
h1 {
color:#fff;
letter-spacing:2px;
font-size:50px;
margin-bottom:15px;
}
p {
color:#fff;
background:#944E90;
width:600px;
font-size:25px;
padding:3px;
margin:auto;
}
span {
font-style:italic;
}
#features {
margin: 25px 0;
}
#baloon {
color:#ddd;
margin:auto;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:url('bg.png') repeat;
width:200px;
position:relative;
border-radius:5px;
}
#blackarrow {
background:url('blackarrow.png') no-repeat top center;
margin:auto;
height:15px;
width:15px;
margin-top:-7px;
}
#circle {
}
#circle img{
height:50px;
width:50px;
background:#fff;
padding:50px;
border:5px solid #00AEF0;
border-radius:500px;
transition:0.5s ease;
}
#circle img:hover {
height:60px;
width:60px;
background:#ddd;
padding:60px;
border:8px solid #00AEF0;
border-radius:500px;
}
#circle:hover > #baloon {
display: inline;
}
#inner {
}
#img {}
</style>
</head>
<body>
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
<div id="circle"><img src="avatar.gif" /></div>
</div>
</div>
</body>
With your markup it's not possible to achieve because the current css selectors cannot target elements which are parents and siblings only in a very limited way via the general sibling combinator~ or the more useful adjacent sibling combinator + (See docs).
You better choose a differently nested structure, to make the hover effect work.
<div id="features">
<div id="circle"></div>
<div id="description">
<div id="baloon">Best web designing services with our team</div>
<div id="blackarrow"></div>
</div>
</div>
Now with the #description div being an adjacent sibling after your circle, you can target it via +. (If you have multiple elements, you need this container, if it's only the one #baloon element inside, you could as well target this directly).
#circle:hover + #description {
display:none;
}
Take a look at my minimal example. You only need some fixing to the positioning and you're done.
As Chad's comment says, ">" is the child selector. Baloon would need to be inside the circle element. What you want is the sibling selector. "+" signifies an adjacent sibling (immediately following), and "~" is the general sibling selector, which is probably what you want:
#circle:hover ~ #baloon
Note that "baloon" has to come AFTER "circle in the markup, so you will need to reprder your elements for this to work. (i.e. put circle first).
As #Chad said, you have structured your CSS in a way that you are not actually selecting the #balloon div on hover. The > selector is the immediate child selector, so in order for the CSS to work the way you wrote it, your HTML will have to look like this:
<div id="wrap">
<h1>Welcome to <span> CodeforBusiness</span> Site</h1>
<p>Your trusted web designing service provider for a decade</p>
<div id="features">
<div id="blackarrow"></div>
<div id="circle">
<div id="baloon">Best web designing services with our team</div>
<img src="avatar.gif" />
</div>
</div>
</div>
This is a doable solution, if you are comfortable changine the structure.
You would change the #balloon styles to something like this:
#baloon {
display:none;
position:absolute;
width:200px;
top:-100px;
left:50%;
margin-left:-115px;
padding:15px;
font-size:16px;
letter-spacing:1px;
background:rgba(0, 0, 0, .5);
border-radius:5px;
color:#ddd;
}
And the #circle & :hover style to this:
#circle {
display:block;
position:relative;
}
#circle:hover > #baloon {
display: block;
}
Let me know if you need any help positioning the balloon.
Here is a working jsfiddle
I currently have a <div> square but don't know how to make another square with a different style. When ever I use <div> to make another square in css, the style would be the same as the first square.
CSS:
div{
height:100px;
width:95px;
background-color:#B80000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
html:
<div>
<span>M</span>i'm lovin' it<l>™</l></div>
try like this
CSS:
#squareA{
height:100px;
width:95px;
background-color:#B80000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#squareB{
height:100px;
width:95px;
background-color:#B8FFFF;
border-radius:4px;
text-align:center;
margin-left:132px;
}
html:
<div id="squareA">
<span>M</span>i'm lovin' it<l>™</l></div>
<div id="squareB">
<span>M</span>i'm lovin' it<l>™</l></div>
Explanation:
you were styling all the divs in your css. the same style will apply to all the divs that you have in your markup. if you need to apply separate styles to separate elements, for e.g. two divs, one way is to give them both different ids and apply styles to particular ids.
P.S : there are a loads of other ways too. try to read more on CSS styling.
Use a different id for each one.
Then for your css
Div#first {
}
div#second {
}
Use classes instead of ids or the literal div selector in your CSS. Create a class that represents your square and two classes that represent your colors.
HTML:
<div class="square a">
<a href="http://www.mcdonalds.com/us/en/home.html">
<span>M</span>i'm lovin' it<l>™</l>
</a>
</div>
<div class="square b">
<a href="#">
<span>B</span>bee<l>™</l>
</a>
</div>
CSS:
.square {
border-radius:4px;
height:100px;
width:95px;
border-radius:4px;
text-align:center;
margin-left:132px;
}
.a {
background-color:#B80000;
}
.b {
background-color:#00ff00;
}
http://jsfiddle.net/mSA6E/
You can use the html "id" attribute. See this jsfiddle:
div {
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
<div id="red"></div>
<div id="green"></div>
You can put as much css classes as you like to an html tag. For example:
.square { display:block; width:100px; height:100px; }
.red { background:#f00; }
.green { background:#0f0; }
.blue { background:#00f; }
Then
<div class="square red">Red square</div>
<div class="square green">Green square</div>
<div class="square blue">Blue square</div>
This approach is also more verbose than having multiple repetitions of the same instructions.
I have this code :
<div class="richiedi_info_item">
<label>Message</label>
<span style="color:Red;"> *</span>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
.richiedi_info_item_nota
{
float:right;
width:252px;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
float:left;
height:16px;
line-height:20px;
}
and (on every browser expect IE7) the text Message and the link Click is aligned on the same line. Seems that span (with the red *) create a new line.
Why? And how can I fix this problem?
You can remove the floats (left and right) and set the div to display:inline, like this:
.richiedi_info_item_nota
{
display:inline;
width:252px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
EDIT:
IE7 Does not handle floats very well, especially with inline elements (span and label) so I added another div around both of the items and floated it.
HTML
<div class="richiedi_info_item">
<div id="floating">
<label>Message</label>
<span style="color:Red;"> *</span>
</div>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
CSS
.richiedi_info_item_nota
{
width:21px;
clear:both;
float:right;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
#floating {
float:left;
}
WORKING EXAMPLE
JsFiddle Demo