Related
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
With the help of codepen, I came up with the following :
https://codepen.io/Lancewalker/pen/zepjXr
You can see the mockup version here : https://i.gyazo.com/88a0d6815253cbca8981a276bb937673.png
It works perfectly and has the exact function I need, and the only thing missing is a mobile display which I have mocked up here:
http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/LWD-FinalMockup.png
My problem : WPBakery is a nightmare. I bought this theme a long time ago which includes WPBakery and I cannot for the life of me figure out how to incorporate this codepen (or much of anything custom) into the site.
Plugins I have tried :
• Custom CSS / JS - Lets you add your own css (scss compatible) and javascript to the site
• Header Footer Code Manager - Lets you include scripts in your header without dealing with PHP.
I've tried using the custom HTML element and custom JS elements, including the scripts and html, and then adding the HTML into the stylesheet.
Here is the current working home page:
http://www.lancewalkerdesigns.com/
And here is what happens when I add the code using the custom html / js:
http://www.lancewalkerdesigns.com/home-page/
As you can see when you get to services, the little li elements on the right side of the screen which allow you to navigate from page to page end up randomly inserting themselves into the ul in the codepen I've created.
An uneducated guess : The JS used for the li element on the right side of the screen which allows you to navigate the homepage has conflicts with the JS / classes I've assigned to my codepen UL.
An alternate fix : If someone could help me rework the code to have the on click function without using lists / unordered lists and instead using custom classes there's a chance that it wouldn't conflict with Wordpress / WPbakery
If anyone can help, this is the only complicated thing I really want on the site but it's important to me. I'd be willing to grant access / pay someone to do this, I know it's just a matter of knowing how WPBakery / Wordpress works better than I do. I am pretty well versed in html / css but js / php I am a beginner at.
I would post this on upwork but last time I did that someone quoted me at 25 hours for the project, which even though I am not js / php handy, I knew was a massive overestimate.
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#" + d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});
$('ul.tabs li').last().addClass("tab_last");
/*************New CSS*/
ul.tabs li.active>img.img-inactive {
display: none;
}
ul.tabs li.active>img.img-active {
display: block;
}
ul.tabs li>img.img-active {
display: none;
}
/**********New CSS*/
body {
background-color: #333;
color: #fff;
}
h2 {
text-transform: uppercase;
font-size: 3rem;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 232px;
border-bottom: 1px solid #333;
width: 100%;
display: flex;
justify-content: center;
}
ul.tabs img {
width: 200px;
height: 200px;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 0px;
margin: 0 -20px;
height: 232px;
line-height: 31px;
color: #ccc;
overflow: hidden;
position: relative;
}
ul.tabs li.active {
color: #333;
display: block;
}
.tab_container {
padding-top: 75px;
clear: both;
float: left;
width: 100%;
overflow: auto;
display: flex;
justify-content: center;
text-align: center;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_drawer_heading {
display: none;
}
#media screen and (max-width: 480px) {
.tabs {
display: none;
}
.tab_drawer_heading {
background-color: #ccc;
color: #fff;
border-top: 1px solid #333;
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.d_active {
background-color: #666;
color: #fff;
}
}
#img2 {
margin-top: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active" rel="tab1">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-inactive.png" class="img-inactive">
</li>
</li>
<li rel="tab2" id="img2">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-inactive.png" class="img-inactive"></li>
<li rel="tab3">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-inactive.png" class="img-inactive"></li>
<li rel="tab4" id="img2">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service4-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service-4inactive.png" class="img-inactive"></li>
<li rel="tab5">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-inactive.png" class="img-inactive"></li>
</ul>
<div class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
<div id="tab1" class="tab_content">
<h2>Tab 1 content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
</div>
<!-- #tab1 -->
<h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
<div id="tab2" class="tab_content">
<h2>Tab 2 content</h2>
<p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
</div>
<!-- #tab2 -->
<h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
<div id="tab3" class="tab_content">
<h2>Tab 3 content</h2>
<p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>
</div>
<!-- #tab3 -->
<h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3>
<div id="tab4" class="tab_content">
<h2>Tab 4 content</h2>
<p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
</div>
<!-- #tab4 -->
<h3 class="tab_drawer_heading" rel="tab5">Tab 5</h3>
<div id="tab5" class="tab_content">
<h2>Tab 5 content</h2>
<p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
</div>
<!-- #tab5 -->
</div>
<!-- .tab_container -->
</div>
kindly remove the "$" sign and replace with "jQuery" also change the class names to something non-generic so that the code does not get any other style of the theme.
StackOverflow's been helping me a lot, but now it's the first time i ask. I'm making a website with bootstrap. In Desktop it is fine, but when i test it on my iphone 4 (or chrome's F12) its contents does not fit.
here it goes
CSS
#charset "utf-8";
/* CSS Document */
/* MY CUSTOM CSS*/
/* ------------Bootstrap---------------*/
#media (max-width: #screen-xs) {
body{font-size: 10px;}
container-fluid fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
.fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
margin-top:20px;
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
.container-fluid{
padding:0;
}
body, html {
width: 100% !important;
height: 100% !important;
}
/* MENU SUPERIOR*/
.container-full {
margin: 0 auto;
width: 100%;
}
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
.brand{
color:#fff;
margin-left: 20px;
margin-top: 12px;
font-size: 1.3em;
float: left;
text-transform:uppercase;
}
#custom-bootstrap-menu .simbolo{
height:46px;
width:46px;
background:url(../img/logo-franken.png);
margin:5px auto 3px auto;
/*float:left;*/
}
#custom-bootstrap-menu .logotipo{
float:left;
color:#fff;
text-transform:uppercase;
font-weight:lighter;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 15px;
background-color: rgba(8, 3, 3, 1);
border-bottom-width: 0px;
margin:auto;
}
#custom-bootstrap-menu.navbar-default{
margin-left:0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
margin-left:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(173, 173, 173, 1);
background-color: rgba(0, 0, 0, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(116, 0, 158, 1);
background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #080303;
}
/****************HOME****************/
/*-------------DIVs------------/
/* ------------ HEADERS ----------*/
.titulo-inicial{
margin-top:20px;
font-size:5em;
text-align:center;
text-transform:uppercase;
}
/* -------------- PARAGRAFOS -------------*/
.texto-inicial{
margin-top:20px;
text-align:center;
font-size:1.5em;
}
/******************* FIM HOME *************************/
/****************SERVICOS****************/
/*-------------DIVs------------*/
.cont-servicos{
margin-left:20px;
margin-right:20px;
}
/* ------------ HEADERS ----------*/
.titulo-servicos{
margin-top:50px;
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM SERVICOS*************************/
/**************** PORTFOLIO ****************/
/*-------------DIVs------------*/
/*-------------CAROUSSEL------------*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
padding:0;
overflow:hidden;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill2 {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
overflow:hidden;
}
/* ------------ HEADERS ----------*/
.titulo-portfolio{
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM PORTFOLIO Protocolo unimed 1172425*************************/
/**************** ORCAMENTO ****************/
/******************* FIM ORCAMENTO *************************/
/**************** Contato ****************/
/******************* FIM Contato *************************/
/* ------------ COMUM ---------------*/
body {
margin: 0;
padding-top:104px;
font-family: 'Josefin Sans', sans-serif;
}
#logo-img {
width:70px;
height: 40px;
margin:auto;
}
#home {
background:#000;
}
#servicos {
background:#CCC;
}
#portfolio {
background:#F2F2F2;
}
#freelance {
background:yellow;
}
#contato {
background:purple;
}
.fullscreen-bg {
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
/* z-index: -100;*/
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: auto;
height: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Company</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700,400italic,400' rel='stylesheet' type='text/css'>
<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Viewport Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid container-full">
<div class="simbolo"></div>
<!--<div class="logotipo">My Company</div>-->
</div>
<div class="navbar-header">
<div class="container-fluid">
<div class="brand visible-sm visible-xs" href="#">My Company</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
</div>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#home">Quem somos</a> </li>
<li><a class="page-scroll" href="#servicos">O que fazemos</a> </li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a> </li>
<!--<li>Cases </li>-->
<li><a class="page-scroll" href="#orcamento">Orçamento</a> </li>
<li><a class="page-scroll" href="#contato">Contato</a> </li>
<li><a class="page-scroll" href="#blog">Blog</a> </li>
</ul>
</div>
</div>
</div>
<div id="home" class="container-fluid fill">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="vids/video.mp4" type="video/mp4">
</video>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="titulo-inicial"> My Company </h1>
<p class="texto-inicial"> LoMy Companyr sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> </p>
</div>
</div>
</div>
</div>
<div id="servicos" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-servicos"> O que fazemos </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. </p>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-dg.png"> Design Gráfico </h2>
<p> Identidade Visual (Logotipo), Folders, Cartazes
</div>
<div class="col-md-4">
<h2><img src="img/ico-wd.png"> Web Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-de.png"> Design Editorial </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-ev.png"> Edição de Vídeo </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-3d.png"> Renderização 3D </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-ad.png"> Assessoria em Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio" class="container-fluid fill" style="padding:0;">
<header id="myCarousel" class="carousel slide" style="overflow:hidden;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/1.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/2.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/3.jpg)"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header>
</div>
<div id="orcamento" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-portfolio"> Orçamento </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst.. </p>
</div>
</div>
</div>
DEMO
Your CSS
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
Just remove height:100%; from this.
Suggestion In using Boostrap:
The default format for containers, row and col*'s is
<div class="container"><!-- container-fluid can be used in this div -->
<div class="row">
<div class="col-md-12"><!--Your content that takes 12 columns goes here--></div>
</div>
<div class="row">
<div class="col-md-4"><!--Your content that takes 4 columns goes here--></div>
<div class="col-md-8"><!--Your content that takes 8 columns goes here--></div>
</div>
</div>
Note: Inside a row sum of all columns must be less than or equal to 12. if it greater than 12 then the last element(div ,span etc) in the row will be visible below the other elements of same row.
Is this something very simple that you can use. Or you can refer this stackoverflowlink.
Usually textareas are rectangular or square, like this:
But I want a custom-shaped textarea, like this, for example:
How is this possible?
Introduction
First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.
Solution with a div contenteditable
As proposed by #Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:
As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).
After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)
Full code sample
.block_left {
background-color: red;
height: 70px;
width: 100px;
float: left;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}
.block_right {
background-color: red;
height: 70px;
width: 100px;
float: right;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
}
.div2 {
background-color: white;
font-size: 1.5em;
border: 2px solid blue;
}
.parent {
height: 300px;
width: 500px;
}
<div class="parent">
<div class="block_left"></div>
<div class="block_right"></div>
<div class="div2" contenteditable="true">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
</div>
</div>
In the near future we can use so called css-shapes to achieve this. A div with the contenteditable attribute set to true combined with css-shapes can make a text area any kind of shape.
Currently Chrome Canary already supports css-shapes. An example what is possible with css-shapes is:
Here they are using a polygon shape to define the text-flow. It should be possible to create two polygons to match the shape you want for your textarea.
More information about css-shapes has been written at: http://sarasoueidan.com/blog/css-shapes/
To enable css-shapes in Chrome Canary:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter.
Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the
browser window.
from: http://html.adobe.com/webplatform/enable/
.container {
overflow: hidden;
shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
font-size: 0.8em;
}
/** for red border **/
.container:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 190px;
height: 190px;
background-color: white;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.container:after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 190px;
height: 190px;
background-color: white;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
<div class="container" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.
</div>
Polygon created with: http://betravis.github.io/shape-tools/polygon-drawing/
Result
http://jsfiddle.net/A8cPj/1/
Maybe it's possible with Content Editable ?
It's not a textarea, but if you succeed to create a div with this shape, it could work.
I think it's not possible with just textarea...
A little example: http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>
You could work with a contenteditable div, with two corners divs:
<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
<div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
<div style="float:right; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>
You could also do this with CSS Regions
With Regions, you can use CSS properties to flow content into existing
styled containers, specifying any container order you choose,
regardless of their position on the page.
(Web Platform)
[Currently supported in WebKit Nightly, Safari 6.1+ and iOS7 and already usable in chrome and opera after enabling the flag: enable-experimental-web-platform-features - caniuse, Web Platform ]
FIDDLE
So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.
Markup
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>
(Relevant) CSS
#content {
-ms-flow-into: article;
-webkit-flow-into: article;
}
.region {
-ms-flow-from: article;
-webkit-flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 0 1px;
margin: auto;
left:0;right:0;
border: 2px solid lightBlue;
}
#box-a {
top: 10px;
background: #fff;
z-index: 1;
border-bottom: none;
}
#box-b {
top: 210px;
width: 400px;
overflow: auto;
margin-top: -2px;
}
The result:
For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3
A long line of text in the box will drop the cursor down past the middle edges and I can't seem to fix that.
**[Fiddle Diddle][1]**
#wrap {
overflow: hidden;
}
#inner {
height: 350px;
width: 500px;
border: 1px solid blue;
}
#textContent {
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}
#left, #right {
height: 50%;
width: 25%;
margin-top: -1px;
padding: 0;
border: 1px solid blue;
border-top-color: white;
margin-bottom: 5px;
}
#right {
margin-left: 5px;
float: right;
margin-right: -1px;
border-right-color: white;
}
#left {
margin-right: 5px;
float: left;
margin-left: -1px;
border-left-color: white;
}
<div id="wrap">
<div id="inner">
<div id="left"></div>
<div id="right"></div>
<span id="textContent" contenteditable>The A B Cs</span>
</div>
</div>
[1]: http://jsfiddle.net/yKSZV/
That's not possible sire! A textarea is generally a rect or square box, where you can type in.
However, to make something like that you can use 2 textarea's and then give them a specified width and height. Otherwise I don't think its gonna happen!
Second method would be to make an editable element.
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
The code is:
<div contenteditable="true">
This text can be edited by the user.
</div>
Using this, you can make any element editable! You can give dimensions to it, and it will work! You will get it just as a textarea.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
If you combine CSS shapes with contenteditable this can be done in webkit browsers.
First you have to enable the flag: enable-experimental-web-platform-features
Then restart your webkit browser and then check this FIDDLE out !
This method will work for non-standard shapes as well.
Markup
<div class="shape" contenteditable="true">
<p>
Text here
</p>
</div>
CSS
.shape{
-webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
width: 400px;
height: 400px;
text-align: justify;
margin: 0 auto;
}
So how on earth did I get that polygon shape?
Go to this site and make your own custom shape!
Notes about enabling the flag:
(from here)
To enable Shapes, Regions, and Blend Modes:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter. Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the browser
window.
You can use Google web designer tool for creating complex shapes using HTML5-canvas and CSS.
More over you will get other tools like typing tools to enter texts inside these shapes.
As the output file contains much code, providing a fiddle of a sample demo created using Google Web Designer tool
FIDDLE DEMO>>
If, for whatever reason, you really need to support browsers that don't have contenteditable, you could probably do the same thing in JavaScript, by using events, although this is a very messy workaround.
Pseudocode:
focused=false;
when user clicks the div
{
focused=true;
}
when user clicks outside the div
{
focused=false;
}
when user presses a key
{
if (focused)
{
add character of key to div.innerHTML;
}
}
I've created a tab and tab content animation. When the tab is clicked, the corresponding tab content is displayed underneath and the others are hidden, easy enough and works fine. The problem I'm having is with the rendering of the border-radius in IE7 and 8. I am using cssPIE.htc for any css that may be effected by these css3 properties. This is working for static content on the page that is not being manipulated with jQuery, but for dynamic content such as the tabs, I believe the css for content needs the -pie-watch-ancestors: n attribute. After doing so, still no results. Below is my code(CSS, HTML, and jQuery) and a screen shot of the difference between chrome and IE8. Any help would be great.
UPDATE: I may be able to fix this by having the tab content left, off the page, then placing the active one back to left: 0, so that it is always displayed and never re-rendered. **IN THE MEANTIME, here is the fiddle, go nuts: tab fiddle
Chrome Screenshot
IE8 broken Screenshot
As you may notice: no border, no background, and no background image(small colored boxes).
CSS affiliated with tab content
.tabContent {
position:absolute;
display:none;
background-color:White;
background-image: url(/includes/images/home_phase2/colored_boxes_small.png);
background-repeat: no-repeat;
background-position: 98% 90%;
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
behavior: url("/includes/css/PIE.htc");
-pie-watch-ancestors: true;
}
.roundedCorners {
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url("/includes/css/PIE.htc");
}
jQuery(document.load expected)
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});
Try adding
position: relative
to
.roundCorners {}
Sounds funny, but had the same issue, may help.
EDIT:
Same may apply to:
.tabContent {}
OK, after long tries, I managed to do that. Finally I solved it with rounding the corners of tabContent_wrapper.
Here's what I did as a short summary:
removed roundedCorners from every tabContent divs, added to tabContent_wrapper
added clearfix class to all the tabContent divs, defining clearfix class in the CSS code
added PIE.htc to roundedCorners
added some padding to roundedCorners because of the CSS3PIE corners...
added position:relative; z-index:10; to roundedCorners
commented out tabContent's position:absolute;
hid tabContent_wrapper, because there's a 2px padding, which looks ugly when displaying no content in it
deleted the comment sign in front of $('.tabContent_wrapper').show();, it's needed now; put in $('.tabContent_wrapper').hide(); when we click on the active tab again (not to let the ugly empty content show up with a border)
Here is the full code (post-formatted with http://jsbeautifier.org/):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Tabs...</title>
<style>
.roundedCorners {
padding:2px;
border-radius:7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* New stuffs */
behavior: url(PIE.htc);
position:relative;
z-index:10;
}
.tabHome_wrapper {
margin-bottom:-1px;
}
.tab_wrapper {
position:relative;
height:25px;
margin-left:-1px;
}
.tab_wrapper ul li {
display:inline-block;
padding-right:20px;
overflow:hidden;
width:132px;
height:25px;
}
.tab_wrapper ul > li:first-child a {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 0 0 0 7px;
}
.tabLnk {
position:absolute;
background-image:url('http://i.imgur.com/PkR4W.png');
background-position: -132px 1px;
background-repeat:no-repeat;
width:132px;
height:25px;
margin-top:1px;
z-index:9999;
font-size: 15px;
text-align: center;
line-height: 25px;
color: White !important;
text-decoration: none;
}
.borderTopLeftTabContent {
border-radius: 7px 7px 7px 7px !important;
}
.tabLnk.active {
width:130px;
background-position:-1px 1px;
-webkit-border-bottom-left-radius: 0px !important;
-moz-border-radius-bottomleft: 0px !important;
border-bottom-left-radius: 0px !important;
color: #833889 !important;
}
.tabLnk:hover, .tabLnk:focus {
text-decoration: none;
}
.tabLnk:visited {
color: White;
}
.hideContent {
left:-99999px;
}
.tabContent_wrapper {
/* new stuffs */
width:945px;
margin-top:1px;
margin-left:-1px;
border:1px solid #772981;
/*
border-top:0px;
*/
/* hide it first because of the 2 pixel roundedCorner padding */
display:none;
}
.tabContent {
/*
position:absolute;
*/
display:none;
background-color:White;
background-image: url('http://i.imgur.com/yyhGR.png');
background-repeat: no-repeat;
background-position: 98% 90%;
/* moved to tabContent_wrapper, this z-index is not needed now */
/*
border-left:1px solid #772981;
border-right:1px solid #772981;
border-bottom:1px solid #772981;
width:945px;
margin-top:1px;
margin-left:-1px;
z-index:9999;
*/
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
}
.tabContent_img {
float: left;
width:290px;
height:155px;
padding: 20px 20px 10px 15px;
}
.tabContent_description {
padding: 32px 140px 20px 0px;
width:450px;
float:right;
font-size: 14px;
color: gray;
}
.tabContent_description p:first-child {
padding-bottom: 10px;
}
.lblTabTxt {
color: white;
padding-left: 3px;
top: 5px;
position: relative;
}
.lblTabTxt:hover {
text-decoration: none;
}
/* Pete... clearfix from Drupal */
/**
* Markup free clearing.
*
* #see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var tabLnk = $('.tabLnk');
$('.tabContent').click(function (event) {
event.stopPropagation();
});
tabLnk.each(function () {
$(this).attr("href", "javascript: void(0)")
});
tabLnk.click(function (event) {
event.stopPropagation();
var $this = $(this);
var hideActive = $('.active').parent().index();
if ($this.hasClass('active')) {
$this.removeClass('active');
$('.tabContent_wrapper .tabContent:eq(' + hideActive + ')').hide();
// hide tabContent_wrapper too (when empty, it would look ugly because of the 2px padding)
$('.tabContent_wrapper').hide();
} else {
$('.tabLnk').removeClass('active');
$this.addClass('active');
var showActive = $('.active').parent().index();
$('.tabContent_wrapper').show();
var activeContent = $('.tabContent_wrapper .tabContent:eq(' + showActive + ')');
activeContent.show();
activeContent.siblings().hide();
}
if ($('.tab_wrapper li a').slice(1, 3).hasClass('active')) {
$('.tabContent').slice(1, 3).addClass('borderTopLeftTabContent');
}
});
});
</script>
</head>
<body>
<div id="ctl00_cphBody_pnltabWrapper" class="tabHome_wrapper">
<div id="tabArea" class="tab_wrapper">
<ul>
<li> <a class="tabLnk" href="javascript: void(0)">
Administrators
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Teachers
</a>
</li>
<li> <a class="tabLnk" href="javascript: void(0)">
Technologists
</a>
</li>
</ul>
</div>
<div id="tabContentArea" class="tabContent_wrapper roundedCorners">
<div class="tabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Administrators</span> </strong></p>
<p>a aliquet dolor gravida. Sed auctor imperdiet lacus vel vulputate.venenatis
mauris, a dignissim elit fringilla ac. Quisque malesuada dapibus venenatis.
Aliquam volutpat ante id diam auctor eu volutpat massa sem et augue. Vestibulum
tortor lacus, venenatis sed ultricies ac, porta et ligula. Duis consectetur
Mauris fringilla massa ac sem tristique consectetur. Aliquam varius, lacus
vel sollicitudin congue, elit erat luctus mauris, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Quisque posuere nunc lacinia diam ornare
a ullamcorper nulla egestas.</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p><strong><span style="COLOR: #4b0082">Teachers</span></strong></p>
<p>CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT</p>
</div>
</div>
<div class="tabContent borderTopLeftTabContent clearfix" style="display: none;">
<div class="tabContent_img">
<img src="http://i.imgur.com/zJJmn.png" alt="tabContent_img example" width="283"
height="152">
</div>
<div class="tabContent_description">
<p> <strong><span style="COLOR: #4b0082">Technologists </span></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada,
nulla eu viverra iaculis, nibh ipsum rhoncus risus, sit amet porta sapien
elit id turpis. Donec eu nibh diam. Ut placerat vulputate ligula, ut mattis
odio adipiscing id. Nullam vel arcu est. Praesent vitae porta metus. Cras
auctor sem non nisi aliquet ultricies. Suspendisse potenti. Curabitur gravida
eleifend aliquam. Fusce consequat cursus eros sit amet hendrerit. Curabitur
quam nibh, auctor id dictum non, dapibus sit amet libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Some screenshots:
by default, no tabs opened:
1st tab opened:
2nd tab opened:
3rd tab opened:
Of course, you'll have to manipulate the upper border not to show the border under the active tab.
Let me know if this helped.