4
\$\begingroup\$

I'm currently trying to display a list of movies with this pill-like elements. The code below works but I guess there is a better way or a way to use elements from the twitter Bootstrap. It also bothers me that the date in the brackets isn't centered with the heading.

Please give me feedback how you like my code. I'm always open for any improvements or ideas :)

.pillLink > h {
	display: inline-block;
}

.pillLink {
	display: inline-block;
	padding-left: 20px;
}

.pill > #cover {
	height: 100px;
	outline: 2px solid white;
}

.pill {
	
	padding: 7px;
	margin: 10px;
	width: 500px;
	background-color: silver;
	-webkit-border-radius: 7px!important;
	-moz-border-radius: 7px!important;
	border-radius: 7px!important;
	border: 1px solid grey
}
<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="pills_style.css">
	</head>
	
	<body>
		<div class="pill">
			<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
			<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Interstellar</h3></a>
			<span>(2014)</span>
		</div>
	</body>
</html>

\$\endgroup\$
  • 1
    \$\begingroup\$ Not really worth an answer, but I've generally found that downloading and hosting your own version of external css or javascript is better than using a version hosted elsewhere - then you aren't reliant on another site's availability, and you can also make your own optimizations and changes (for example removing styles you don't need or want). \$\endgroup\$ – Dannnno Jan 7 '16 at 14:40
  • \$\begingroup\$ @Dannnno Yeah you are right. I guess the performance will also increase if you have storaged css or scripts local. \$\endgroup\$ – JohnDizzle Jan 8 '16 at 9:16
4
\$\begingroup\$

The id attribute must to be unique per document. So I think that using ID for the cover image is wrong under the assumption that you may have many pills per page with covers.

I believe that using a class cover would be better in this case. You can still use .pill > .cover selector in the same way to only select covers under pills.

\$\endgroup\$
2
\$\begingroup\$

demo - Fiddle here

  • You can use the default class of bootstrap col-md-**, col-xs-**, col-sm-** to set width which will help you for responsive designs
  • You can use only one id with value per page
  • vertical alignment the issue was because of the h3 was having margin i removed it and both <a> & <span> tag is inline element you can align it vertically with vertically-align:middle by default the property it set to vertically-align:baseline
\$\endgroup\$
  • \$\begingroup\$ your demo-link just shows an empty page. Was that on purpose? \$\endgroup\$ – JohnDizzle Jan 8 '16 at 6:52
  • \$\begingroup\$ Oh sorry it was a mistake i will update it \$\endgroup\$ – Vitorino fernandes Jan 8 '16 at 6:56
  • 1
    \$\begingroup\$ @JohnDizzle i edited my answer \$\endgroup\$ – Vitorino fernandes Jan 8 '16 at 7:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.