i creating a tab view using divs. when one of the tab is active, i want to hide the outer divs bottom border so that i see the tab is selected.
but right now i see outer div bottom border, which is not great as in the image.
desired output:
my div is laid as:
<div class='clsTabContainer'>
<div class='clsCurrentTab'>Dashboard</div>
<div class='clsTab'>Leads</div>
<div class='clsTab'>Internet</div>
<div class='clsTab'>Tasks</div>
</div>
.clsTabContainer {
BACKGROUND-COLOR: #FFFFFF;
PADDING-LEFT: 0px;
WIDTH: 100%;
PADDING-RIGHT: 0px;
WHITE-SPACE: nowrap;
HEIGHT: 35px;
OVERFLOW: hidden;
PADDING-TOP: 3px;
border-bottom: #D0D0D0 1px solid;
}
.clsTab {
OVERFLOW-X: visible;
OVERFLOW-Y: hidden;
BACKGROUND-COLOR: #F0F0F0;
DISPLAY: inline-block;
WHITE-SPACE: nowrap;
HEIGHT: 100%;
FONT-SIZE: 10pt;
VERTICAL-ALIGN: middle;
CURSOR: pointer;
padding: 5px 10px 10px 10px;
margin-left: -1px;
border-left: #D0D0D0 1px solid;
border-right: #D0D0D0 1px solid;
border-top: #D0D0D0 1px solid;
}
.clsCurrentTab {
OVERFLOW-X: visible;
OVERFLOW-Y: hidden;
BACKGROUND-COLOR: #FFFFFF;
DISPLAY: inline-block;
WHITE-SPACE: nowrap;
HEIGHT: 100%;
FONT-SIZE: 10pt;
VERTICAL-ALIGN: middle;
CURSOR: pointer;
padding: 5px 10px 10px 10px;
margin-left: -1px;
border-left: #D0D0D0 1px solid;
border-right: #D0D0D0 1px solid;
border-top: #82C600 1px solid;
color: #82C600;
}
how to avoid outer divs border bottom on the selected div so that i see the corresponding tab is really looks selected.?
Following are the changes in current css to achieve this:
.clsTab {
height:19px;
}
.clsCurrentTab {
height:20px;
}
.clsTab,.clsCurrentTab {
vertical-align: top;
}
Remove overflow:hidden from .clsTabContainer.
See DEMO here.
Related
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove position:fixed from #cust_info id.
Removing that will automatically give a scroll in your page.
For keeping it left align, just give float:left to #cust_info.
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}
I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?
My css:
#skyscraper_ad {
display: block;
width: 160px;
height: 600px;
padding: 5px;
margin-right: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:relative;
margin-bottom: 4px;
}
#smaller_main {
display: block;
width: 605px;
height: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:absolute;
padding: 5px;
float: right;
margin-bottom: 4px;
}
This should work:
#skyscraper_ad {
width: 160px;
height: 600px;
padding: 5px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
margin-bottom: 4px;
float:left;
}
#smaller_main {
width: 605px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
padding: 5px;
float: left;
margin-bottom: 4px;
}
I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)