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
Related
<style>
*{
display:block;
margin:0 auto;
}
#it is no use to show all the css and html code here.
Why *{display:block; margin:0 auto; } in css to display all the css code on the web?
If *{display:block; margin:0 auto; } was deleted on the html,no such error now.
What result in the effect？
Please try the whole html file.
<html>
<meta charset="UTF-8">
<head>
<style>
*{
display:block;
margin:0 auto;
}
body{
width:900px;
height:50px;
border:solid 4px green;
}
#d2{
width:100%;
height:auto;
}
#d21,#d22,#d23{
width:33%;
float:left;
border:1px solid red;
}
select,input{
width:150px;
height:auto;
}
</style>
</head>
<body>
<div id="d2">
<div id="d21">
<select id="id_select" name="s1">
<option>==> please select <==</option>
</select>
</div>
<div id="d22">
<input type="button" value="start" onclick="start()">
</div>
<div id="d23">
<input type="button" value="stop" onclick="stop()">
</div>
</div>
</body>
</html>
<style>...</style> is also HTML element. So by using * selector in CSS you also select <style> element and apply appropriate styling. <style>'s default style is display:none so by applying display:block you actually make it visible.
The * CSS selector selects all elements. This means that it includes the <style> element, as well as the <head> element, which the style tag lives it. Both of these are hidden by default by your browser.
By adding display: block, you are overriding the default display: none for all element, as shown in Chrome Developer Tools screenshot:
Chrome Developer Tools Screenshot
The direct equivalent of this would be to add this to your CSS:
head, style {
display: block;
}
Workaround
In order to force all elements to be displayed block, and centered, you may want to select just the ones that live inside of the <body> tag like so:
body * {
display: block;
margin: 0 auto;
}
* selector won't accept display:block. Every elements in html except <a> <small> <img> and more..... are block elements. So no need to add display:block to * element. Remove the display:block and check the result.
The * selector can also select all elements inside another element, but <a> <small> <span> are elements. So the css syntax become an error.
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/
I have my HTML structure as follows:
<div id="id1">
<h1>my name </h1><h3>myemailid#xyz.com</h3>
</div>
The code automatically brings the <h3> on the next line. However, I want it next to <h1> without any line-change.
CSS:
#id1{
width: 900px;
padding: 30px;
background: #FFF;
text-align:center;
}
#id1 h3{
font-family:Arial;
white-space:nowrap
}
How can I modify to achieve my desired result?
You could use more semantic markup or simply modify the elements with CSS:
#id1 h1, #id1 h3 { display: inline; }
HTML headings behaviours with display: block by default. So they won't share same line with any other relative element.
Set their display to inline-block, and they will render one after the other, just as you expect.
I checked this post (How to style the first and last li with CSS or jQuery?) but am still seeking a suitable IE8(and pre IE8) solution.
I have a row of DIVs that are set to have a padding-right, but in order for the final one to align properly want the final DIV to have zero padding. I've used the .css + .css route before but that doesn't appear to work in IE8 and versions before it.
Any help would be appreciated.
Assuming there's a containing div wrapping all of these, you should be able to do this:
div.container {
background-color: blue;
}
div.container .div-row {
float: left;
padding-right: 5px;
}
div.container .div-row:last-child {
padding-right: 0px;
}
You can give a class to last div and get it working with that class in IE.
<div class="last"></div>
<style>
.last
{
padding-right:0;
}
</style>
You can use something like the following CSS:
.rowofdivs div:last-child {
padding-right: 0;
}
You can user css pseudo-class :last-of-type
This is a CSS3 selector, see quirks mode for a list of whats available to what browsers.
Why don't you add a class="last" to last div in code?
last-child is not available for IE8 and less
If you cannot manually add the "last" class as suggested in other answers, you will have to rely on JavaScript to accomplish this. If you have jQuery, you can do something like this:
$('#parentdiv div:last-child').addClass('last');
Then adjust your stylesheet accordingly:
.last { padding-right: 0 }
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.