I am creating a div for meta data that has a line going through the back of it and for some reason, space is being added to the beginning of the line and I'm not sure why.
Here is the CSS:
.mline {
border-top: 1px solid #E7E7E7;
height: 0px;
margin: 20px 0 20px 0;
text-align: center;
}
.mline > div {
background-color: #FFFFFF;
line-height: 30px;
padding: 0 5px 0 5px;
position: relative;
text-transform: lowercase;
top: -16px;
}
.mline * {
display: inline-block;
}
.mline h1 {
font-size: 12px;
font-weight: normal;
}
.info {
line-height: 16px;
}
.info li:after {
content:" \2022 ";
}
.info li:last-child:after {
content:"";
}
.liked, .like:hover {
color: red !important;
}
And here's the HTML:
<section>
<div class="mline">
<div>
<ul class="info">
<li>3/5/13</li>
<li>21 notes</li>
<li>reblog</li>
</ul>
</div>
</div>
</section>
You can see the error on my site here: http://nellyswritingroom.tumblr.com/
And in this jsfiddle: http://jsfiddle.net/xrVh4/1/
I'm not sure what's going on because it's definitely not margins or padding. Any help would be greatly appreciated!
In the jsfiddle example, I assume left padding is being added by default to the ul.info element.
The site, however, has the following lines in newstyle.css:
ul, ol {
margin-left: 2em;
}
If you don't want any margins or padding, you can clear them with:
.info {
line-height: 16px; // already there - I'm not adding this
margin: 0;
padding: 0;
}
Example
It seems that it is, in fact, padding, on the ul element; adding the following CSS declaration removes that space:
.info {
padding-left: 0;
/* other stuff unchanged */
}
JS Fiddle demo.
The line is the border-top you have applied. The reason it all can't be seen is because you have covered it with a negative top with the child element, that has a bg color fff
Related
This a simple sign up formed I've made my school project and for one to sign up is to choose their roles. There's not much to this but I can't seem to figure how to fix this border problem under the anchor? How do I make it so that the space at the top is equivalent to the bottom as well?
enter image description here
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
top: 150px;
width: 99%;
text-align: center;
font-size: 18px;
}
.box {
margin: auto;
border: 1px solid #ccc;
width: 30%;
padding: 15px;
}
a {
background-color: #333;
text-decoration: none;
display: block inline;
color: white;
padding: 14px 20px;
margin: 8px 0px;
border: none;
cursor: pointer;
width: 100%;
opacity: 1.5;
}
a:hover {
background-color: #ddd;
color: black;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
<div class="center">
<div class="header">
<h2>WELCOME TO SMK USJ 12<br/> ENGLISH QUIZ</h2>
</div>
<form action="role.php" method="post">
<div class="box">
<h3>Choose your role<br/> You are a...</h3>
Teacher</button>
Student
</div>
</div>
You have a typo with the display property on the a tags. I think you meant to use inline-block instead of block inline?
a {
/* ... */
display: inline-block;
/* ... */
}
The correct solution (in my opinion) would be to change your markup a bit, employ a wrapping container for the buttons and then apply the proper styles to that container. However, without changing your markup - you can still achieve what you are looking for, by adding some line-height to your buttons. Something like:
.box a{
line-height: 5em;
}
Should put you in the ball-park of what you are trying to achieve.
Fiddle here: https://jsfiddle.net/sgbotsford/d52zyp0t/72/
Where does the extra first line indent come from in the <li> using => :before content?
Here's the problem. Circumstances beyond my control put paragraph tags inside list elements. When I use a :before, with a negative left, it works -- it sits out in the margin just like I want. But the text-indent is increased where I've used the :before. Where does this extra indent come from?
The desired behaviour is to have paragraphs and list items to be styled identically, except for the => floating off the left margin.
I'm sure I can eventually experiment enough to hack a solution, but right now I am trying to understand this behaviour in terms of the box model.
One answer suggested removing the text-indent tag from <p> This results in a flush <p> and a smaller indent on <li>
HTML
<html>
<head>
</head>
<body>
<div class=content>
<p>This is a paragraph. It has several sentences. It goes on and on and on and on. It has several sentences. It goes on and on and on and on. </p>
<ul class="c">
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</p></li>
<li><p>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</p></li>
</ul>
<ul class="b">
<li><p>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </p></li>
<li><p>This is a list element that is long enough to wrap, I think.</p></li>
</ul>
</div>
</body>
</html>
CSS
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-indent: 1rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -2.5rem;
}
Hi Can you please check it's really helpfull for you I just Remove p
tag text-indent and change ul.b li p::before left position Add
text-indent in ul.b li p element
body {
text-align: justify;
hyphens: auto;
margin-left: 3rem;
}
.content {
width: 40rem;
background-color: yellow;
}
p {
width: 15rem;
margin: auto;
margin-top: 0.6rem;
background-color: lightgreen;
padding: 0;
font-style: normal;
font-size: 1.25rem;
line-height: 1.4rem;
text-align: justify;
hyphens: auto;
word-break: break-word;
padding: 5px;
}
ul {
list-style-type: none;
margin: 1rem;
padding: 0;
}
ul.b li p::before {
content: "=>";
font-weight: bold;
position: relative;
left: -10px;
}
ul.b li p {
text-indent: -22px;
}
.bluetable {
background-color: #9FF;
border: 2px solid black;
}
td {
margin: 14rem;
border: 1px dashed green;
}
HTML and CSS below. Div id "black" seems to be pushing a space between itself and the "brown" div above it. When I remove the "black" div, the excess space disappears. I have all margins and padding at zero. Can't sort out what's causing this. ANy suggestions are appreciated.
html {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
margin: 0;
padding: 0;
text-align: center;
font-family: raleway;
font-style: normal;
font-weight: 400;
color: #000000;
}
#greyWrapper {
background-color: #303030;
margin: 0;
padding: 0;
width: 100%;
color: #FFFFFF;
height: auto;
}
#Brown {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
background-color: #644015;
}
#Brown ul {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
font-size: 0.7em;
margin: 0;
padding: 0;
}
#Brown ul li {
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#black {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #000000;
height: auto;
}
<div id="greyWrapper">
<div id="Brown">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolios</li>
<li>Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div id="black">
<p>Grab Your Copy Of</p>
<p>The Premium Quality PSD Template</p>
<p>For free Download</p>
</div>
</div>
Your ps have a margin and this margin extends beyond the limits of the #black div and "push against" the #brown div. There's a good explanation in Why does this CSS margin-top style not work?
You can either:
Put a border around #black. The border will force the div to expand so that it contains all of the margins of the children.
#black {
border: 1px solid black;
}
or
Remove the top margin of the topmost paragraph
#black > p:first-child {
margin-top: 0px;
}
It's the automatic margin-before on the <p> tag that is applied by most browsers. Set:
#black p {
margin: 0
}
and you'll see it go away.
I am fairly new to html/css and I am building a page through tumblr. It already had a template which I have changed and added a few extra elements.
I am stuck as I have no idea where to find the code which moves the body of the page up and so there is a significant gap between the navbar and body of page.
what code would i need?
my webpage: http://goldlazerblog.tumblr.com/
Here is my css for my positioning of my title and nav bar. They are in their right place and the only thing I was thinking was to make my main title larger (image file) ??
.main-title {
margin: 0
auto;
padding: 0;
position: relative;
text-align:center;
top: 0;
}
.main-title li {
display: inline;
padding: 10px;
}
.main-title a {
display:inline-block;
padding: 0px;
}
.nav-bar {
border:NONE solid: NONE;
border-width:1px 0;
list-style:none;
margin: 0px;
padding:0;
text-align:center;
color: #5a5a5a;
font-size: 20px;
font-weight: normal;
}
.nav-bar li {
display: inline;
padding:0px;
margin: 0px;
}
.nav-bar a {
display:inline-block;
padding: 15px;
}
.content {
margin-top: -100px;
}
This should reduce the empty space
You have an empty div with the id of header in there. Perhaps you could set that to display: none if you cannot remove that div.
#header.none-header {
display: none;
}
You have a h1 with nothing in it that is taking up your space.
<div class="blog-title">
<h1></h1>
</div>
You could also remove or hide the parent.
<div id="header" class="none-header none-navigation">
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks