How To Get Circle Image Between
Tag Like Tumblr In HTML? [closed]
Tags: javascript,html,css3
Problem :
I used to own a Tumblr blog and I was able to have an image in the middle of the split between where the header image and the body of the page was but now I'm using HTML, how would I do something like that? I've Googled a lot of different things and I can't find anything, someone even tried telling me I could just do:
<hr><img src="http://www.examplelink.com/sampleimage.png" /></hr>
But obviously it didn't work so what I'm looking for (was looking for before this edit) is something like this:
<hr /><img src="http://www.examplelink.com/sampleimage.png" class="A" />
Then the CSS:
.A{position:center;border:solid 3px black;border-radius:100%;}
So that it would make like a circle around the image and place it in the center of the hr.
[Note: THIS HAS ALREADY BEEN SOLVED BY SOMEONE, I JUST HAD TO EDIT THIS BECAUSE IT WAS UNCLEAR. I HOPE IT'S CLEAR NOW!]
Solution :
Basic idea with CSS after
hr.img:after {
content: "";
width: 48px;
height: 48px;
background: url("http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/48x48/sun.rays.small.png") no-repeat;
display: inline-block;
position: absolute;
margin-top: -24px;
margin-left: -24px;
left: 50%;
}
<p>This is some text>/p>
<hr class="img"/>
<p>This is some text>/p>
CSS Howto..
one is NOT what you need as a page refresh will override all the 'memory'. You are most likely looking for localStorage or, if you are using internet explorer prior...
Currently, your left and right sections are being rendered backwards as the right section comes before the left in the HTML that is generated by your PHP page. The left...
You can add a media query to that css class: @media only screen and (min-width: 850px){ .fixed { top: 0%; width: 100%; text-align: center; bottom: auto !important; z-index: 9999; position:fixed...
Demo ... Source HTML <div class="box"> <button type="button" class="delete" ng-click="deleteModel(model)"> <span>×</span> </button> <div class="image"> <img ng-click="selectModel(model)" src="http://nemo-crack.org/uploads/posts/2014-04/1398165049_adobe-410x400.png"...
YOu can create it by using fullPage.js with the option scrollBar:true. Live demo...
(function($) { $.get('/css/foobar/tooltips.css', function(data) { var style = document.createElement('style'), head = document.getElementsByTagName('head')[0] || document.documentElemen; style.type = "text/css"; style.textContent = style.text = data; head.appendChild(style, head.firstChild); }); }(jQuery)); The above code would...
Just add this css. .container span, .container .social { display: inline-block; } ...
Add this to the head tag. <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> For more info check developer.mozilla.org...
I would suggest something like: // Get all files string filepath = Environment.GetFolderPath("Filepath here"); DirectoryInfo d = new DirectoryInfo(filepath); //Handle each file foreach (var file in d.GetFiles("*.html")) // Get all...
for a transition you need 2 values (start/end) that can be divided by steps, numbers. none and block can't and can only switch from one to another, you could eventually...
Not possible. Go into the Ionic.css and Edit it. You can edit it. I checked the Docu for Sass: http://ionicframework.com/docs/cli/sass.html The CSS is placed in this folder: www/lib/ionic/css The better...
try this codePen example: http://codepen.io/pouretrebelle/pen/hypGk .bordered { background-color: #efe6ef; position: relative; margin: 100px auto; height: 5em; width: 25em; } .bordered:before, .bordered:after { content: ''; position: absolute; background-repeat: repeat; z-index: -1;...
I may not be understanding your requirements; however, here is something which might be similar to what you are looking for: http://jsfiddle.net/eGVZx/8/ .message{ background-color: rgb(244, 238, 250); } .topic_div p...
you can use window.getComputedStyle. however, an answer notes that some browsers may not support this, so tread lightly. here's a demo <span class="test" /> <span class="test" /> <span class="test" />...
Use transition property: EG: .button-submit { background: #5ea12b; transition: background 0.5s ease-in-out; } And on hover, change the background color to little darker tone. .button-submit:hover { background: #000; } CHECK...
Actually it works when you call the function with a timeout setTimeout(function(){ window.location.reload(); },1); ...
I created a JSFiddle to show an example of what you could do. All using CSS. I could see multiple ways of accomplishing this using the basic example I provided....
Yes, you should be able to set it's height and width as with any element. However, some browsers do not really take these properties into account. This demo gives an...
Live Demo I added position:relative to #frame. I added width:100%; text-align:center to #overlayedFrameFooter. I changed position:relative to position:absolute on #overlayedFrameFooter. See here for an explanation of why this works....
Fiddle That's a bit tricky because of the table markup. Basically, you give the tr this css: position: relative; Then you position the title absolute to the top left and...
This should do it: #wrap, #content-wrap{min-width:1018px;} Of course, min-width is not supported in IE6. I'd add this to get around it: <!--[if lte IE 6]><style type="text/css">#wrap, #content-wrap{width:1018px;}</style><![endif]--> ...
Do you have styles associated with the buttonEdit id in your CSS? I've just copied in your button to a "Try It Yourself" area on W3Schools, and added my own...
Easy solution here. http://jsbin.com/igizoy/2 Add the ID to each column, and add a class. Then you can can add a handler to get the id of any row....
Hi you can define display table and table-cell in you css properties as like this Css .outer { border: 1px solid black; overflow: scroll-x; display:table; } .x { width: 400px;...
Use the different selector like this, which doesn't include tfoot: .webgrid-table thead td:first-child, .webgrid-table thead th:first-child, .webgrid-table tbody td:first-child, .webgrid-table tbody th:first-child { display: none; } You are also leaving...
create font.css and in style.css @import(font.css) read this for ur second question: http://www.htmldog.com/guides/css/advanced/atrules/...
The body tag has a default margin property. Use the following CSS code to get rid of the default margin: body { margin:0; } ...
Problem is that you only define the function mouse, and only set the event handler, if img.length is > 0. The script is located in the head, and executed before...
It is not easy to understand what you are trying to achieve here without the actual images. I have reproduced your case here: http://jsfiddle.net/gVQ8x/1/ I've just set percentage width here...
Thanks for the suggestions. I tried both but had minor issues with them (just not particularly easy or intuitive for me personally). Instead I sumbled upon Tincr, which I found...