So I have been a developer and pretty proficient at CSS and coding styling. There is a new design that has been approved and trying to figure out the best way to accomplish this. Here is a screenshot of what I am trying to achieve with drawing borders and lines but they need to extend both left and down:
https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png
Does anyone have any insights on how to achieve this with HTML/CSS? Obviously going to tablet and mobile it would be removed, but on desktop they want to achieve this. I do not want to do a flattened image, but that is the only way I am leaning right now.
I have tried creating the lines as an image which i am placing below the left text
Is only playing with CSS
body{
background: black;
margin: 0;
}
.div{
position: relative;
width: 80%;
background: grey;
display: table;
margin-top: 50px;
}
.a,
.b{
display: table-cell;
color: white;
}
.a{
text-align: right;
font-size: 1.2em;
padding: 15px;
border-bottom: 2px solid white;
}
.b{
width: 140px;
}
.b div{
position: absolute;
background: pink;
font-size: 1em;
bottom: 0;
border: 2px solid white;
padding: 8px;
}
strong{
display: block;
width: 150px;
float: right;
}
.b div:before{
content: "";
display: block;
position: absolute;
width: 2px;
height: 50px;
background: white;
top: 100%;
left: -2px;
}
<div class="div">
<div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
<div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>
Related
I've looked at various solutions to this and can't seem to get anything to work. I hope I'm missing something simple. What I want is for a tooltip width to use only what is needed, then wrap when a max-width is reached.
Here's my CSS:
<style>
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
}
.tooltip:before {
content: '?';
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
And here's my HTML:
<div class="tooltip">
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
</div>
Blacklist
What happens is it always wraps to fit only the widest word, making the max-width setting meaningless. Any assistance would be appreciated.
The problem is that you're trying to cram the tooltip inside a container with 20px width. It simply doesn't have any wiggle room!
For a solution, move the .tooltiptext out of the .tooltip. The CSS can mostly stay the same.
.tooltip {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: steelblue;
color: yellow;
border: solid;
border-width: 1px;
border-radius: 50%;
text-align: center;
cursor: help;
overflow:visible;
}
.tooltip:before {
content: '?';
}
.tooltip + .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
.tooltip:hover + .tooltiptext {
visibility: visible;
}
<div class="tooltip">
</div>
<div class="tooltiptext">
I want this to wrap only after 300 pixels.
</div>
Blacklist
You need to explicitly set a min-width as well:
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
display: inline-block;
min-width: 100px;
max-width: 300px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
z-index: 10;
}
https://jsfiddle.net/gdL458jo/
I have certain boxes which I want them to be side by side. I used float:left;margin-left:10px; and successfully achieve my aim.
But I want to lock their positions on screen i.e. fixed w.r.t to screen and no movements according to mouse. For that I tried to use `position:fixed', it too worked, but now it created a problem.
The problem is that the two boxes are now overlapping with each other and displaced with their location.
Her is the fiddle
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
float: left;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
You can set the fixed property to parent div. Try this fiddle.
CSS
.chatWindow-parent{
position: fixed;
}
.chatWindow {
display: inline-block;
position: relative;
width: 250px;
height: 280px;
bottom:0;
background: #FAFAFA;
margin-left: 10px;
margin-bottom:10px;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
HTML
<div class="chatWindow-parent">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
http://jsfiddle.net/2csBx/
You have to have 2 different classes. Otherwise by fixing the position you are telling them to be fixed in the same location.
Need to add a parent class
HTML
<div class="chatContainer">
<div class="chatWindow"></div>
<div class="chatWindow"></div>
</div>
CSS
body{
height: 2000px;
}
.chatContainer {
position: fixed;
bottom: 10px;
}
.chatWindow {
display: inline-block;
position: relative;
float: left;
width: 250px;
height: 280px;
bottom: 10px;
margin-left: 10px;
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #7a7a7a;
z-index: 100000;
}
Try this fiddle: http://jsfiddle.net/ETwEF/2/
I would like to put 2 lines behind my headers on my website. I have found CSS to put one solid line behind the text, but I'd really like to have two lines behind my text of different widths (one a little bit thicker with space in between them).
Would anyone know how to adjust this code to make it possible to have two lines behind the text?
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Here's the HTML:
<h1>Header Title Goes Here</h1>
And if it's not as simple as just adjusting this code, is there any CSS method I could use to achieve this effect?
As opposed to setting a height/background, you can alternatively set a border instead.
jsFiddle demo
Updated for margins..
I added 2% I don't know if that enough, but you can just change margin-left you will notice a difference in 2%.
jsFiddle demo - with margins.
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid red;
border-top: 1px solid red;
}
h1:before {
margin-left: -52%;
text-align: right;
}
h1:after {
margin-left:2%;
text-align:left;
}
.color {
background-color: #ccc;
}
I want to make the following icon in CSS3 such that I can very the width and height of only ".circle" (or some other wrapper element, point is I want to adjust width and height in one place or even make it so that it automatically fits in any container regardless of width and height) without having to adjust any other CSS3 properties to make the "A" line up in the center.
What is the best way to do this? If you can recommend a better way to do the following it would be very appreciated. The issue with what I have is that changing ".circle"'s width and height to be smaller affects the positioning of the positioning of eveerything else forcing me to change .circle2's properties and .letter's properties until things line up.
CSS
.circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;
}
.circle2 {
width:80%;
height:80%;
border-radius: 50px;
position:relative;
top:5%;
left:5%;
border: 5px solid #FFF;
}
letter{
position:relative;
top:45%;
left:30%;
margin:auto;
cursor:pointer;
color: #fff;
font-size: 60px;
font-weight: bold;
display: inline-block;
line-height: 0px;
}
letter:before {
content: "A"
}
HTML
<div class="circle">
<div class="circle2">
<a class="letter"></a>
</div>
</div>
Have a look. The only thing that's tricky is the "A" font size. You could use a library like http://fittextjs.com/ to accomplish this fully.
http://jsfiddle.net/cSBw3/1/
Code is bellow and modified.
CSS3
.container {
width: 100px;
height: 100px;
text-align: center;
}
.circle {
width: 100%;
height: 100%;
background: blue;
cursor:pointer;
position: relative;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circle:after {
content:"";
display: block;
position: absolute;
/* width: 80%; height: 80%; */
top: 10%; bottom: 10%;
left: 10%; right: 10%;
border: 5px solid #FFF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.letter {
cursor:pointer;
display: block;
}
.letter:before {
content: "A";
display: block;
position: absolute;
bottom: 19%;
right: 19%;
font-size: 3em;
font-weight: bold;
color: #fff;
}
HTML
<div class="container">
<div class="circle">
<a class="letter"></a>
</div>
</div>
How can I style a div to look like a comic-strip speech bubble in CSS?
Here's an image demonstrating what I mean:
Is there a way of doing this in pure CSS?
A quick example, you can tweak it to fit your needs .. and since I cannot post a fiddle without code:
HTML:
<div class="balloon">
O hai !
<span class="tip"></span>
</div>
CSS:
body { background: #000; }
.balloon {
width: 250px;
height: 75px;
padding: 50px;
background: #fff;
border-radius: 50px;
position: relative;
font-size: 34px;
text-align: center;
}
.balloon .tip {
width: 0;
height: 0;
position: absolute;
right: 70px;
bottom: -20px;
border: solid 10px;
border-color: #fff transparent transparent transparent;
}
http://jsfiddle.net/6rzDK/