how to rotate collapse menu slide from right to left?
<HTML>
<HEAD>
<style>
#accordion {
width: 55%;
margin-left: 20px;
border: 1px solid blue;
}
.panel {
width: 100%;
}
.panel-heading {
height: 40px;
}
.panel-title {
height: 18px
}
.panel-title a {
float: right;
text-decoration: none;
padding: 0px 10px;
margin: 0px -10px;
}
.panel-body {
height: 10%;
}
.cont {
margin: 10px 00px;
}
</style>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<br>
<div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="cont">testing msesage</div>
</div>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
expected
Below is the code for vertical slide accordian. Here is the code
working example : https://jsfiddle.net/yudi/qhnhnfjb/1/
HTML
<div id="accordion">
<div class="panel">
<div class="pink"></div>
<div class="panelContent p1"> <strong>Section 1 Header</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</div>
CSS
#accordion {
list-style:none;
margin:30px 0;
padding:0;
height:270px;
width:980px;
margin:0 0 0 11px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
overflow:hidden;
}
#accordion .panel {
float:left;
display:block;
height:270px;
width:44px;
overflow:hidden;
color:#666666;
text-decoration:none;
font-size:16px;
line-height:1.5em
}
#accordion .panel.active {
width:848px
}
.panelContent {
padding:15px 15px 15px 55px;
height:240px;
width:778px;
}
.pink {
width:42px;
height:270px;
float:left;
background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
border-right:2px solid #ffffff;
cursor:pointer
}
.last {
border:none
}
jquery
$(document).ready(function(){
activePanel = $("#accordion div.panel:first");
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "44px"}, 300);
$(this).animate({width: "848px"}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});
Related
I'm trying to figure out why when I insert text into one of the divs in the horizontally scrolling div it causes the text's parent div to push downward.
Any ideas?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
Demo
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Does this satisfy your requirements?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
overflow:hidden;
}
footer{
height: 50px;
bottom: 0px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.project_container {
border: purple 4px solid;
height: auto;
width: auto;
overflow: auto;
white-space: nowrap;
position: absolute;
overflow-x: hidden;
top: 50px;
bottom: 50px;
left: 0px;
right: 0px;
}
header{
position: absolute !important;
top: 0px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
//custom code by naren
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
</header>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer class="footer">
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Also find below the JSFiddle:
https://jsfiddle.net/Kai_Draord/kz4uap1t/
I have a full width and height section html home page. How can I devide this section into 3 row divs. Each div is full width and has a responsive background image. Please suggest how i can do this with css and the page being responsive.
Here is the solution below:
For background 2 add this media query css at end of your css code or media query responsive css-
#media(max-width:767px){
.bg-2{background-position:right center;}
}
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex:1;
background-size: cover;
background-repeat:no-repeat;
background-position:center center;
}
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);}
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);}
#media(max-width:767px){
.bg-2{background-position:right center;}
}
<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 100%;">
<div style="width: 35%; float: left; background-color:blue; padding-right:20px;">
Div 1
</div>
<div style="width: 30%; float: left;background-color:cyan;">
Div 2
</div>
<div style="width: 30%; float: left; background-color:gold;">
Div 3
</div>
</div>
</body>
</html>
#page-wrap {
display:table;
width:90%;
border:1px solid #999;
border-radius:10px;
border-spacing:10px;
margin:auto;
background-color:#fff;
box-shadow:6px 6px 6px #999;
}
#page-wrap div {
display:table-cell;
width:33.33%;
padding:2%;
border:1px solid #999;
border-radius:10px;
background-image:linear-gradient(to bottom,#fff,#ddd);
box-shadow:inset 0 0 10px #999;
font-size:1.5vw;
word-wrap:break-word;
color:#666;
}
#media screen and (max-width:800px) {
#page-wrap div {
font-size:2.0vw;
}
}
#media screen and (max-width:480px) {
#page-wrap div {
font-size:2.5vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="/" media="screen">
<style media="screen">
</style>
</head>
<body background-color:#f0f0f0;>
<div id="page-wrap">
<div id="left"></div>
<div id="right"></div>
<div id="mid">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo.
</p>
</div>
</div>
</body>
</html>
I think that using flexbox would be the best way. Check out this pen: http://codepen.io/anon/pen/qRwZyW
* { margin: 0; padding: 0; }
html,
body,
.container {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.child {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.child1 {
background-image: url(https://unsplash.it/1201/1301/?random);
}
.child2 {
background-image: url(https://unsplash.it/1202/1302/?random);
}
.child3 {
background-image: url(https://unsplash.it/1203/1303/?random);
}
<div class="container">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div>
</div>
Guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can divide the page into 3 rows by using 3 div and give the height for each div
<html>
<head>
<style type="text/css">
.wrapper
{
height: 100%;
width: 100%;
}
.div1,.div3
{
height: 33.33%;
background-color:yellow;
}
.div2
{
height: 33.33%;
background-color:red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
Div 1
</div>
<div class="div2">
Div 2
</div>
<div class="div3">
Div 3
</div>
</div>
</body>
</html>
I'm not sure why background-color tag isn't applying to my body element. The only thing i cant think of is i have it covered up with something else but i cant seem to figure out what is wrong. Either way i'm only trying to change the background color to grey. Im still learning and this is only my second project on freecodecamp.
body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
You're using Bootstrap and their CSS rules are overriding yours. Make your rules more specific:
html > body{
background-color: grey;
padding-top: 70px;
}
html > body{
background-color: grey;
padding-top: 70px;
}
header{
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
box-shadow: 0px 0px 10px 3px #555
}
#headerText{
color: white;
text-align: right;
}
#headerText2{
color: white;
text-align: center;
}
#headerImg{
padding: 20px 30px 0px 0px;
}
#headerImg img{
width: 100%;
height: 100%;
}
hr {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #aaa;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.vertical-align {
display: flex;
align-items: center;
}
#section2{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#section3{
background-color:white;
height: 400px;
box-shadow: 0px 0px 10px 3px #555
}
#top-bar-img{
height: 80px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
}
#top-bar{
background-color: purple;
box-shadow: 0 0 10px 3px #555;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top" id="top-bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://qlip.in/images/qlip.png" id="top-bar-img"></img>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<header id="section1">
<div class="row vertical-align">
<div class="col-xs-1"></div>
<div class="col-xs-8" id="center">
<h3 id="headerText">Nulla interdum convallis turpis, vitae dignissim neque posuere at. Proin sit amet dui pretium, facilisis diam rhoncus, luctus lacus. Etiam nec nibh lorem. </h3>
<hr></hr>
<h4 id="headerText2">Lorem ipsum dolor sit amet - Consectetur adipiscing elit - Morbi faucibus tellus diam</h4>
</div>
<div id="headerImg" class="col-xs-3">
<img src="https://avatars.githubusercontent.com/u/23371317?v=3" class=" img-circle"><img>
</div>
</div>
</header>
<div id="section2">
gfgf
</div>
<div id="section3">
gfgf
</div>
</div>
</div>
</div>
</body>
Learn more about CSS specificity at https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Note: You should also avoid !important at all costs.
You should try adding !important to the end of the background-color line. This overrides bootstrap's native background color.
I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this :
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
Can I Use: Date and time input types. Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.
As far as I'm aware, input date types aren't supported by Firefox.
I have a set of 6 divs nested in another div. i have a border-radius set for the parent and no border radius on the nested divs. their combined width is exactly the width of the inner area of the parent div. they are all floated left. in this setup, the corners of the children spill over the rounded corners of the parent. setting overflow to hidden seems to do nothing.
Does anyone know how to hide those corners that are overflowing from the parent?
I am using a css reset which is not in the attached code. that particular file is available here: reset.css
And a link to this page (so you can see what i mean)
79.170.44.85/rasmussenprojects.com/home.html
EDIT: heres a screenshot of what firefox shows in case its not displaying properly for you:
i.stack.imgur.com/OHkng.png
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="reset.css">
<!--
<link rel="stylesheet" type="text/css" href="home.css">
-->
<style>
html, body{
background-color:rgb(32,32,32);
width:1366px;
height:637px;
position:relative;
}
#banner_logotext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:32px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:12px;
line-height:6px;
margin-top:8px;
}
.content-panel{
background-color:rgb(64,64,64);
margin:0 auto;
border: 2px solid rgb(16,16,16);
border-radius:16px;
}
#banner{
width:1074px;
height:90px;
padding-top:8px;
}
#navbar{
width:1074px;
height:45px;
}
.navbar-tab{
width:178.333333333px;
height:41px;
float: left;
background-color:rgb(48,48,48);
border: 2px solid black;
}
</style>
</head>
<body>
<div class="content-panel" id="banner">
<p id="banner_logotext">
Lorem ipsum dolor sit amet
</p>
<p id="banner_slogantext">
"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
</div>
</body>
</html>
When you set overflow:hidden you are telling an element to hide any children that overflow out its bounds. As such, in your scenario, you have to set it for the #navbar instead of for each .navbar-tab.
#navbar{ overflow:hidden; }
As was mentioned by Justin Breiland, you can also round some of the corners of the first and last .navbar-tabs for better presentation.
.navbar-tab:first-child { border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
.navbar-tab:last-child { border-top-right-radius: 13px; border-bottom-right-radius: 13px; }
Full example in snippet. Live example: http://codepen.io/anon/pen/wBeKWq
html, body{
background-color:rgb(32,32,32);
width:1366px;
height:637px;
position:relative;
}
#banner_logotext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:32px;
font-weight:700;
font-family:Arial, Helvetica, sans-serif;
}
#banner_slogantext{
color:rgb(16,16,16);
width:1074px;
text-align:center;
font-size:12px;
line-height:6px;
margin-top:8px;
}
.content-panel{
background-color:rgb(64,64,64);
margin:0 auto;
border: 2px solid rgb(16,16,16);
border-radius:16px;
}
#banner{
width:1074px;
height:90px;
padding-top:8px;
}
#navbar{
width:1074px;
height:45px;
overflow:hidden;
}
.navbar-tab{
width:175px;
height:41px;
float: left;
background-color:rgb(48,48,48);
border: 2px solid black;
}
.navbar-tab:first-child{
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.navbar-tab:last-child{
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
<div class="content-panel" id="banner">
<p id="banner_logotext">
Lorem ipsum dolor sit amet
</p>
<p id="banner_slogantext">
"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."
</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
<div class="navbar-tab">
</div>
</div>
adiing overflow:hidden works on your code
html,
body {
background-color: rgb(32, 32, 32);
width: 1366px;
height: 637px;
position: relative;
}
#banner_logotext {
color: rgb(16, 16, 16);
width: 1074px;
text-align: center;
font-size: 32px;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
}
#banner_slogantext {
color: rgb(16, 16, 16);
width: 1074px;
text-align: center;
font-size: 12px;
line-height: 6px;
margin-top: 8px;
}
.content-panel {
background-color: rgb(64, 64, 64);
margin: 0 auto;
border: 2px solid rgb(16, 16, 16);
border-radius: 16px;
}
#banner {
width: 1074px;
height: 90px;
padding-top: 8px;
}
#navbar {
width: 1074px;
height: 45px;
overflow: hidden;
}
.navbar-tab {
width: 178.333333333px;
height: 41px;
float: left;
background-color: rgb(48, 48, 48);
border: 2px solid black;
}
<div class="content-panel" id="banner">
<p id="banner_logotext">Lorem ipsum dolor sit amet</p>
<p id="banner_slogantext">"Neque porro quisquam est qui dolorem ipsum
<br></br>quia dolor sit amet, consectetur, adipisci velit..."</p>
</div>
<div class="content-panel" id="navbar">
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
<div class="navbar-tab"></div>
</div>