I want the div with the id tagline to appear in such a way that there's no gap between the same and the image. How is it made possible?
Here's the fiddle...
http://jsfiddle.net/hxsPz/
This didnt work
#tagline {
margin-top:0;
height: 50px;
background-color: aqua;
}
Image needs to be display:block; and no margin on the p
img {display:block;}
p {margin:0;}
Example fixed fiddle
You have to remove the margin from the p also :
#tagline p { margin-top:0; }
Either use Moob's answer which is block or use this css3 flex. Beware: this is not supported in Safari and IE :
img{display:flex;}
p { margin-top:0; }
fiddle here
I recommend you to use a css reset, many elements has a defult padding and margin. In your case it was the p tag inside of the #tagline div that had padding and margin
#tagline p {
margin: 0;
padding: 0;
}
Working demo (it does not have a css reset, also added a clearfix for your menu)
Always use reset styles
* {
margin: 0;
padding: 0;
}
and the img padding is because of the img display attribute set to inline (by default),and the code below will fix this.
img {
display: block;
}
http://jsfiddle.net/hxsPz/20/
Related
I have used CSS below to remove the title and some padding but there is still padding that I can't seem to remove.
This is my current coding:
.site-info { display: none; }
header.entry-header {
display: none;
}
.page .post-header {
display: none;
}
On Inspect it states
<div id="content" class="site-content" style="padding-top: 2.5em;
Can anyone help me please?
The padding is being inherited from somewhere else. Either default browser settings, or one of your other divs/elements. You can use the id of the div, or the class, in CSS to manually change it like so:
#content, .site-content {
padding-top: 0px;
}
You can try just using the id tag or the class tag to see which one specifically is causing the padding inheritance. Would have to see more code/the site to be sure.
The padding is being set somewhere else content is a common id tag in a stylesheet- you can override it.
<style>
body #content{
padding:0px;
}
</style>
if that doesn't work, this will
<style>
body #content{
padding:0px !important;
}
</style>
<div id="content" class="site-content" style="padding-top: 2.5em;
Aren't you getting paddimg from here? The inline style. Inline elements have higher order than internal or external css
Ok, first off I want you all to know that I have tried using the <span></span> tag (though maybe incorrectly).
Is there something I'm doing wrong with the <span></span> tag? Or is there something I need to do differently altogether?
Here is my current code to create a space without <br></br>:
#beforeImage span {
padding: 40px;
}
<span id="beforeImage">text</span>
2 things to fix:
you were applying the CSS to span of an ID selector, but you were using a span with an ID selector in your HTML.
span won't have padding because it is an inline element by default, so set inline-block or block
Snippet
#beforeImage {
padding: 40px;
display: inline-block; /* or block */
/* demo */
background: red
}
<span id="beforeImage">Foo bar</span>
<span> is by default an inline element and will not be sized nor accept vertical padding without resetting its display to inline-block ( or else but inline).
You might look for:
span{
display:inline-block;
padding: 40px;
}
beside, br could still be used
br {
line-height:3em;
vertical-align:top;/* debug FF/IE */
}
http://codepen.io/anon/pen/GoVdYY
But, do you really need an extra tag, could you not apply a bottom margin or padding to another element ?
Can simply target the Id of the span:
#beforeImage{
display:inline-block;
padding: 40px;
}
Or all spans:
span{
display:inline-block;
padding: 40px;
}
I need a CSS only solution to make pairs of <a> tags inline, but not all in a row. For example, in this JSFiddle http://jsfiddle.net/vLakfsLv/, I want two rows of two black squares.
<div>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
a{
width:100px;
height:100px;
display:inline-block;
margin-right:20px;
background-color:black;
}
Obviously you can do this by wrapping the <a> tags with <div>s but I need a CSS hack. I cannot edit the HTML.
EDIT:
Please don't accomplish this with width because the width is constantly changing.
Why not display:block and float:left to the <a> and a clear:left to the correct nth-child ?
( you didn't say you needed IE* support )
Float everything to the left, make your third <a> tag (using a:nth-child(3)) clear the floats to the left. here's a fiddle
Try this:
a{
float: left;
}
a:nth-child(odd){
clear: both;
}
div {
overflow: hidden; /* Clear float */
}
Demo
you could give them margins, specifically left or rights, and/or give the surrounding div (of the four blocks) a set width. they will adjust to that.
Try this solution:
div {
width: 240px; /* 100 + 20 + 100 + 20 */
font-size: 0; /* To avoid additional space */
}
Demo
You don't need font-size: 0 if you get rid of spaces in between elements:
<div><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--><a></a><!--
--></div>
you can use float like this:
a{
width:100px;
height:100px;
float: left;
margin-right:20px;
margin-bottom: 20px;
background-color:black;
}
a:nth-child(3n){
clear:both;
}
http://jsfiddle.net/vLakfsLv/8/
Any ideas why?
http://jsfiddle.net/FHUb2/
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
}
Edit
Delete
Apart from the reason that text-indent doesn't works on inline elements. another reason is if your element or one of its parent has been set with text-align:right
So make sure your element has been set with text-align:left to fix this.
text-indent does not work on inline elements and <a> is an inline element so you can define display:block or display:inline-block to your <a> tag.
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
display: inline-block;
}
Edit
Delete
<a/> tags are not 'blocks'
add the following:
display: inline-block;
In my case text indent was not working on H1 because of :before pseudo tag I used to correct a fixed header positioning problem
.textpane h1:before, .textpane h2:before, .textpane h3:before {
display:block;
content:"";
height:90px;
margin:-90px 0 0;
}
This applied to H1 elements with negative indent hack showed text on top of the images in FF & Opera
Keep in mind that (if you care) with inline-block the text-indent image replacement technique will fail in IE7. I recently had a heck of a time figuring that one out. I used this technique for IE7 and it works:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
I had same issue, I checked display and text-align. finally I find out.
I was working on rtl design and in the theme the direction changed to rtl.
You can change the container or each element to ltr to fix the issue.
dashboard-edit, .dashboard-delete {
direction: ltr;
}
I want to reimplement the property margin-right in a bloc whitin a content.
this is the content id css:
#content h2 {
margin-right:2px;
}
this is the bloc class css:
.bloc h2 {
margin-right:0px;
}
I want the margin-right of the ".bloc" css fires rather than the "#content" css
Try !important, like this:
.bloc h2
{
margin-right:0px !important;
}
You could try this :
#content .bloc h2
{
margin-right: 0;
}
I'm not sure I understood your question perfectly well, especially the last sentence...