Make profile information div

Hi everyone. I need to make profile div with bootsrap or css.

 

Uh oh, you said the 'B' word.

wait for it....

 

Maybe somebody can give suggestion how to fit image image into div part and make image top left part border radius as in div.

 

I guess, something like this may work. I really didn't take time to make it all perfect. You'll have to add more stuff on your own (like that yellow container / star rating):

http://jsfiddle.net/dChUR/1536/

You may also want to change px to em.

 

Thank for YOUR help.

 

Who? Huh? What?

Probably better we don't go there, before SOMEBODY starts ranting and raving about finding a stick to scrape the bootcrap off with before smearing it all over a website's carpets.

Generally speaking, there are a good number of things WRONG with what the OP has there. First off, a perfect height design; which means what happens when the name is so big it needs to word-wrap? How is it going to handle dynamic (aka em) fonts. What is the information? What would be the appropriate semantic markup you should be creating before even THINKING about what it looks like? Since you mentioned bootcrap, one would assume you want it to be responsive something some goofy picture based design idea is an uphill fight to implement. What is it going to do when the content is too tall to have the image stretch to the perfect height?

The first step would be to figure out what the content IS. The picture most certainly is content, so that gets a IMG tag. Given the nature of the content, the semantic markup -- aka the first step, should PROBABLY go something like this:

<div class="user">
	<img src="images/avatar.png" alt="Picture of Joe Sixpack">
	<h2>Joe Sixpack</h2>
	<div class="vehicle">Fnord Poontang</div>
	<dl>
		<dt>Time</dt>
		<dd>5:00 PM</dd>
		<dt>Distance:</dt>
		<dd>15 Miles</dd>
	</dl>
	<div class="rating">5 Stars</div>
	<div class="location">East Arseend</div>
<!-- .user --></div>

Code (markup):

You want to write semantic or as close to semantic markup as possible FIRST so you are saying what the data is -- for search, for non visual user-agents and so forth -- BEFORE you even THINK about what you want it to look like.

The rating system would then get some appearance "trickery" applied to it, and I'd probably have a extra DIV wrapping both rating and location thusly by the time style is going into it:

	<div class="extras">
		<div class="rating">
			5 Stars
			<div><span><i style="width:80%"></i></span></div>
		</div>
		<div class="location">East Arseend</div>
	</div>

Code (markup):

One of the FEW times you'd EVER see me use the style attribute.

The rest of the style belongs in an external stylesheet, which would likely go something like:

.user,
.user dl,
.user .extra {
	/* float wrapping */
	overflow:hidden;
	/*
		zoom trips haslayout, wrapping floats and margins in legacy IE.
		remove if you give a shit about IE6/earlier
	*/
	zoom:1; 
}
	
.user {
	max-width:24em;
	min-width:12em; /* adjust as needed */
	background:#FFF;
	-webkit-border-radius:1em;
	border-radius:1em;
}

.user img,
.user .rating {
	position:relative;
	float:left;
	width:8em;
	min-width:64px;
}

.user img {
	-webkit-border-radius:1em 0 0 0;
	border-radius:1em 0 0 0;
}

.user h2 {
	padding:0.66em;
	font:bold 150%/120% arial,helvetica,sans-serif;
}

.user .vehicle {
	padding:0 0.8em 0.8em;
	font:normal 125%/120% arial,helvetica,sans-serif;
	color:#666; /* do NOT go lighter than this on WHITE background!!! */
}

.user dt {
	clear:both;
	float:left;
	font:bold 100%/200% arial,helvetica,sans-serif;
}

.user dd {
	font:bold 150%/133%
	color:#970; /* do NOT go lighter than this on WHITE background!!! */
}

.user .extra {
	clear:both;
	text-align:center;
	line-height:2em;
	background:#333;
	color:#FF0;
	-webkit-border-radius:0 0 1em 1em;
	border-radius:0 0 1em 1em;
}

.user .rating div {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:2em;
	background:#333; /* hides text */
}

.user .rating span,
.user .rating i {
	display:inline-block;
	height:16px;
	background:url(images/stars.png) 0 0 repeat-x;
}

.user .rating span {
	width:64px;
}

.user .rating i {
	background-position:0 -16px;
}

.user .location {
	background:#970;
	color:#FFF;
}

Code (markup):

To better explain those stars, see my article here:
http://www.cutcodedown.com/tutorial/ratingStars

That's generally how I'd go about it -- untested for now as I'm flat on my back on a fistful of meds on the laptop. If I get up and around later I'll plunk myself down at the workstation to make a more viable example.

Though again, that image with the perfect height is GREATLY problematic as it means designing content to the layout instead of creating a layout that adapts to the content. One of those things that sure, you can do it in photoshop, doesn't mean it has any damned business on a website... Which is why I'd consider something like a "avatar circle" akin to what Google's materials design is doing.

I don't agree with everything in MD, but there's some damned fine concepts in there as well. Like anything else you have to take what works and ignore the rest.

 

Thank guys all of YOU are professional in your work )))) .