How to correctly align left in CSS?
Tags: html,css
Problem :
I am creating an opening hours section and I would like to align my days on the left side of the table. I tried float: left; but my Monday gets sent a few pixels above. text-align: left; did not work, can anyone suggest a correct way I can align my days?
http://imgur.com/93TMXIp (as you can see my Monday is skewed)
CSS
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.day { float: left; }
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;color:#696969;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.tg .tg-57v2{background-color:#f7f7f7}
HTML
<table class="tg">
<tr>
<th class="tg-57v2"><span class="day">Monday</span></th>
<th class="tg-57v2"> 11:30am-10:00pm</th>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Tuesday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Wednesday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Thursday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Friday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Saturday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Sunday</span></td>
<td class="tg-57v2"> 11:30am-10:00pm</td>
</tr>
</table>
Solution :
Monday is styled as a th (header). If you change it to a td like the other days, it should align.
CSS Howto..
Just specify a minimum width: #header{ min-width: 720px; /* or whatever the size of the content is */ } (and remove the overflow property, it's not needed)...
I want all columns(
You should use the table-layout property here... table { table-layout: fixed; } table td { overflow: hidden; } ...
You could use window.localStorage to save the color information across page loads. <!DOCTYPE html> <html> <head> <title>Cookie</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="" rel="stylesheet" title="main" />...
Managed to come up with the answer myself after having a eureka! moment, and thought I'd share for the good of the community. I used jquery to loop through each...
try the following jquery code: $('.has-feedback a').click(function(){ $(this).css('opacity',1); $('.has-feedback a').not(this).css('opacity',0.4); }); demo: https://jsfiddle.net/xd17xyrm/ or: css: .opacty { opacity:0.4; } js: $('.has-feedback a').not('.has-feedback a:first').addClass('opacty'); $('.has-feedback...
The best solution is more than css, but css-only is possible origin code problem: .radio-toolbar input[type="radio"] { display:none; } Your control is no longer visible and not clickable to user...
Add vertical-align: middle to styles of #my-image img: #my-row{ border:1px solid #ccc; border-width:1px 0; list-style:none; padding:0; text-align:center; background-color: white; } #my-row a{ display:inline-block; padding:10px; color: black;; text-decoration:none; } #my-image img...
You have two thing to do. Divide the header CSS and JS to separate files. Ignore it. Method 01 if your home page load slider and all. So create header...
There's the CSS3 Module: Paged Media, where you could define the margin and other properties yourself. However, I recommend you to convert your resume into a PDF and put it...
You should use Web Part Resources which can be linked or embedded. This article does a good job of explaining how to use them: Best Practices for Managing Web Part...
Use :not: .beigeButton:not(.enabledButton) ...
Are you looking for this: #Nav a{ color: #f2f2f2; text-decoration:none; } #Nav a:hover { color: blue; text-decoration: underline; } ...
<edit> to get li active overflowing over top of its parent, you need to set negative margins too : DEMO updated CSS from original answer (at bottom): .menu-holder{ height: 30px;...
Here you can use <?php echo $this->Html->css(['mycss'],['media' => 'print']); ?> Output will like this html <link rel="stylesheet" href="/myproject/css/mycss.css" media="print"/> ...
Divide the border-color values border-color: red green blue grey; #rec { width: 100px; height: 100px; background: black; border: solid; border-width: 3px; border-color: red green blue grey; } DEMO...
You can set to span looked like h1 and do something like this: code: <html> <head> <style> .img { display: none; } .show:hover + .img { display: block; } <style>...
Put the transform origin outside of the 'card': transform-origin: center 600px; http://codepen.io/moob/pen/rAzdh ...
You can simply give both containers a border and give the right div a margin-left: -1px;. .left { border-right: 1px solid black; } .right { border-left: 1px solid black; margin-left:...
Let me know if I can improve it :) #progressbar { background-color: #999; border-radius: 10px; /* (height of inner div) / 2 + padding */ padding: 0.5px; max-width: 150px; font-size:...
Disclaimer: I'm not sure this can be done in a failsafe way. My method involves fairly modern CSS, so I don't know which email clients it works in. It works...
I've assume you're using https://github.com/seyhunak/twitter-bootstrap-rails gem, did you proper read their documentation? In documentation on github, there are parts of how to include only few parts of css or js....
How about this: .left { float:left; width: 33.3% } .right { float:right; width: 33.3%; text-align: right; } .center{ float: left; width: 33.3%; text-align: center; } DEMO Edit in response to...
You don't need to worry about the HTML entities nor any complex string replacing. All you need is a little CSS: #target { white-space: pre; } and use the .text()...
Change your body to this. body { width: 800px; margin: 15px auto; position: relative; } And your div will be inside the body and have styles similar to this. #login-hover-cont...
What you want is absolute positioning, this takes the element in question and pulls it completely out of normal flow. You then use top,left,right,bottom to position the element absolutely from...
It seems IE needs hints in the fonts to display them correctly. I solved this problem by using fontsquirrel's generator to create new font files. You can check which file...
A real simple solution is to put the banner image behind the parent container and align it right. It doesn't need its own div, and you won't have to crop...
With jQuery - button or element that will stop the video has the attribute class='stopElementClass' $(function(){ $('.stopElementClass').on('click', function(){ $('#video_background').get(0).pause(); } }); Check out https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement...
Remove the padding and margin and borders from your inputs and labels, or make them both less than 50% wide. They can't both fit side-by-side, the box model will make...
Firstly, you create approporiate viewport div: <div class="ui-icon alert-icon"></div> Then you define CSS: .ui-icon { width:16px; height:16px; overflow:hidden; background:url(images/icons.png); } .alert-icon { background-position:0 0; } .warrning-icon { background-position:0 -16px; }...