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/
Related
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;
}
The #itemcontent div is not stretching to the size of its contents. How can i get the #item-content div to extend past its current position without setting the height in pixels to keep it wrapping!
Here is a codepen:
http://codepen.io/Malvooo/pen/GJeVxW
Stack Snippet below:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
* {
margin: 0;
padding: 0;
}
body {
background: #222;
font-family: 'Open Sans', sans-serif;
}
#item {
margin-bottom: 2%;
margin-top: 8px;
transition: opacity 1s;
-webkit-transition: opacity 1s;
width: 300px;
}
#triangle {
border-bottom: 12px solid #3399cc;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid transparent;
margin: 0 auto;
width: 0;
}
#item h1 {
background: #3399cc;
color: #fff;
font-size: 140%;
font-weight: 300;
padding: 20px 0;
text-align: center;
}
#item-content {
background: #f0f0f0;
padding: 0 4%;
}
#item-left {
background: #f0f0f0;
float: left;
padding: 5px 0;
width: 50%;
}
#item-content h2 {
color: #555;
font-size: 95%;
font-weight: 600;
padding: 5px 0;
padding-left: 10px;
text-align: left;
width: 100%;
}
#item-right {
background: #f0f0f0;
float: right;
padding: 5px 0;
width: 50%;
}
#item-content h3 {
color: #555;
font-size: 95%;
font-weight: 300;
padding: 5px 0;
text-align: left;
width: 100%;
}
#item-content h4 {
background: #3399cc;
color: #fff;
font-size: 100%;
font-weight: 300;
padding: 5px 0;
text-align: center;
}
<body>
<div id="item">
<div id="triangle"></div>
<h1>Assault Rifle</h1>
<div id="item-content">
<div id="item-left">
<h2>Type</h2>
<h2>Stacksize</h2>
</div>
<div id="item-right">
<h3>Weapon</h3>
<h3>1</h3>
</div>
<h4>Weapon Stats</h4>
<div id="item-left">
<h2>Fire Mode</h2>
<h2>Attack Rate</h2>
<h2>Damage</h2>
<h2> </h2>
<h2> </h2>
<h2> </h2>
<h2>Recoil</h2>
<h2>Range</h2>
<h2>Capacity</h2>
</div>
<div id="item-right">
<h3>Full Automatic</h3>
<h3><i>Unknown</i></h3>
<h3>Head: 100</h3>
<h3>Chest: 61</h3>
<h3>Arms: 11</h3>
<h3>Legs: <i>unknow</i></h3>
<h3>Medium-Severe</h3>
<h3>250 ~ 400m</h3>
<h3>30</h3>
</div>
<h4>Ammunition</h4>
<div id="item-img">
<img src="images/5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/Explosive_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/HV_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
<img src="images/Incendiary_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
</div>
<h4>Crafting</h4>
<div id="item-left">
<h2>Craftable</h2>
<h2>Known By Default</h2>
<h2>Time To Craft</h2>
</div>
<div id="item-right">
<h3>Yes</h3>
<h3>No</h3>
<h3>180s</h3>
</div>
</div>
</div>
</body>
Try this one:
#item-content div {
background: #f0f0f0;
height: 100%;
}
This will make sure the entire item content will wrapp all the content.
Edit:
Just add overflow: hidden; to #item-content and this will solve your problem:
#item-content {
background: #f0f0f0;
padding: 0 4%;
overflow: hidden;
}
See working fiddle
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;
}
I would like to be able to vertically center a div containing meta data such as Title and Author within a container that has a fluid width. In the example below, I would like the .meta div to be vertically centered within the article which is fluid width.
I tried following this article (http://css-tricks.com/centering-in-the-unknown/) but it doesn't work.
HTML
<div class="container">
<h3>Test</h3>
<article>
<div class="meta">
<div class="title"></div>
<div class="author"></div>
<img src="" />
</div>
</article>
</div>
CSS (using LESS)
.container {
h3 {
margin: -5px 0 0 0;
padding: 32px 0px 16px 0;
.freight-sans-pro;
font-size: 1.375em;
line-height: 1em;
font-weight: 200;
}
article {
max-height: 375px;
overflow: hidden;
position: relative;
z-index: 900;
margin-bottom: 2px;
background-color: #color-black;
line-height: 0em;
a {
max-height: 375px;
display: block;
img { opacity: .5; .opacity-transition; }
}
.meta {
width: 100%;
position: absolute;
bottom: 40%;
z-index: 500;
padding: 0px 10%;
color: #color-white;
font-size: 20px;
text-align: center;
.title {
margin: 0;
font-size: 2em;
line-height: 1em;
font-weight: 700;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
padding-bottom: 8px;
text-decoration: none;
display: block;
}
.author {
margin: 0;
font-size: .8em;
line-height: .75em;
font-style: italic;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
}
}
}
Tried your Less but got an error in codepen.io so could not debug.
You could try something simple like this:
.container {
border: 2px solid blue;
width: 180px;
height: 120px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
Check it working here
You might find this article useful as well: http://logconsole.com/vertical-align-center-image/
It's about vertically centring image, but in most cases you could just change image with a div.
Try this on what you want to be centered. I altered #domkoscielak's code so that it work.
.meta {
width: 180px;
height: 120px;
top: 50%;
margin-top: -60px; /*half of height*/
position: absolute;
}