How to style this with css? [closed]
Tags: html,css,html5,css3,web
Problem :
Wondering what is the best way to style this with css? I know float could make it happen but I don't think it is a good idea.
Love Love is a variety of different feelings,
states, and attitudes that ranges from
interpersonal affection to pleasure.
Day A day is a unit of time. In common
usage, it is an interval equal to 24
hours.
.
<li>
<span>Love</span>
<span>Love is a variety of different feelings, states, and attitudes that ranges from interpersonal affection to pleasure.</span>
</li>
<li>
<span>Day</span>
<span>A day is a unit of time. In common usage, it is an interval equal to 24 hours.</span>
</li>
Solution :
By using the wonderous display:table-* options:
li {
display:table-row;
}
li > span {
display:table-cell;
padding:3px;
}
And gives this:
CSS Howto..
I think you're looking for something like this: <div id="news"> <ul id="articles"> <li class="article-item"> <h2>Article 1!</h2> <p>Here is some text for the article.</p> </li> <li class="article-item"> <h2>Article 2!</h2> <p>Here is...
+ won't work as it's the next sibling selector. Your selector div.container.fullscreen + a.button would target the a if that was the next immediate sibling of the div, e.g. div.container.fullscreen...
Try this: css: use the box-shadow to pop the selected image- img{border:solid 1px red; margin:10px;} .selected{ box-shadow:0px 12px 22px 1px #333; } jquery: $('img').click(function(){ $('.selected').removeClass('selected'); // removes the previous selected...
You can use following code: <style> .color { width: 98%; background-color: #E65959; padding:2%; } .shape { height: 100%; width: 96%; border: 2px solid #fff; padding:2%; } .hide-border{ position: relative; background-color:...
CSS was meant to apply global styling with the help of selectors. The descendant selector is what you are looking for: #group img { // code } ...
Seems like the Google+ widget detects the space it's in, and in your case is shrinking from 96px to 80px. If you use JavaScript to render then hide it, instead...
Just override it in your CSS: #viewVoters { overflow: auto !important; /* or 'visible' whatever */ } ...
I was able to resolve using a more specific selector. In my question I had missed out the full selector (*) So; body #a0-lock.a0-theme-default .a0-panel became; body #a0-lock.a0-theme-default .a0-panel *...
this question has some good answers. this one works without counters. Add an inner span with a different color. <ol><li style='color: red;'><span style='color:black;'>test</span></li></ol> ...
You can use the CSS 'starts with' attribute selector (^=) to select all labels with a for attribute that starts with 'red', 'green', etc. input[type="checkbox"] { display: none; } label...
If you're looking to divide your page in columns then you might want to look into bootstrap. It'll be easier to change the number of columns in the future. Coming...
$(document).ready(function () { $(".print").click(function () { $("head").append("<link>"); css = $("head").children(":last"); css.attr({ rel: "stylesheet", type: "text/css", href: "css/ecsPrint.css" }); return false; }); }); Unless this is a Internal Web Application, i...
The CSS declaration is here: #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url('fancybox.png'); } They are using a sprite for the background image...
If you add a max-height of 61px (the height of your sticky wrap) to mysticky-wrap, it should fix the problem. #mysticky-wrap { max-height: 61px !important; } ...
UPDATE Adding code that works: .container { display: -webkit-flex; } .container>div:first-child{ white-space:nowrap; -webkit-order:1; -webkit-flex: 0 1 auto; /*important*/ text-overflow: ellipsis; overflow:hidden; min-width:0; /* new algorithm overrides the width calculation */...
Remove the comma: div { height: 50px; background: blue; transform: scale(1.1,1.1) translate(-50%,-50%); } <div></div> ...
You can change the keyframes to show animation twice. First from 0% to 20% and next from 20% to 40%, then let it stay like that till 100%. Now change...
You could do it with two divs and psuedo elements :before and :after. Working code below .top-bar{ height: 100px; width: 100%; background-color: #55c3ff; } .curved-bottom{ width: 80%; margin: 0 auto;...
try adding this in your css will work: -webkit-tap-highlight-color: rgba(255, 255, 255, 0); have a look here, maybe it's helpful http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html...
You can use custom Meto CSS library which you can download from here github.com Introduction Code Metro (Codeigniter Metro UI CSS) kick starts the development process of the web development...
what you need - is to apply the opacity on the background instead of on the whole element. replace .music css class with the following: .music { background:rgba(255,255,255,0.6); width: 800px;...
With CSS, there's a bunch of options. You could try hr { margin-botton: 0; } Or instead of using an hr, you could add some padding to the menu, and...
Like this demo css h5{ margin:0; padding:0; } ...
You may use this: http://getbootstrap.com/css/#images And a parent element with your desired width and height....
A gradient pattern similar to the one present in the linked website (they use an image as background) can be achieved using the same method as used by Lea Verou....
This can be done using two elements or one element and a pseudo-element: HTML: <div></div> CSS: div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div:before { content:""; display:block; padding:5px; background-color:#f60;...
actually it sounds like you need something like fancybox or lightbox. You can do this yourself by using javascript and css. If you google 'creating modal window' you find a...
You can always write some of the native (JavaScript) code yourself: public class CssAnimation { public static native void registerCssCallback( Element elem, AsyncCallback<Void> callback) /*-{ elem.addEventListener("webkitAnimationEnd", function() {...
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. so, you could use css3pie first check this demo in IE...
Didn't get what you exactly want to do but just keep in mind that $.css("width") returns the CSS width of an element and not the actual width of it. So...