I am new to CSS and was wondering how to make my images display side-by-side. I don't want to use float:left, but rather display:inline-block. I tried it but I couldn't get it to work.
Here is the jsfiddle.
Your images are each inside of separate <div> tags. A <div> by default is going to look like display: block, and so what you need to do for your comment1 and comment2 classes is make those inline block. Additionally, because your .MainBox .commentBox is set to width: 0px, none of the elements below it are going to line up side by side. You'll need to remove that property if you want your images sitting next to each other.
Try this:
Use following CSS:
.MainBox {
margin:0px auto;
border:1px solid #f00;
width:1000px;
}
.MainBox .commentBox {
display:inline-block;
}
.MainBox .commentBox .comment1 {
float:left;
}
.MainBox .commentBox .comment2 {
float:left;
}
Related
Im trying to accomplish the next situation;
If got a h1 tag, and right of it i want a small line (separator.png)
But my image keeps crossing the h1 text..
http://i57.tinypic.com/2m30l51.png
I've got a example of how i need it to be;
http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto
Those titles: "Take a Look, Recent Works"
HTML is like this;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
CSS;
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
If tried a lot of things, even copied the code from the original site, but actually i have nog idea what to do.. Can someone help me with it?
Thanks
UPDATE
So i've tried all the things you guys answered.
So far none of them are working for me..
First;
The background tag, smart idea but my page background is transparant.. So transparant on transparant won't work. And even if i make the background transparent, the line will shine trough it. Are there any solutions to this problem? Because its a easy way to do it with a background tag.
Second;
Paulie_D's solution, i actually don't understand it.. Not advanced enough is guess, tried copying the exact code and change the parameters so it fits in my coding, but didn't work.. Can you help me making it fit my coding?
Simply give your h1 element a background of its own which matches the background of the page.
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
You can then space the line apart from the h1 element by introducing some right padding (which will extend the background past the end of the text):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
Your div titleBar is around the h1 title, I don't think using inline-block will solve this.
You should just wrap all around a div :
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
and your css like this :
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
You can get the same kind of style. But the thing, they used some background color around h1 tag to avoid to show the stripped line(used as a background for titlebar). If you are ok with the effect do the following. Add your css like below and check the jsfiddle below.
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
Jsfiddle link below..
http://jsfiddle.net/vapnF/
A pseudo element will work although it does require an additional span but you can dispense with the image if required.
Codepen.io Demo
HTML
<h1 class="left"><span>Some Text</span></h1>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
h1 > span {
diaplay:inline-block;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 50%;
height: 1px;
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
This is more complicated than it should be, but I'm having trouble displaying an input width of literally 100% of within its div.
Example here:
http://jsfiddle.net/aml90/mfdtk/
I'm using Twitter Bootstrap. I want the inputs to be 100% of the width of the span6 classes, like the blue highlights:
Despite the lack of CSS, I have tried many things -- just didn't put the non-working CSS on there.
You will need to resize the windows, like this:
well it have to be something like this LINK
.input-prepend{
width:100%;
}
.input-prepend input{
width:95%;
}
.span6 .input-prepend {
padding-left:28px;
display:block;
}
.span6 .input-prepend .add-on {
float:left;
margin-left:-28px;
}
.span6 .input-prepend input {
width:100% !important;
}
this will put the add-on to the left side, and let the input take up remaining space
JSFiddle
Patching Bootstrap in such a way is a bit tricky, since there can be different "side effects". Maybe something along those lines will do the trick for you:
.span6 { width: 100% !important; margin-left: 0 !important }
.span6 input { width: 92%; }
.input-prepend { display: block; }
Play around with overriding these CSS directives and test you layout with it. Good luck!
http://jsfiddle.net/Yuv3H/
I am implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.
Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}
Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.
Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.
I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/
For example here http://jsfiddle.net/jitendravyas/5Wqn4/1/
I want to take <h1> over red area. How to make is possible without using image and another added more element.
using border is not necessary I just want background like this.
Without using any extra markup, there's a couple of things you could do.
Apply a negative top margin on the h1:
h1{margin-top:-150px;}
http://jsfiddle.net/5Wqn4/2/
Position the h1 absolutely:
h1{
position:absolute;
top:50px;
left: 50px;
}
http://jsfiddle.net/5Wqn4/3/
Without your body border:
Without using the border you've added to the body you can simply style the h1 as you require:
body {background:yellow;margin:0;padding:0;}
h1{
background-color:red;
margin:0;
height:150px;
}
http://jsfiddle.net/5Wqn4/5/
UPDATE
Further to your comments below, here's a sample that probably matches more what you need:
http://jsfiddle.net/SbGDQ/
You can use this CSS rule:
h1 {
border-top: 20px solid red;
display: block;
}
body {background: yellow;padding: 0px; margin: 0px;}
h1{background: red;line-height: 10em;margin: 0px;}