About IDs:
The IDs should be limited to unique elements. Even then they are kinda heavy and you might find yourself painted into a corner when trying to target a rule. To learn more google: CSS specifity).
Also, code should be stream lined. When targeting rules, Look for PATTERNS in your mark up. You can reuse code that way. For example. Since you wanted a container with 3 divs, rather than repeat myself targeting each rule for each ID. I targeted the container's child DIVs instead. Thus I targeted all the divs at once for the applicable rules, rather than one at a time. I hope that makes sense to you.
display:table;
tempting , but it has a few drawbacks, not the least important of which is IE doesn't like it.
Art Direction:
1) you should try to anticipate how you will code something BEFORE you draw it out on Photoshop. Dont worry t will come with experience ( and paying close attention as you create your layouts). There are some thing CSS/HTML cant do, besides Just because you CAN do something doesnt mean you should.
2) You will see that each step , in each project is very different and solutions must be developed uniquely for each. It's more about learning a thinking style for overall problem solving than commands and properties.
3) At first I thought you wanted to have fixed width areas for your videos ( ok that kinda makes sense as the video will be specific width anyway.. that just the way videos are) and compensate by having fluid space ( gutter) between the videos. To be honest that gets quite ugly quickly. I am seeing you are going towards a fixed gutter solution. That too has a it's draw backs ( the fixed dimensions of video , for one) but it's an improvement.
The good stuff. Something for you to reverse engineer:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#video div {
min-height: 350px;
width: 33.33333%;
float:left;
}
#video div a{
display:block;
height:100px;
color:#fff;
background: #333;
position: relative;
overflow: hidden;
text-align: center
}
#video div a:after{content:""; position: absolute; border: 5px solid transparent; border-bottom:15px solid silver; bottom: 0; left:15px}
#leftvid a:before{content:url(videhed.gif); display:block; }
#midvid a:before{content:url(videhed.gif); display:block; }
#rightvid a:before{content:url(videhed.gif); display:block; }
#video div p{ padding:15px; font:normal 80%/1.3 sans-serif; }
#leftvid {
margin-left: -50px;}
#midvid {margin-left: 25px;}
#rightvid {margin-left: 25px;}
#video{ display:inline-block; vertical-align: top; width:100%; }
.center{position: relative; margin:0 15%; overflow: hidden; padding-left: 50px;background: silver; min-width:618px}
.center:before, .center:after{ background: #000; content:""; position: absolute; top:0; bottom:0; width: 25px; }
.center:before{ background: #000; content:""; position: absolute; left:33.333333%; top:0; bottom:0; width: 26px; margin-left: -17px;}
.center:after{ background: #000; content:""; position: absolute; left:66.66667%; top:0; bottom:0; width: 26px; margin-left: -10px;}
</style>
</head>
<body>
<div class="center">
<div id="video">
<div id="leftvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit ...</p>
</div>
<div id="midvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view stuff. sample of a different length of text all columns should still APPEAR equal ...</p>
</div>
<div id="rightvid">
<a href="#">Headline. this content will be replaced/ covered with a fixed height image anyway</a>
<p>Click here to view Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ...</p>
</div>
</div>
</div>
</body>
</html>
Fixed height, graphical header/links on top, fluid (height/width) "equal height" columns, faux gutters ( this technique will only work for solid colors/ regular patterns). required only one addition wrapper element, which may be present and available in your overall markup anyway.
Reply With Quote
Originally Posted by dresden_phoenix
Bookmarks