I've got a few div elements that aren't expanding to match the height of their content. I have read that this can be caused by float-ed content; This content isn't float-ed - although I am beginning to feel like I should throw my computer in a river. Does that count?
code:
#interaction-options-container.display-dialogue {
left: 15%;
width: 70%;
}
#interaction-options-container.full-border, .dialogue-container.full-border {
border: 1px solid #33ffff;
}
#interaction-options-container {
margin: 4px 0px 4px 0px;
z-index: 100;
position: absolute;
left: 35%;
bottom: 4%;
width: 30%;
line-height: 1.4;
opacity: 0.75;
}
#interaction-options-container .heading {
font-size: 16px;
color: black;
padding: 0.1px 12px 0.1px 12px;
background-color: grey;
}
.heading {
font-weight: bold;
font-size: 1.5em;
padding: 8px 12px 0px 12px;
}
#interaction-options-container p {
margin: 8px 0px 8px 0px;
}
#interaction-options-container .dialogue p {
margin: 4px 0px 4px 0px;
}
#interaction-options-container .button, #interaction-options-container .evidence-options-container .button {
cursor: pointer;
color: white;
font-size: 14px;
padding: 0.1px 12px 0.1px 12px;
background-color: #333333;
opacity: 0.85;
border-bottom: 1px solid #8d8d8d;
}
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
height: 32px;
background-color: #333333;
float: none;
}
#interaction-options-container .dialogue {
text-align: center;
margin: auto;
font-size: 16px;
font-weight: bold;
padding: 1px 12px 1px 12px;
color: white;
background-color: #333333;
}
.dialogue-container .dialogue.option-divider {
border-bottom: 1px solid #333333;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="hud-element display-dialogue full-border" id="interaction-options-container">
<div class="heading"><p>Choose a reply:</p></div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option one here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option two here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue option-divider"><p>Option three here</p></div>
</div>
<div class="dialogue-container button">
<div class="dialogue"><p>Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...</p></div>
</div>
</div>
The problem is, when a piece of dialogue requires wrapping to a new line, the .dialogue-container .button div does not expand in height to match the height of the .dialogue div. The inner divs therefore extend past the border lines, which looks bad.
If anyone has any pointers, my computer will thank you.
Cheers.
#interaction-options-container .dialogue-container {
padding: 0px;
margin: 0px;
width: 100%;
//height: 32px;
background-color: #333333;
float: none;
}
Related
Creating a circle around a letter or text works fine, but in my case I only want to circle a single letter within a word (which is within an H1 tag):
.large {
font-size: 5em;
}
.circle {
border-radius: 50%;
padding: -0.5% 5% 0% 5%;
background: #fff;
border: 10px solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Fiddle is here: https://jsfiddle.net/henzen/zwph2nsv/4/
This produces:
Notice that the circle is conforming to the H1 height (I think) - I need it to be compressed vertically, ie the vertical padding needs to be the same as the horizontal, tightly wrapped around the "e".
Is this possible, or would I need to separate the "e" from the "Text" completely in the HTML?
I have tried Unicode chars (eg, ⓔ), which work, but cannot be reliably styled across browsers.
Thanks for any pointers.
You could use a pseudo element.
.large {
font-size: 5em;
}
.circle {
position: relative;
color: red;
}
.circle:after {
content: '';
width: 39px;
height: 44px;
border: 4px solid red;
position: absolute;
border-radius: 50%;
left: -5px;
top: 27px;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
use a pseudo element.
Try This: https://jsfiddle.net/2gtazqdy/12/
* {
margin: 0;
padding: 0;
}
.large {
font-size: 5em;
}
.circle {
height: 50px;
width: 50px;
display: inline-block;
padding-left: 20px;
}
.circle::after {
display: inline-block;
height: 50px;
width: 50px;
z-index: 1;
position: absolute;
top: 18px;
left: 4px;
content: "";
color: red;
background: transparent;
border: 10px solid red;
border-radius: 50%;
}
My output:
try this
for your html do <h1> <span> C </span> ircle </h1>
then in the css define your h1 span
and give it padding, in the shape of a rectangle you could use this =
padding: 20px 10px;
then add a border, for example =
border: 5px solid #ddd;
then at last give it a border radius, this is a bit tidious to figure out but just play around with the pixels and you'll eventually get it right how you want it.
for example =
Border-radius: 20px
your html:
<h1> <span> C </span>ircle </h1>
your total css:
h1 span{
padding: 20px 10px;
border: 5px solid #ddd;
border-radius: 20px;
}
If you want to make a circle, the following is needed:
display: inline-block (or display: block)
same width, height and line-height
text-align: center
Use em to correspond with the font-size of the container.
Example
.large {
font-size: 5em;
}
.circle {
display: inline-block;
width: 0.8em;
height: 0.8em;
line-height: 0.8em;
text-align: center;
border-radius: 50%;
background: #fff;
border: 0.05em solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Please try this code
.large{
text-align: center;
font: 40px Arial, sans-serif;
color:#000;
font-weight:bold;
}
.circle {
border-radius: 50%;
background: #fff;
border: 6px solid red;
padding: 3px 10px;
text-align: center;
font: 28px Arial, sans-serif;
color: #000;
font-weight: bold;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
I'm developing drop down list in polymer. Currently I have problem with CSS.
Here you can find example:
jsfiddle example
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end
</div>
<div class="arrow">▼</div>
</div>
</div>
I need to create the following drop down list, but I have problem with arrow visible on the right of button.
Question is, how to achieve this:
gif example
I will be very grateful for your help !!!!
You need to use this
text-overflow: ellipsis;
overflow: hidden;
then you will see the three dots after your list item, but also you need to add width for your span
width: 100px
Code example
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:12px;">
<div class="button-value truncated" style="width:158px; display: inline-block">
Select value very long label with dots at the end
</div>
<div style="display: inline-block;margin-top: 12px;vertical-align: top;"class="arrow">▼</div>
</div>
</div>
div.button.orange {
border: 1px solid #FF6200;
background: inherit;
background-color: #FF6200;
border-radius: 5px;
box-shadow: none;
font-family: 'ING Me';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: white;
cursor: pointer;
height: 36px;
box-sizing: border-box;
box-shadow: 1px 1px 5px lightgray;
}
div.button.gray {
border: 1px solid #767676;
background: inherit;
background-color: white;
border-radius: 5px;
box-shadow: none;
font-family: 'ING Me';
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #FF6200;
cursor: pointer;
height: 36px;
box-sizing: border-box;
box-shadow: 1px 1px 5px lightgray;
position:relative;
}
div.button.gray.initial {
color: #767676;
}
div.button.active {
border-radius: 4px 4px 0px 0px;
border: 1px solid #FF6200;
}
div.button-value {
text-align: center;
line-height: 36px;
width: inherit;
}
ul.options>li {
padding-left: 12px;
padding-right: 12px;
line-height: 36px;
}
.truncated {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
ul.options {
color: black;
list-style-image: none;
list-style: none;
list-style-type: none;
border-radius: 0px 0px 4px 4px;
box-sizing: border-box;
position: absolute;
width: auto;
margin: -1px;
padding: 0;
list-style: none;
border: 1px solid #FF6200;
border-top: none;
background-color: white;
box-shadow: 1px 1px 5px lightgray;
}
ul.options>ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.options>li:hover {
color: white;
background-color: #FF6200;
text-decoration: underline;
}
.arrow{
position:absolute;
right:4px;
top:0;
line-height:36px;
}
<div style="width:200px" class="button initial gray">
<div style="padding-left:12px;padding-right:18px;">
<div class="button-value truncated" style="width:inherit;">
Select value very long label with dots at the end▼
</div>
<div class="arrow">▼</div>
</div>
</div>
This is my css:
.content {
background-color: #fff;
position: relative;
margin: 45px 10px 0px 10px;
}
#logData {
font-family: "Courier New";
font-size: 13px;
line-height: 1.3;
margin-left: 0px;
color: #000;
}
.logMess {
color:#000;
padding: 4px 5px 2px 3px;
min-width: 100%;
}
.logMessBg {
color:#000;
padding: 4px 5px 2px 3px;
min-width: 100%;
background: rgb(245, 245, 245);
}
And this is HTML:
<div class="content">
<div id="logData">
<p class="logMessBg">some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p>
<p class="logMess">some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</p>
</div>
</div>
And the problem is with horizontal scroll. Because backgroud ends when <p class="logMessBg"> text ends, but I want it to end when the longest <p> text ends. So, I want to background width all width.
Here is the screen:
Add display: inline-block; to the .content or #logData like this:
JSFiddle - DEMO
.content {
background-color: #fff;
position: relative;
margin: 45px 10px 0px 10px;
display: inline-block;
}
I am working on creating a custom tooltip plug-in and am having trouble with the CSS and HTML layout of it.
I would like to have something like this:
Nested inside some div container.
Here is a JSFiddle of what I have at the moment, but as you can see - I'm having some issues.
Thanks to all you CSS gurus!
Here is the updates JSFiddle I made for you: http://jsfiddle.net/Y2E36/2/ All I did was add Display:inline-block; to status-icons
Here is a basic re-creation for you.
Fixed h2 closing tag
Have a jsbin example!
HTML
<div class="contact">
<img src="http://www.placehold.it/100X120/FFFFFF" />
<div class="actions">
</div>
<div class="details">
<h1>John Smock</h1>
<h2>In since Thursday, 5/9/2013 at 9:45 AM</h2>
<p><span>Lync (Away 5 Min)</span> Lenexa</p>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
}
.contact {
height: 120px;
width: 450px;
background: #ccc;
border-top: solid 1px #000;
}
.contact img {
border-left: solid 12px orange;
border-right: solid 1px #000;
float: left;
}
.actions {
float: left;
border-right: solid 1px #000;
margin: 0 10px 0 0
}
.actions a {
background: url(http://www.placehold.it/20/FFFFFF) no-repeat;
width: 20px;
height: 20px;
display: block;
margin: 15px 13px;
border: none;
}
.details h1 {
font-size: 1em;
padding: 8px 0 5px;
}
.details h2 {
font-size: 0.8em;
font-weight: normal;
padding: 3px;
}
.details p {
font-size: 0.8em;
margin: 48px 0 0;
}
.details span {
padding: 0 5px 0 0;
border-right: solid 1px #000;
}
With this CSS and HTML I get a gap above the <span>-tag and I don't know why this is happening:
CSS
<style>
header > aside {
float: left;
font-size: 0;
line-height: 0;
white-space: nowrap;
border: 1px solid green;
}
header > aside > span {
display: inline-block;
height: 19px;
margin: 0px 10px 0px 0px;
padding: 5px 0px 0px 0px;
opacity: 0.75;
font-size: 9px;
line-height: 9px;
text-transform: uppercase;
color: #0fa1b4;
border: 1px solid red;
}
a.share {
display: inline-block;
width: 24px;
height: 24px;
margin: -1px 0px 0px -1px;
padding: 0;
opacity: 0.45;
background: blue;
font-size: 0;
line-height: 0;
}
</style>
HTML
<header>
<aside>
<span>Follow</span>
<a class="share facebook" href=""></a>
<a class="share soundcloud" href=""></a>
</aside>
</header>
In action
http://jsfiddle.net/insertusernamehere/ZAVJJ/
I could solve it using float, but somehow I want to solve it without. I guess it's pretty simple, and I'm only overlooking something. But with just a few hours sleep, I can't figure it out. :)
vertical-align: top; on the span does the trick. See: http://jsfiddle.net/ZAVJJ/3/