?Put images in one circle?

#1

Hellow! im new at this...
Many "html & css pages" have awsome designs, one of them are Images in a circle..

The images are common square... How Can i put neatly a image in it?:frowning:

An example of my Code~~
i want to put an image in the "div"(division), that its goinf to be a circle.

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<title>My social web, example..</title>
	</head>
	<body>
		<div>      </div>
	</body>
</html>

in the CSS Page i put:

div {
        display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius:100%;
	border:2px solid #008000;}

i want to put this image in the circle, nicely, like trimming image alike a circle in the circle...

<a href="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg"</a>

How can i do it?
Thanks!

#2

@ricardovm
Try it with

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css"/>
<style>
img {
        display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius:50%;
	border:2px solid #008000;}

</style>
		<title>My social web, example..</title>
	</head>
	<body>
		<div>
          <img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />

		</div>
	</body>
</html>
Images not in Circles
#3

Woow! Thanks men
But in the case that i want not all images to be circle, what shall i do?

the 'img' under the <style> establish that all images Will be circle..

Now what?
How can i do it?
Thanks Alot for your help.

#4

@ricardovm
In HTML you can expand the HTML-Tag
with so-called attributes

From
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
we choose

  • class Global attribute Often used with CSS to style elements with common properties.
    • If we want to =select= such a HTML-Element
      we prepend the used class-name with a dot _( like .circle_img ) 

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css"/>
<style>
img {
        display: inline-block;
	margin-left: 5px;
	width:100px;
	height:100px;
	border-radius: 10%;
	border:2px solid #008000;}
.circle_img {
	border-radius:50%;}
</style>
		<title>My social web, example..</title>
	</head>
	<body>
		<div>
          <img class="circle_img"
		  src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
          <img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
          <img class="circle_img"
		  src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />
          <img src="http://www.fhbrundle.co.uk/productimages/428115G/titled/elefant-grating-panel-1000-x-1500mm-15-x-30mm-mesh-25-x-2mm-bearer-bars.jpg" />

		</div>
	</body>
</html>

I would suggest you do following course
1. https://www.codecademy.com/learn/web

= = = = = = = = = = = = = = = = = = = = = = = = = = = = =

  • HTML & CSS -Course
    • HTML Tags and the syntax
    • style / class / id attributes
    • google search
    • html [your question] site:developer.mozilla.org
    • html [your question] site:stackoverflow.com
  • CSS selectors
  • CSS properties and there associated Value's
    • css [your question] site:developer.mozilla.org
    • [your question] getbootstrap.com
#5

Thank you very much sir :relieved:
Greetings!

#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.