How do I correctly fromat this div's contents?
Tags: html,css
Problem :
I'm trying to improve my basic design "skills". I'm attempting to recreate this: http://i.imgur.com/WbXsILe.png but I don't know how to format it correctly with the right css.
HTML
<div class="container">
<img class="cover" src="book.png" width="45" height="60"/>
<h3>Title of Something</h3>
<p> Cracking the code </p>
<img class="icon" src="icon.png" width="45" height="40"/>
</div>
CSS
.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
}
.cover {
position: absolute;
left: 10px;
top: 5px;
}
.icon {
position: absolute;
right: 10px;
bottom: 10px;
}
#container h3, p {
color: #000;
position: absolute;
left: 60px;
top: 15px;
margin: 5px;
}
Any suggestions?
Solution :
Here is the way to fix the issue, your html working fine only the css need to be edit.
CSS
.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
float:left
}
.cover {
position: absolute;
left: 10px;
top: 5px;
}
.icon {
position: absolute;
right: 10px;
bottom: 10px;
top: 15px
}
h3, p {
color: #000;
position: relative;
left: 60px;
top: 15px;
margin: 5px;
}
CSS Howto..
You would use the border-radius property. However, this is only supported in CSS3, which no browser implements yet. If you only need it to work in a couple browsers you...
This is code is in regards to the link: http://postimg.org/image/no7gsn23z/ <!DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css"> body { background-color: #ddd; } .navBar { margin-left: 25px; margin-right: 25px;...
To target Edge, we can make use of -ms-accelerator, as Edge browser is the only Microsoft browser that supports hardware acceleration: @supports (-ms-accelerator:true) { .selector { color: red; } }...
General css hierarchy (at any nested level) is given by a simple space So: #rt-header .rt-block { /* CSS STYLE */ } ...
The usual solution to this problem is to start off with a transparent border, then give the border a colour on hover. I've updated your fiddle with this technique: http://jsfiddle.net/s3N2h/1/...
do this: (update your #example li css to this) #example li { border-bottom:1px solid #fff; padding:5px; margin:2px; } working fiddle have a look at box model and mdn...
I have solved this by making image double width as it was before and added left: -300px(half width of image). I know this is not the best way to do...
I got it to work by applying the CSS to the <div> tag that contains the condensed form. I gave the <div> tag a class of =test like <div class=test...
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces...
I resolve the problem, this code below: Add the tag RowStyle-CssClass In the CSS add .GvGrid:hover This is the code: <style> .GvGrid:hover { background-color: #FFEB9C; border-top: solid; color:#9C6500; } </style>...
Since you cannot denote which color a second color for the text underline, one strategy is to remove it and use a border. .link-articles { border-bottom: solid 1px blue; text-decoration:...
Inline elements are sensitive to white space in your code. Since you have divs in your example which are normally block level elements, but they're appearing side by side, your...
The pie charts are rendered using path elements, which aren't affected by fill-opacity that you're setting for the .node-inactive class. You also need to set stroke-opacity to see an effect.
It's possbile with just Javascript. But it's also not recommended due to the maintainability issue. var wrapper = document.getElementById("Other_wrapper"); wrapper.style.transition = 'width 1.5s ease'; wrapper.style.width = '70px'; function Focus(sender, eventArgs)...
Updated now so that it sticks above footer. Hope this is what you meant The jQuery: $(window).scroll(function() { if($(window).scrollTop() + $(window).height() > $(document).height() - 200) { $('#button').addClass('fixed_button'); }else{ $('#button').removeClass('fixed_button'); }...
Here is the simple css solution for it http://jsfiddle.net/Mohinder/UJErC/ HTML <ul class="toolgroup"> <li><a href="">Toolgroup</a> <ul> <li><a href="">Toolgroup</a> <li><a href="">Toolgroup</a></li> <li><a...
So instead of single line less comment // DO NOT EDIT THIS FILE use block css-style less comment /* DO NOT EDIT THIS FILE */ ...
why not create the table with javascript??? jsbin demo <div id="tableContainer" > </div> <script> function setTable() { var tableCntr= document.getElementById('tableContainer') ; var tblHTML = "<table>" ; var colors = [['red','blue','green'],['orange',...
Set the float property for each div to be matched, for example left to each, give each of them enough width so that the parent contains them. DEMO...
Close all the link tags with </a>. For example change <td><h6><a href="/mobile">Mobile</h6></td> to <td><h6><a href="/mobile">Mobile</a></h6></td> and the rest of all links...
There are a lot of tools for this task. Here are just some of them: Online http://premailer.dialect.ca http://zurb.com/ink/inliner.php http://inlinestyler.torchboxapps.com/ Grunt https://www.npmjs.com/package/grunt-inline-css Gulp https://www.npmjs.com/package/gulp-inline-css ...
Actually, it was a "problem" in the datatable javascript. After some reading on the site, I found out there's the responsive extension. Once I got it figured out, it worked...
You can use @media queries to get device resolution or screen position and apply css updates based on that. Example Or you can use bootstrap. Here is an example. Change...
These kind of questions are just fun to answer step-by-step. The basics of the solution is to display all list items as inline-block: .calendar > ol > li { display:...
1) The changes being made by the customer are client-side? In that case, kept track of all the users changes, and when the user clicks on "print", send all those...
One possible way is something like this (.hMenu is the outer ul here): .hMenu > li { /* for direct childs (>) of .hMenu that are li-s */ /* inline-block...
Try this: $(".homefeed").prepend(response); change to $(".homefeed").html(response) $("#info").click(function (e) { $("#loadimg").show(); jQuery.ajax({ type: "POST", url: "newinfo.php", dataType:"text", cache: true, success:function(response){ $(".homefeed").html(response); $("#loadimg").hide(); }, }); }); ...
Make a table by using: display: table and table-layout: fixed display: table-cell and display: table-row Use ex as the unit measurement in this case since you have a concern about...
It's not pretty but can be done with multiple selectors: http://jsfiddle.net/r4atjtfx/1/ tr:first-child td:nth-child(4), tr:first-child + tr td[colspan="2"] ~ td[colspan="2"], tr:last-child td:nth-child(3) { color: orange; } But to answer your question...
Why don't you simply use * in placeholder attribute itself? .asterisk::-webkit-input-placeholder { color: #f00; } .asterisk:-moz-placeholder { color: #f00; opacity: 1; } .asterisk::-moz-placeholder { color: #f00; opacity: 1; } .asterisk:-ms-input-placeholder...