HTML
<div>Test</div>
CSS
div {
text-align: center;
width:200px;
margin-left:20px;
}
I don't want to have the text at center but pushed slightly right/left. Is this possible?
If it's a single line you should be able to do this:
text-indent:1em;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
It is possible. Currently your margin-left property will affect the div and does not specifically target the inner text.
I would do something like the following. If you surround the text in a <p> tag you can offset it to the left or right by using padding.
div {
text-align: center;
width:200px;
background:blue;
}
div p{
padding-left:30px;
}
<div>
<p>Test</p>
</div>
If you use padding on one side, it will offset the text visually by whatever you set it to. What you have listed would work, as would using padding instead of a margin, but it depends on what the site looks like visually.
Related
I have a very normal div and inside I have some text. the div is styles with test-align:center;and have a fixed width of 360px. The problem is when I try and enter some text without any spaces between words, the whole document would not break and commit to the div's width, it would just get out of the div's width I set it.
I know that in a real life situation no one would write a document without any spaces between words, but I just want to achieve this.
HTML
<div class="wrapper">SomeDummyTextWithNoSpaceInBetwenn</div>
CSS
width:350px;
display: block;
margin: 10px;
text-align: center;
You can style the way text wraps inside a div with CSS using word-wrap:breakword
div{ width:360px; background:#555; color:#eee }
#withWordWrap{ word-wrap:break-word }
<div id="withoutWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
<br><br>
<div id="withWordWrap">
ThisIsSomeTextWithoutAnySpacesAtallInsideThisDivThisIsSomeTextWithoutAnySpacesAtallInsideThisDiv
</div>
You can use word-wrap: break-word;
I'm trying to achieve something simple and the rules make it non-trivial. Here is my fiddle. It is non-trivial for me to align the elements in a natural way, I think the elements should be on the same row when I make a float:left.
Hx elements have default margins.
The "space" from the top cause by the margin-top property of the H1 element.
Consider using a reset.css file to reset those default values.
Another thing is the line-height property.
In conclusion:
margin-top:0;
line-height: 20px; (choose a value that fits to your needs)
http://jsfiddle.net/ynrmwgt9/4/
I would recommend to wrap your div in a container div. A little bit like bootstrap system.
See the fiddle, and ask me if you have questions about :)
I'm using something like this :
<div class='row'>
<div class='col'>Content 1</div>
<div class='col'>Content 2</div>
</div>
The stylesheet has to specify that rowfill 100% of the width, and your two columns, the half, then 50% each.
.row
{
width:100%;
}
.col
{
width:50%;
float:left;
text-align:center;
}
Text align center is just for make it beautiful
http://jsfiddle.net/ynrmwgt9/2/
Heys guys. I've made a simple sample of a problem that has had me stumped for a long time - the code below has no purpose at all, it just shows the problem in a more legible way.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="teste.css">
</head>
<body>
<div id="bar"></div>
<span>
Palavra
</span>
</body>
</html>
CSS:
#bar {
position: relative;
width: 100%;
height: 7%;
background-color: #5959AB;
color: white;
font-family: "Arial";
font-size: 150%;
font-weight: bold;
}
html, body {
height: 100%;
}
The result is:
So, I tried to make "Palavra" go up by adding a padding-bottom to it:
span {
padding-bottom: 2000px;
}
The result is:
"Palavra" just stays at the same precise position but a vertical scrolling bar appeared. It seems that "Palavra" is pushing down it's bottom part because it just can't go up from where it is.
This problem is appearing for me in so many ways that my mind is already blowing - can someone please help?
You need to give your span display: block
Then use a negative margin-top value
Example
There are 2 good ways to position the span.
You can make it display:block, and use a negative top margin as Lloyd Banks describes. The span needs to change from the default inline element to a block element because the top margin does not work with inline elements, but it does work with block elements.
From W3C "Margin properties specify the width of the margin area of a box. ... These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."
With this technique, you'll need a z-index on the div and span, so the span will be on top of the div, and not slide underneath it. MDN z-index article
JSFiddle Example
#bar {
position:relative;
width:100%;
height:25px;
background-color:#5959AB;
color:white;
font-family:"Arial";
font-size:150%;
font-weight:bold;
z-index:1;
}
span{
position:relative;
display:block;
margin-top:-25px;
z-index:2;
}
The second way is to absolutely position the span so it will be pulled out of the document flow, and placed at the top of its container.
JSFiddle Example
span{
position:absolute;
top:0px;
}
Adding padding to the bottom of the span will increase the size/length of the span by adding space to the bottom only. It will not push the span up from its original location, but it will push elements below it further down the page (because the span is now larger).
When you added 2000px bottom padding to the span, it was over 2000px tall, and was taller than your browser window, thus causing the scrollbar. Adding a background color to your element is a good way to see how padding and sizing work.
Here's a good detailed article from W3C on the box model including margins and padding http://www.w3.org/TR/CSS21/box.html#box-margin-area
And here is an easy article with a "Try it yourself" example: http://www.w3schools.com/css/css_boxmodel.asp
You should rather write 'Palavra' in the div itself.
<div id="bar">
<span>
Palavra
</span>
</div>
Once you close the tag the will start from the very next line.
Moreover, If you want to take the content upward you have to work with the padding-top not the bottom one ! But, this will not help you taking your content into the as starts after the .
By adding padding-bottom you are increasing the size of the CSS box as per the Box model which is worthless here!
HTML
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>normal</p>
</div>
<div class="menu">
<p>Why does this div stays at the top</p>
</div>
CSS
.menu{
width:120px;
background-color:red;
display:inline-block;
height:400px;
}
http://jsfiddle.net/jezVt/
I have four divs aligned next to each other using inline-block. When I enter text inside the div using p tag, the div with two lines stays at the top while the other three divs(has just one line text) are aligned properly.
Help please..
add you code vertical-align:top; demo
The reason is that just like every inline element, your .menu elements have the default value baseline for their vertical-align property. This means that when the browser calculates layout for the .menu elements that appear side-by-side, each element is positioned so that the baseline of their contents is vertically aligned with that of the others.
In this specific case, this means that the baseline of last line of text in each .menu is aligned with that of the others. You will notice that by adding more text and making it to occupy three or more lines, the element that contains this text is going to be "pulled upwards" more and more in relation to the others.
Finally, as everyone has said using vertical-align: top lets the browser know that you want the divs to be aligned with respect to the top of their content, which produces the desired result.
write vertical-align:top; in css:http://jsfiddle.net/aashi/jezVt/1/
From my first look, is that you have to much text in the fourth column.
But use "vertical-align: top;" as the two previous answers.
Why do you want to make divs as inline-block. When div is a block level element you can use that property itself.
[http://jsfiddle.net/jezVt/12/][1]
Alternatively you can try:
.menu{
width:120px;
background-color:red;
display:inline-block;
height:400px;
float:left;
margin: 2px;
}
I want to create a header with a few words aligned to the far left of the header div and a few words aligned to the far right. I initially did this by creating spans (.headerLeft and .headerRight) and adjusting the alignment for the portions I wanted aligned. However, this creates problems if I want a background-color for my header div. Is the best practice solution here to simply add a little inline CSS styling, or is there a better way?
My Code (example)
HTML
<div class="header">
<span class="headerLeft">Welcome to .</span>
<span class="headerRight">Login | Register</span>
</div>
CSS
.header {
width:100%
position:fixed;
top:0;
margin-top:0;
background-color:red;
text-color:#C14000;
}
.headerLeft {
float:left;
text-align:left;
}
.headerRight {
float:right;
text-align:right;
}
#header {
overflow: hidden;
}
This code will fix your problem. The height of #header will automatically take the height from the tallest element inside #header.
Another way would be to manually set the height for #header.
You don't need to style sth inline :)
You need to set the overflow attribute for the header class to force it to wrap around the inner spans. see http://jsfiddle.net/PsychegoPro/rnDT8/
You need to clear the floats in order for the div to have actual height.
This can be achieved by using clearfix. What is a clearfix?