I have this code :
<div class="footer_bar_row_desc_richedi">
<a class="myText" href="#">My Text</a>
<div class="myDiv">
 
</div>
</div>
.myText
{
text-transform:uppercase;
font-weight:bold;
color:#b90e1d;
text-decoration:none;
float:left;
font-size:12px;
padding-top: 1px;
text-align:right;
}
.myDiv
{
float:right;
width:25px;
padding-right:5px;
text-align:right;
margin-bottom:3px;
background:red;
}
and I'd like to put the text on the link to the right, near (on the left) of the red div. Seems that attribute text-align:right; doesnt works. Any Idea?
You need to give your .mytext div a width. It is collapsing to the exact width of your text at the moment which means that right aligning the text looks as if it is doing nothing...
See
http://jsfiddle.net/hS3JA/
by default the A tag has inline display style (fit container to contents size). you must set display:block; so the attributes width, height, text-align will affect the object
try this:
<div class="footer_bar_row_desc_richedi">
<div class="myDiv">
 
</div>
<a class="myText" href="#">My Text</a>
</div>
.myText
{
text-transform:uppercase;
font-weight:bold;
color:#b90e1d;
text-decoration:none;
float:right;
font-size:12px;
padding-top: 1px;
/*text-align:right;*/
}
.myDiv
{
float:right;
width:25px;
padding-right:5px;
text-align:right;
margin-bottom:3px;
background:red;
}
text-align: right will only align the text to the right inside its own element. Since a is an inline element, it never takes up more width than it needs, and text-align is rendered useless.
Try putting display: inline-block in .myText { } and give it a width.
I had the same problem. I solved it by encapsulating it in paragraph tag...
<p style="text-align:right;">...link...</p>
Related
In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
I'm trying to create something that looks like this:
so far I have: http://jsfiddle.net/ePse6/
Without using something like: margin-top:-25px;, how can I position the Edit/Delete links to be on the right of the title (the part that says "iPhone" or "Android") and have both the title and links halfway between the borders?
Thanks!
just like most of answers, here i come with text-align:right and float:left .
I reduced code to minimal and plain CSS for your actual structure and to make it clear to you : http://jsfiddle.net/ePse6/7/
ul , a { /* basic reset we need */
padding:0;
margin:0;
color:gray;
text-decoration:none;
}
.mini > ul > li {
display:block;/* reset from list-item */
border-bottom:solid;
text-align:right;
overflow:hidden;/* wraps floatting element within */
}
.mini > ul > li> h3 {
float:left;
margin:0;
}
.mini > ul > li ul,
.mini > ul > li li {
display:inline-block;
}
Why not use something simple and really handy?
I have removed all of your messy code, and have created a new fiddle for you.
http://jsfiddle.net/afzaal_ahmad_zeeshan/ePse6/4/
I have used just a few lines of code, I have used a div and inside that, I have used 2 paragraphs to seperate each of them. Then inside that I used span element to seperate the right and left floating elements.
Using CSS I selected the classes and then styled them to get the desired input!
Here is the code:
<div>
<p>
<span class="left">Android</span><span class="right">Delete Edit</span>
</p>
<p>
<span class="left">iPhone</span><span class="right">Delete Edit</span>
</p>
</div>
CSS is as:
p {
border: 1px solid #333; // border that you wanted!
padding: 20px; // padding all around the element
padding-bottom: 40px; // padding at the bottom of the element
}
.left {
float: left; // making the elements float at the left
}
.right {
float: right; // floating elements at the right side
}
You can go to the fiddle page, and check for the design of the layout now. It was a simple thing. Hope its what you wanted.
This is without the lists. Just some CSS to do the trick: http://jsfiddle.net/Lg96p/
CSS:
.wrap{
width:100%;
border-bottom:solid 1px #666666;
margin-bottom:20px;
padding-bottom:10px;
}
.title{
font:bold 16px arial;
}
.fl{
float:left;
}
.fr{
float:right;
}
.lnk{
color:#6c6c6c;
display:inline-block;
text-align:right;
margin:0 10px 0 0;
text-decoration:none;
font:normal 14px arial;
}
HTML:
<div class="wrap fl">
<div class="title fl">iPhone</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
<div class="wrap fl">
<div class="title fl">Android</div>
<div class="fr"><a class="lnk" href="">Edit</a><a class="lnk" href="">Delete</a></div>
</div>
You should create two columns that fill the parent div. Make them both float:left; and for the right column you can align the text to the right text-align:right; or put two divs in it with float:right; for edit and delete.
Here is my fiddle: http://jsfiddle.net/ePse6/5/
Whatever you put into the columns or how to format it is up to you. But from here you have 2 columns independently next to each other.
If you want multiples of these stacked on top of each other i would change the container to a class and just add multiple of these containers with the columns to keep it tidy and readable. Like in this fiddle: http://jsfiddle.net/ePse6/6/
HTML:
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<a hreft="">Edit</a><a hreft="">Delete</a>
</div>
</div>
<div class='container'>
<div class='leftCollumn'>
Iphone
</div>
<div class='rightCollumn'>
<div class="button">Edit</div><div class="button">Delete</div>
</div>
</div>
CSS:
.container
{
width:600px;
margin:auto;
}
.leftCollumn
{
float:left;
width:400px;
background-color:#999;
}
.rightCollumn
{
float:left;
width:100px;
text-align:right;
background-color:#CCC;
}
.rightCollumn a
{
margin-left:10px;
margin-right:5px;
}
.button
{
margin-left:10px;
margin-right:5px;
background-color:#000;
color:#FFF;
float:right;
}
I am trying to make a list with square bullets in different colors with square size independant of the font size.
I need to use font sizes in em or %.
That's my best try so far: http://jsfiddle.net/3GMjp/29/
<ul>
<li>
<div>
<span class='li_box green'></span>
<span>Element 1</span>
</div>
</li>
<li>
<div>
<span class='li_box red'></span>
<span>Element 2</span>
</div>
</li>
<li>
<div>
<span class='li_box blue'></span>
<span>Element 3</span>
</div>
</li>
<ul>
css:
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
.li_box {
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
Could someone help me to center the boxes without adding px-measures?
Any working solution (would be appreciated)!
See I have done modification in the CSS and HTML :
Please see URL : http://jsfiddle.net/3GMjp/33/
HTML code:
<li>
<div>
<span class='li_box green'></span>
<span class='spn'>Element 1</span>
</div>
</li>
CSS changes :
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
li div {
display:table;
}
.spn{
display:table-cell;
}
.li_box {
display:table-cell;
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
I've updated your fiddle here.
If you float an element, it will become a block element, and thus vertical align won't work. The span with the text, unless floated as well, will wrap to the next line.
Inline block seems to work just fine:
.li_box {
display: inline-block;
width:10px;
height:10px;
margin-right:10px;
}
If you're simply looking to center the content of the divs, this should be all you need:
div { text-align: center; }
try to use this:
li {
...
text-align:center;
}
Adding margin top to .li_box will fix your issue.
.li_box {
...
margin-top: 1%;
}
I have a link that I've tried to center using text-align:center and display:inline-block but it appears to be slightly off center. I've included pics and my code down below. Any help would be great, Thanks! The that is giving me trouble is under the class "button"
pic:
http://imgur.com/eqOUI3q
HTML:
<div class="headerContent">
<nav>
<ul class="navDown">
<li>Intro</li>
<li>Wind</li>
<li>Solar</li>
<li>Nuclear</li>
<li>End</li>
</ul>
<p class="menu"></p>
</nav>
Scroll
Scroll
<h1 class="title bigTitle">Going Green.</h1>
<p class="headerText">
A change is coming- and that change will be making the switch to green forms of energy. If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change. <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
</p>
<p class= "noElechouse"></p>
<div class="select">
<a class="button" href="links/calculator.html">Find Now</a>
</div>
</div>
CSS:
.headerContent {
position:relative;
width:55%;
margin:auto;
height:100%;
text-align:center;
}
.title {
font-family: 'Oxygen', sans-serif;
font-weight:700;
color:white;
font-size:90px;
padding-bottom:15px;
padding-top:15px;
}
.headerText {
position:absolute;
bottom:35%;
font-family: 'Oxygen', sans-serif;
font-weight:400;
font-size:18px;
line-height:27px;
width:90%;
margin:auto;
display:block;
left:0;
right:0;
}
.select {
text-align:center;
}
.button {
position:absolute;
display:inline-block;
font-family: 'Oxygen', sans-serif;
font-weight:normal;
font-size:30px;
color:white;
bottom:10px;
text-decoration:none;
padding: 10px 20px;
}
I could completely center it when using
nav ul{
padding: 0;
}
Your main issue is with the usage of inline-block, which actually adds about 4px worth of space to the left. To remove this, either add -4px to your margins for the element, or as brouxhaha suggested, you can set the font-size to zero for the parent, and then reset it to whatever value you desire for the .button elements.
If you want more information regarding the inline-block issue, check this question I answered a few months ago: CSS Inline-block Dimension Discrepancies
display: inline-block adds extra white-space to elements. There are some fixes for this (http://css-tricks.com/fighting-the-space-between-inline-block-elements/). I would recommend the "Set font size to 0 on parent" option for you since you don't have multiple items next to each other and you already have a font-size set on .button.
.select {
font-size: 0;
}
You also have position: absolute set on .button. Remove that as well. If you actually need it positioned absolutely, I would recommend positioning the containing div.
Here's a Demo
OR you could just remove display: inline-block from .button.
My first square is made with div tags and the second one is with ID which I named #blacksquare2. The second square which is #blacksquare2 seems to always keep aligning at the bottom with my first square and can't bring it up to the page.Also the words 'i'm lovin' it' seem to be separate from each other. If it helps, I'm trying to achieve something like the McDonald's Website, just for practice.
CSS:
div{
height:90px;
width:96px;
background-color:#CC0000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#blacksquare2{
height:25px;
width:200px;
background-color:#000000;
text-align:left;
margin:1px 10px 10px 10px
}
#blacksquare2 a{
color:#E6E600;
font-size:11px;
font-family:Arial;
margin:25px
}
span{
font-size:50px;
text-decoration:none;
font-family:Arial;
color:#E6E600;
font-weight:Arial;
margin-left:10px;
}
a{
text-decoration:none;
font-size:13px;
margin-right:10px;
color:white;
font-family:Arial bold;
}
l{
font-size:8px
}
body{
margin-top:0px
}
HTML:
<!DOCTYPE html>
<head>
<title>Home :: McDonalds.com</title>
<link rel="stylesheet"; type="text/css"; href="McDonald'sPrac.css">
</head>
<body>
<div>
<span>M</span>i'm lovin' it<l>™</l>
</div>
<div id="blacksquare2">
<a href="http://www.mcdonalds.com/us/en/home.html#">Home<a>
</div>
</body>
</html>
Element div takes up all the available horizontal space by default.
You can use span instead of div for the first div. Also, setting
display: inline;
in css will have the same effect.
For the text 'i'm lovin it' to be aligned properly you should not give any width for the div.
div is a block element and so will have the property to take the entire block.
Try giving div{display:inline;} in your css.