1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Make profile information div

Discussion in 'CSS' started by black_smurf, Feb 10, 2016.

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

    Attached Files:

    Solved! View solution.
    black_smurf, Feb 10, 2016 IP
  2. Matthew Sayle

    Matthew Sayle Prominent Member

    Messages:
    3,325
    Likes Received:
    464
    Best Answers:
    1
    Trophy Points:
    385
    #2
    Uh oh, you said the 'B' word.

    wait for it....
     
    Matthew Sayle, Feb 10, 2016 IP
    Phil S likes this.
  3. black_smurf

    black_smurf Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Maybe somebody can give suggestion how to fit image image into div part and make image top left part border radius as in div.
     
    black_smurf, Feb 10, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    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.
     
    qwikad.com, Feb 10, 2016 IP
  5. black_smurf

    black_smurf Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thank for YOUR help.
     
    black_smurf, Feb 10, 2016 IP
  6. #6
    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.
     
    deathshadow, Feb 10, 2016 IP
    Matthew Sayle likes this.
  7. black_smurf

    black_smurf Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Thank guys all of YOU are professional in your work )))) .
     
    black_smurf, Feb 10, 2016 IP