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
Gabriel Ward
20,222 PointsControlling border length across the page.
I'm trying to create a single border between two ul's, which I've done. Trouble is, I want to shorten the length of the border across the page, as at the moment it spans the entire.
Here's the html:
<nav>
<ul class="searches">
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
<nav class="finders">
<ul>
<li><a href="gabe.html">Who are we?</a>
</li>
<li><a href-"spsu.html">Sponsors and Supporters</a></li>
<li><a href="tech.html">Technology</a></li>
<li><a href-"con.html">Contribute</a></li>
<li><a href="don.html">Donate</a></li>
<li><a href-"news.html">News</a></li>
</ul>
</nav>
I created a border btween the ul's by using the CSS:
.finders { border-top: 1px solid black; }
How do i shorten the length of the border so it doesn't go across the entire page page?
Thanks
12 Answers
Umar A
4,041 PointsHi Gabriel Ward,
First put everything in a div with a class called container like this,
<div class="container">
<ul class="searches">
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
<ul id="list">
<li><a href="gabe.html">Who are we?</a></li>
</ul>
</div>
We'll use the above code to center the content using CSS
Then, add a div between the two unordered lists and give it and id called "line"
The code should look like this
<div class="container">
<ul class="searches">
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
<div id="line"></div>
<ul id="list">
<li><a href="gabe.html">Who are we?</a></li>
</ul>
</div>
We'll put a top border for the div which will act as a line. Use the following code
.container {
width: 940px;
margin: auto;
}
#line {
width: 500px;
margin: auto;
border-top: 2px solid blue;
}
if you want to change the length of the line, simply change the width property inside #line.
There may be an easier way to do it, but this is how i did it :)
I hope that helped
Stephen O'Connor
22,291 PointsWhat is .finders in your html code? I can't see it in there.
If .finders is another ul then the border will span the width of that ul. You could add an hr tag between the uls and style that to have a border and be a specific width, see this link for more information on how to do that. Or you could use a span tag and style that, for example:
<span class="divider"></span>
.divider {
height: 1px;
width: 120px;
background: #5b7e96;
display: block;
margin: 0 auto;
}
Gabriel Ward
20,222 PointsHi Stephen and Umar,
Thanks so much for your helpful answers. Sorry about the code, something went amiss in the copying and pasting. Even still, both you came up with the perfect solution. I'm still very much learning, but I have a hunger to learn this stuff.
Gabriel Ward
20,222 PointsI actually have another little challenge I'm trying to work out, do you mind if I ask you guys?
Umar A
4,041 Pointsyou can ask us anything. I'm still learning too :) Ask as many questions as you want. Being shy will take you nowhere ;)
Gabriel Ward
20,222 PointsCool thanks so much.
I'm wanting to learn how to vertically align and centre an image between to headers. Here's the html:
<header>
<a href="index.html" id="logo">
<h1>Hawke's Bay Knowledge Bank</h1>
<img src="pic.jpg" alt="">
<h2>Digital History Archive</h2>
</a>
</header>
So it would look like this:
--------------- { } ---------------
Is this enough information? I'm not sure exactly how to go about it. I feel like flexbox or a display: table setup might be best.
I really appreciate the help.
Umar A
4,041 PointsIf you want everything to be centered. Create a div, and add an attribute called align with the value "center"
your code should look like this
<div align="center">
<a href="index.html" id="logo">
<h1>Hawke's Bay Knowledge Bank</h1>
<img src="pic.jpg" alt="">
<h2>Digital History Archive</h2>
</a>
</div>
Gabriel Ward
20,222 PointsOk but I don't I need to align it in CSS? I'm unsure about the CSS code...
Umar A
4,041 PointsYou could align it using CSS, but the code above should work too
Gabriel Ward
20,222 PointsRight, sorry, yes I know that I can do that but that looks like
{}
But I want the layout to be
--------{}--------
Gabriel Ward
20,222 PointsSorry I don't know why those ---- are not in the black paragraph. I would like the two headers to be on either side of the image, with all three of them on one line. Not on separate lines one after the other.
Umar A
4,041 PointsOh okay I understand now. You want it to look like this, right?
Here is what you need to add to your CSS.
h1,img,h2 {
display: inline;
}
img {
width: 200px;
position: relative;
top: 50px;
}
The first css rule will make h1,h2 and img elements to be on the same line. The second css rule will change the size of the image and its position. I used top:50px because the image was higher than text, but you can play with it :)
I hope that helps
Gabriel Ward
20,222 PointsBut it's not working in my code. I think I have too much stuff tangled up in my code so there's some weird overlapping with the links underneath, but that's it. Wow, thanks so much Umar!
Gabriel Ward
20,222 PointsI should clarify, and say that, it is laid out correctly. So thanks.
Umar A
4,041 PointsI'm glad I was able to help you :)