Hi I've got two boxes of the same size, but for some reason they won't stay on the same "line", one box contains an image, another contains text. Replacing the Image with text causes them to be aligned the way I want them to be. However not having any text in the box cause them to be unaligned.
http://jsfiddle.net/U3b8r/1/
<div class="boxbox">
<sam-box class="box clickable no-padding" base="170" width="1" height="1">
<img src="http://placekitten.com/160/160">
</sam-box>
<sam-box class="box clickable no-padding" base="170" width="1" height="1">
This is a box
</sam-box>
I am using a sam box for custom measurements, I can assure you that the size of both elements is the same(174px to be exact).
You just need to usevertical-align:top; on inline-block elements. Oh, and 'custom' elements probably won't validate and you may have some x-browser issues too.
JSFiddle
CSS
.box {
padding: 10px;
background-color: transparent;
border-radius: 10px;
margin: 5px;
display: inline-block;
vertical-align:top;
font-weight: 400;
border: 2px solid transparent;
}
just add a float:left to your .box class
float:left;
FIDDLE
You might find that adding overflow:hidden; to your .box class fixes your problem - http://jsfiddle.net/U3b8r/4/
Add float:left for your boxes
.box {
float:left;
}
Use float left and set the width and height of the divs. Try like below and modified to your needs.
.box {
width:170px;
height:170px;
float:left;
border-radius: 10px;
margin: 5px;
font-weight: 400;
border: 2px solid transparent;
}
since you already give the Css property display: inline-block; then no need to defined the float: left property.
you only need to add below property in your box class
.box {
padding: 10px;
background-color: transparent;
border-radius: 10px;
margin: 5px;
display: inline-block;
vertical-align:top; /*only add this will work even if the image size is smaller*/
font-weight: 400;
border: 2px solid transparent;
}
Related
I want to put a colorful outline around a bunch of inline elements. Is there any easy way to make this look right within the flow of the text?
Here's the HTML:
<span>Text Before</span>
<div class="border">
<div>This</div>
<div>is</div>
<div>not</div>
<div>a</div>
<div>public</div>
<div>service</div>
<div>announcement.</div>
</div>
<span>Text After</span>
Here's the CSS:
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}
Screenshot with .border display: inline:
Screenshot with .border display: inline-block:
I want it to look roughly like this (accomplished with a mixture of manual line height, padding, and relative positioning... ugh!):
Basically, inline-block elements do everything right, but they don't break apart between lines as would inline elements. But inline elements collapse their height and have to be manually adjusted. Is there really no way around this?
Try adding a line-height on container div.
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
font-size: 30px;
}
.border > div {
display: inline-block;
margin-bottom: 15px;
background-color: lavender;
}
This is a cop-out answer on my part, but It Works™, at least for my purposes, so I'm using it until something better comes up.
If you're willing to commit the relatively minor crime of putting a span around the content of each inner div and setting the text style for the span instead of the div, you can make each of the divs an inline-block, give the background and border style to each individual div instead of the parent div, set the left/right margin of each div, to 0, and extend the borders of the divs via padding to make it seem like one continuous background rect. If you want an outline, you can use the nth-item selectors and set the borders accordingly.
Here's the revised HTML (also compressed onto one line, to get rid of the spaces between inline-block elements):
<span>Text Before</span>
<div class="border">
<div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div>
</div>
<span>Text After</span>
And here's the revised CSS:
.border {
display: inline;
word-spacing: 0;
}
.border > div {
display: inline-block;
vertical-align: middle;
background-color: pink;
padding: 5px;
margin: 2px 0 2px 0;
border-top-style: solid;
border-bottom-style: solid;
}
.border > div:nth-child(1) {
border-left-style: solid;
}
.border > div:last-child {
border-right-style: solid;
}
.border > div > span {
background-color: lavender;
font-size: 30px;
vertical-align: middle;
}
And here's what it looks like:
This technique breaks down if you want something more complex than a background color with a border, but for my purposes, the benefits — those being far simpler CSS and mostly automatic layout — outweigh the cons.
Consider following example:
http://jsfiddle.net/AsGk4/
As you can see the two boxes overlap instead of being positioned next to each other with float:left property. When I remove the child .text DIV, the boxes appear as they should. I assume this behavior comes from .text 's position:absolute property, but why does this have impact on parent DIV's appearance?
HTML
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
<div class="box">
<div class='text'><span>Some text</span><div>
</div>
CSS
.box {
position: relative;
display:inline-block;
width:100px;
height:100px;
background-color:#0000FF;
float:left;
}
.box:before {
content:'';
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
border: 1px solid white;
}
.text {
position: absolute;
bottom:9px;
left:5px;
width: 95%;
text-align:left;
}
.text span {
color: white;
font: bold 12px/16px Helvetica, Sans-Serif;
background: rgb(0, 0, 0);
/* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 1px;
padding-left:3px;
padding-right:1px;
}
EDIT:
Silly me, forgot to close the div tags. Apologies.
First of all you don't need float: left; if you are using display: inline-block; and vice versa..
If you are using float then don't forget to clear them and if you are sticking with display: inline-block; then I assume you will need vertial-align: top; as they are aligned to baseline by default. So use any one, as using both seems redundant
Also it's worth noting that using display: inline-block; will cause you white-space
And what's the issue? You are not closing your div tags, there are many ways to deal with that.
Demo
If you want to refactor your code, the below snippet
padding: 1px;
padding-left:3px;
padding-right:1px;
Can be written as padding: 1px 1px 1px 3px; which is nothing but shorthand syntax
Close the text divs and it works just fine.
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
<div class="box">
<div class='text'><span>Some text</span></div>
</div>
See updated Fiddle
your closing <div> tags aren't closing - you need to change them to </div>. This is causing the boxes to nest inside of one another rather than being side by side.
I put down an example below that I have trouble with:
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
Link: http://jsfiddle.net/qhoc/SQpdu/5/
Text 1 has pseudo-element but the height being adjusted with the pseudo-element height.
Requirements:
a. Text 1 height same as Text 2 height
b. The red rectangle in the middle of the button.
c. The text must have space around them
d. Everything has to be position:relative, at least not absolute or fixed because this is just a button that could be placed anywhere.
I could just (a) remove padding: 6px 12px; and add height: 30px; but then my text won't be in the middle with space around it OR (b) add another inner div within Text 1 and make that the red rectangle but I rather not add div.
Is there a way to work around this?
UPDATE: I changed the correct link and clarify the requirements.
I don't know what exactly you want but try this maybe helpful
.text1, .text2 {
width: 200px;
padding: 8px 12px;
display:block;
background-color: gray;
margin: 5px;
height:20px;
}
.text1{
height:28px;
padding:0px 12px 8px 12px;
}
.text1:before {
content:"";
background: red;
display: block;
position: relative;
width: 20px;
height: 10px;
left: 110px;
top: 15px;
}
DEMO
You use this style code
.text1, .text2{
width:120px;
margin:0 auto;
height:30px;
}
Problem
So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:
The follow are my HTML and CSS:
HTML
<div id="tabcontent-container">
<div class="tabcontent-menu">
WLAN Jumpstart
Mobility
Guest Access Jumpstart
</div>
</div>
The CSS
#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }
Working example on Jsfiddle.net
The Question
I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.
Any suggestions?
You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a
http://jsfiddle.net/H9VHs/8/
I usually accomplish something like this by varying the line-height.
.tabcontent-menu a.midline {
line-height: 64px;
}
See it here: http://jsfiddle.net/PZVnq/
Documentation/Further Reading
CSS line-height on MDN - https://developer.mozilla.org/en/CSS/line-height
Lauri Raittilan on Vertical centering with CSS - http://www.student.oulu.fi/~laurirai/www/css/middle/
Vertical centering with CSS on vanseodesign.com - http://www.vanseodesign.com/css/vertical-centering/
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}