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\$
2
  • 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\$ Commented Jan 7, 2016 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
    Commented Jan 8, 2016 at 9:16

2 Answers 2

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\$
3
  • \$\begingroup\$ your demo-link just shows an empty page. Was that on purpose? \$\endgroup\$
    – JohnDizzle
    Commented Jan 8, 2016 at 6:52
  • \$\begingroup\$ Oh sorry it was a mistake i will update it \$\endgroup\$ Commented Jan 8, 2016 at 6:56
  • 1
    \$\begingroup\$ @JohnDizzle i edited my answer \$\endgroup\$ Commented Jan 8, 2016 at 7:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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