how do I add equal gap on each side of the text with css?
Tags: html,css,text,center
Problem :
I want to change from this http://i.imgur.com/XesXy.png to this http://prntscr.com/o9hfh How do I add the extra gap on both side and squeeze the text together more? basically I want to center the text without useing text-align:center because I like text-align:left better, but if I do left the text will not be in the center anymore.
HTML
<body> <!-- start of the body-->
<ul class="sidemenu">
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">How To Order</a></li>
<li><a href="">Term And Agreement</a></li>
<li><a href="">Shipping Information</a></li>
</ul>
<div id="about-us">
<p><h2>About Us</h2>Lorem ipsum .<br />
Morbi in libero quis quam consequat malesuada..</p>
</div>
</body>
css:
#about-us {
margin: 10px auto;
background-color:#FFF;
height:800px;
width:710px;
left:125px;
position: relative;
padding:0em 0em;
}
#about-us p {
text-align:left;
padding-top: 20px;
}
body {
position:relative;
}
.sidemenu{
position:absolute;
background-color: #fff;
width:240px;
height:780px;
margin-top: 10px;
list-style:none;
text-align:left;
padding-top: 20px;
}
.sidemenu li a{
color:#222222;
padding: 0em 1em;
line-height: 2em;
}
Solution :
Just add padding to the #about_us box while slice its width and height accordingly:
#about_us {
padding:20px 40px;
}
and configure line-height for the p label:
#about_us p {
line-height:40px;
}
CSS Howto..
I don't know if there exists a function for it, but this will do it: $a = <<<EOH <style type="text/css"> .textleft{ .... (your css stuff here).... } </style> Lorem ipsum...
Try body{top:0 !important;} in your css
labels are inline elements. This means they will be displayed, from the page's point of view, just as a "letter" would. In HTML, if you put a letter on each...
Instead of float:left add float:none; display:inline-block; As you have mentioned them to be float:left in input.button == > it appears on left side & display:block in input.button == > it...
Try this .meteor p { background: #000; min-height:inherit; max-height:auto; top: 50px; left: 30px; color: #fff; margin: 0; padding: 2%; position: absolute; text-align: center; word-wrap: break-word; text-shadow: 1px 1px 1px #000;...
Your order of applying styles was wrong. The correct order is: .calendar-table td { border: 1px solid black; } td.calendar-noBorder { border: none; background-color: red; } .calendar-table { border-collapse: collapse;...
I guess what you want is to have class ul.pureCssMenuSelected { //whatever the selection should look like } Then, in each html page you go to, you add that class...
Check the fiddle link here http://jsfiddle.net/VWtLT/2/. Done the following chagnes in your css. ul#nav {/*margin: 0 0 0 200px;*/} ul.drop { position: relative; z-index: 597; float: right; } ...
I know this thread was quite some time but I have something to say as a native Thai. I read lots of Thai web pages everyday and I feel the...
Children of an element with a border-radius will always bleed out of their parent. You have to set the border-radius directly on the elements you want to be rounded: .menu...
Looks like adding grails.resources.rewrite.css = false can solve my problem. Found here.
can't use both classes and id's because I would have to create a unique CSS style for each one Not so. You just write rule-sets which have class selectors...
Every label in p:selectOneMenu whose id contains phrase adaptacionDiscapacidadSelectOne will not be bold: .ui-selectcheckboxmenu-panel[id*="adaptacionDiscapacidadSelectOne"] .ui-selectcheckboxmenu-item label { font-weight:normal !important; } ...
HTML: <div id="entry"> <form> <input id="input" placeholder="Coupon Code"></input> <button id="submit" type="submit">Apply Coupon</button> </form> </div> CSS: input { display: inline; width: 70%; } button { display: inline; width: 20%; } The...
So you want the anchor to be right to the table? Use the CSS-argument "float". <table style="float:left"></table> <tag></tag> http://css.maxdesign.com.au/floatutorial/...
Remove the width and float from the #content css. Set the background color of #wrapper to be whatever color you want the background of #content to be. add display: inline-block;...
Yes and no, you can't add scripts in the html editor and if you are copy-pasting something that has a FORM element, it won't directly work without modification. One possible...
A lot of the really "artsy" sites are produced in another program first, usually Adobe Photoshop or Adobe Illustrator, and then 'sliced' into HTML div's. NetTuts has a handful of...
Using SVG: While using SVG, you could make use of path and polyline elements to draw the required shape. As indicated by Paulie_D in comments, SVG is the better choice...
This is called the yellow fade technique, there is already a question on SO for this: Yellow fade effect with JQuery and here is also some more info on this:...
The reason your code doesn't work is this: setting a z-index won't matter because the select input is a child of the div which has the spinner. This won't work...
Create an XML in drawable folder and put this code in it: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle" > <solid android:color="@android:color/darker_gray" /> <corners...
You may emulate simular behaviour with using checkboxes and sibling selectors. Just try SO snippet: [type="checkbox"] { position: relative; top: -9999px; } label > p { margin: 0; border: 1px...
What you need is this: $('#showUserInfo').fadeToggle("slow"); FIDDLE: https://jsfiddle.net/lmgonzalves/yjhbf9a9/5/ Note: The click event only take one function as argument. Learn more here....
I think the problem comes from what you think you get in aData. When the fnRowCallback callback is called aData is not an object with the key corresponding to the...
Personally I would favour a solution whereby the stylesheet link is conditionally rendered via some logic in the code behind of the page which is triggered by a user selection....
Here's a fiddle Here's the answer to both of your questions. Put the hover on the parent: .show-image:hover img Add the "hide" class on the parent and change the opacity...
You may try to change localStorage to sessionStorage like I have done In this Fiddle. localStorage is meant for longterm use where as sessionStorage is more shortterm. Here is another...
1) Solution for a basic CSS knowledge Based on Css2, fully cross-browser Here is the solution to have only the inner margin, and not applied to the last on the...
You can use positioning and z-index controls such as these: #pic { z-index:100; position: absolute; top:0; left:0; } #pic2 { z-index:999; position: absolute; top:0; left:100px; } By applying these ID's...