Issue with border-clip

HTML & CSS
1

Hi Guys,

Was trying to implement border-clip to one of my divs so that the border gets clipped so it doesnt stretch all the way across. Its on the mainwrapper div. Its the border right above “Find what you need quick and easy:” here is the link.

http://modocom.ca/miller/

This is the page that I got the info on how to use it if you scroll down to Example 36 but it doesnt seem to work at all. Any ideas

http://dev.w3.org/csswg/css-backgrounds-4/#border-corner-shape

Also would like to put it as a bottom border on each of the listed navigation items but only want it to stretch out maybe across two letters of each list item.

Thanks,

Mike

2

Another question is, I’ve put some more content in but now when you scroll down the header/sidebar when you scroll below it is white. How can I keep the black and red bars going all the way down?

Thanks,

Mike

3

That’s CSS4 and I don’t believe any browser supports border-clip even with vendor extensions. That draft you pointed to is not maintained so I doubt its going to turn into anything soon.

You will need to find another method if you only want partial borders. You could probably do it with generated content :before or :after and absolutely placing a border around the relative parent but it all depends on the exact requirements.

Another question is, I’ve put some more content in but now when you scroll down the header/sidebar when you scroll below it is white. How can I keep the black and red bars going all the way down?

One way to get full height sections is to use the display table and display table-cell properties. I would use the body background as the black left border then create an offset table width 3 rows and 2 cells in each row for the rest of the layout. This will ensure that cells stretch together.

4

Thanks Paul,

I’m not to familar with content: before or :after as never really had to use it much, how can I use it for this issue?

For the layout is it lots of work to change it to what you have recommended?

Also, may think of having the header/sidebar area fixed but not sure yet. Din’t think so but may change mind in future right now just hoping to solve issue got going on lol.

Thanks,

Mike

5

Ok,

I believe I got it sorted out with using display: table etc.

But for the life of me I’m not sure why theres a big gap in the top of the page. The grey part should line up with the darker red part.

If theres anything else you can suggest that would be great to make this work better but believe its coming along. Now need to figure out how to do the content: before and after.

6

The default for table-cells is vertical-align:middle and as you have set the logo to be 200px tall it moves it down to align it to the middle. You could set vertical-align:top to the display:table-cell elements to kill the gap but that’s not probably what you want.

If you wanted the Miller text logo to vertically center with the “'M” of the left you didn’t really need to do anything special if you had created a table-row (display:table-row) wrap with just 2 display:table-cells and make sure that vertical-align:middle is set for the table-cell and then both the contents in those cells will align vertically and there won;t be a need to force the height or do any calculations.

The grey part should line up with the darker red part.

Again these two elements should be related cells within a table row and they will both match height and both expand together to keep that effect nicely.

For the last section with the nav and the content you again want a display table-row with just two cells but this time with content vertically aligned to the top. You probably won’t need any more cells after that as the content can just be stacked n those 2 last cells just like two columns.

Heree’s the rough structure:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.table{width:100%;display:table}
.table-row{display:table-row}
.table-cell{display:table-cell;vertical-align:middle}
.table-last .table-cell{vertical-align:top}
.sidebar{width:30%;background:red}
.main{background:#f9f9f9}
.mid .sidebar{background:#900}
.mid .main{background:#ccc}
</style>
</head>

<body>
<div class="table">
		<div class="table-row">
				<div class="table-cell sidebar">a<br>a<br>a<br>a</div>
				<div class="table-cell main">b</div>
		</div>
		<div class="table-row mid">
				<div class="table-cell sidebar">a</div>
				<div class="table-cell main">b<br>b<br>b<br>b<br>b<br>b<br></div>
		</div>
		<div class="table-row table-last">
				<div class="table-cell sidebar">a</div>
				<div class="table-cell main">bb<br>b<br>b<br>b<br>b<br></div>
		</div>
</div>
</body>
</html>

Note: Don 't use those classnames as I just used them to make it obvious what was what in the demo but you can include the properies in sidebar and main without the extra table-x classes. Don;t use breaks like that either as that’s just for the demo. The content should be in a semantic container with its own margins.

7

Thanks going to start implementing this now.

How would I get the black side that I have? Should I just add in another table cell in each row and make the BG black?

Thanks,

Mike

8

Ok, so here is what I have so far but how do I make the first row and the second row not as height.

Looking to have the logo vertical- align to the middle but not so much space around it.

http://modocom.ca/miller/

Before I had these set to 200px heigh for each row how can I do something like that where it will also work responsively as well.

Thanks,

Mike

9

Now that I added more content the area for the logo and headlines shrink.

So now need it larger is there a way to make the height specific size and when resizing the window it to rezies by maybe adding some top and bottom padding?

Thanks,

Mike

10

Hi,

Are we talking about the ‘M’ logo on the left and the Miller text image next to it at the top?

If so they are both images and you have set those images to scale and they will get smaller as the window is closed which in turn means the row gets smaller because there is no other content to hold the cell open. You could set a min -width for those images to stop them getting smaller and a height for that top row.

e.g.


.logo,.logo2 {min-width:150px}
.table-first .table-cell {height:150px}

For your black strip down the side of the page I would have done that just using the body background colour and offsetting the table by the 8% (and reducing its width by 8%) that you have used for that strip you didn’t need an extra cell to do it as such. The table could have been set to height:100% initially (html and body would need 100% height also) to fill the whole screen so that you always have the red and black strip full height. However, it will work like you have it now so may not be worth the effort.

11

Excellent, that worked perfectly.

Now back to original question how do I use the content: before and content: after to achieve borders that are shorter.

Thanks,

Mike

12

Hi Mike,

I suppose the first question I need to know is what you want it to look like?

Here’s an example of how you can use :after to produce a border.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.effect {
	position:relative;
	margin:0 0 1em;
	padding:5px 0;
	text-align:center;
}
.effect:after, .effect:before {
	content:"";/* genereates the box to use*/
	position:absolute;
	left:0;
	top:0;
	width:75%;
	height:1px;
	background:red;
}
.effect:after {
	top:auto;
	bottom:0;
	right:0;
	left:auto;
	background:green;
}
/* example 2 */
.effect2 {
	position:relative;
	margin:0 0 1em;
	padding:5px 0;
	text-align:center;
}
.effect2 span {
	display:inline-block;
	position:relative;
	z-index:2;
	padding:0 10px;
	vertical-align:middle;
	background:#fff;
}
.effect2:after {
	content:"";/* genereates the box to use*/
	position:absolute;
	left:0;
	top:51%;
	right:0;
	height:1px;
	background:red;
	z-index:1;
}
</style>
</head>

<body>
<h1 class="effect">This is an effect</h1>
<h2 class="effect2"><span>This is an effect as well</span></h2>
</body>
</html>