Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Smallman
4,182 PointsNeed help with my site!
Take a look at this link, (http://brothersindesign.com) there are red and blue boxes, in each box I will be showcasing my graphic design work. I want the boxes to be flush with the edge of the browser window. The problem I'm having is when you resize the browser the li's separate from the other li's, coursing the white background to show thought the gaps. Is there any way I can fix this.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>mock</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
</script>
</head>
<body>
<div class="head">
<ul class="nav">
<li><a href="#">Work</a></li>
<li>-</li>
<li><a href="#">Journal</a></li>
<li>-</li>
<li><a href="#">About</a></li>
<li>-</li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--
--><div class="work">
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
<ul>
<li><span>
<div class="view">
<img src="img/one.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div>
</span></li><!--
--><li><span>
<div class="view">
<img src="img/two.jpg" />
<div class="mask">
<h2>Title</h2>
<a href="#" class="info">Read More</a>
</div>
</div></span></li>
</ul>
</div>
</body>
</html>
CSS:
img {
width: 100%;
height: auto;
}
.head{
width:100%;
height:2em;
background-color:#2b2b2b;
position:relative;
}
.nav{
float:right;
margin-right:10em;
margin-top:0.40em;
}
.head .nav li{
display:inline-block;
color:#ffffff;
}
.head .nav li a{
color:#ffffff;
text-decoration:none;
text-align:center;
font-family: 'Oxygen', sans-serif;
font-size:0.90em;
}
.head .nav li a:hover{
border-bottom:1px #ffffff solid;
}
.work{
position:absolute;
}
ul {
margin:0; /*CSS reset*/
padding:0;/*CSS reset*/
}
li{
display:table-cell;
margin:0;
padding:0;
}
.view {
width: 100%;
height: auto;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.view .mask, .view .content {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view h2 {
text-transform: uppercase;
color: black;
font-family: 'Oxygen', sans-serif;
text-align: center;
position: relative;
font-size: 17px;
margin: 20px 0 0 0
}
.view a.info {
font-family: 'JuliusSansOne', sans-serif;
font-size:15px;
color:#2b2b2b;
position:relative;
top:2em;
}
.view a.info:hover {
color:blue;
}
.view img {
transition: all 0.2s linear;
}
.view .mask {
opacity: 0;
background-color: yellow;
transition: all 0.4s ease-in-out;
}
.view h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view:hover img {
transform: scale(1.1);
}
.view:hover .mask {
opacity: 1;
}
.view:hover h2,
.view:hover p,
.view:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view:hover a.info {
transition-delay: 0.2s;
}
2 Answers
Chris Dziewa
17,781 PointsNot sure what you mean. The li's are flush to the sides of the browser. There are white spaces vertically where you have the titles. Is that the white space you are referring to?
John Locke
15,479 PointsYou might have to add ul { display: table; } li { border-collapse: collapse; }
Adam Smallman
4,182 PointsThanks for your suggestion and help. I have just tried that and it didn't do anything
Adam Smallman
4,182 PointsAdam Smallman
4,182 Pointsyes thats what I'm referring to. When you shrink the browser with your mouse the li's break apart from the other li's