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>
Related
body{
padding: 0;
margin:0;
font-weight: bold;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#header{
position: fixed;
top: 0;
margin: 0;
background-color:rgb(0, 255, 170);
height:60px;
width:100%;
margin-bottom: 20px;
}
.main-list{
top: -57.5px;
position:relative;
list-style: none;
text-align: right;
padding-right: 10px;
margin: 0;
z-index: 1;
margin-bottom: 10px;
min-width: 1%;
}
.list-item{
margin: 10px 5px;
text-align: center;
float: right;
text-decoration: none;
background-color: #333;
color: white;
border-radius: 5px;
padding: 3px 5px;
flex: border-box;
}
a:hover{
background-color: gray;
color: black;
}
#header h1{
margin:0;
padding: 10px;
text-align: left;
}
.height{
height: 700px
}
section{
margin: -32px 10px 10px 10px;
padding: 10px;
}
#help{
padding-top: 70px;
margin: 0;
}
#contact{
padding-top: 70px;
}
#about{
margin:0;
padding-top: 70px;
}
#home{
padding-top: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header id="header">
<h1>Website</h1>
<nav class="main-nav">
<ul class="main-list">
<li>
<a class="list-item button" href="#top" target="_top">Home</a>
</li>
<li>
<a class="list-item button" href="#about" target="_top">About</a>
</li>
<li>
<a class="list-item button" href="#help" target="_top">Help</a>
</li>
<li>
<a class="list-item button" href="#contact" target="_top"
>Contact</a
>
</li>
</ul>
</nav>
</header>
<section id="content">
</br>
<h1 id="about">About me</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at natus vitae voluptate ex ipsam aspernatur distinctio dolores? Neque, repudiandae.
</p>
<h1 id="help">Help</h1>
<div class="height"></div>
<a id="return" href="#top-content" target="_top">Return to top</a>
<div class="height"></div>
<p1 id="contact">Contact</p1>
<div class="height"></div>
<div class="height"></div>
</section>
</body>
</html>
I am tinkering with html and css. I currently have a fixed header at the top of the page. I do not want to have extra padding that will make it look awkward while scrolling through the page. Is there any way to provide some extra space when the link is clicked? I saw something about clip-path but I am not sure the syntax for this markup.
I am stuck, I want to make the height of my left column equal to the height of the right column . Seems the problem is the width of my video but I know how to fix this issue
I put in code this :
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/*height: 900px;*/
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>
I have a another little problem: I wanted to put the plane little up.
I tried to use position:absolute but all other element is not centered.
You provided so much code, that is useless and as you can no one cared to fix your issue, anyway all i'm going to say is that i tried to add certain height:100% and height:100vh on some wrapper elements and it should work now.
#font-face {
font-family: "poppins-bold";
src: url('../css/fonts/Poppins-Bold.ttf');
}
#font-face {
font-family: "poppins-light";
src: url('../css/fonts/Poppins-Light.ttf');
}
#font-face {
font-family: "poppins-medium";
src: url('../css/fonts/Poppins-Medium.ttf');
}
#font-face {
font-family: "poppins-regular";
src: url('../css/fonts/Poppins-Regular.ttf');
}
#font-face {
font-family: "poppins-semibold";
src: url('../css/fonts/Poppins-SemiBold.ttf');
}
body {
margin: 0;
background-color: #0080b9;
}
.conteneur {
min-width: 1050px;
height: 100vh;
}
.light {
font-family: "poppins-light";
}
.video-cover {
width: 100%;
height: 175px;
background-color: gray;
margin-top: 10px;
margin-bottom: 50px;
}
#bloc-gauche {
background-color: white;
width: 25%;
float: left;
/* height: 900px; */
height: 100vh;
color: #0080b9;
font-family: "poppins-semibold";
overflow: scroll;
/*
padding-left:20px;
padding-right:20px;
padding-top:20px;
*/
}
.wrapper-bloc-gauche {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
max-height: 100%;
}
#intro {
width: 185px;
margin-bottom: 50px;
}
#content-bloc-droite {
padding-top: 25px;
max-height: 100%;
overflow: auto;
}
#bloc-droite {
background-color: #0080b9;
width: 75%;
float: right;
font-family: "poppins-semibold";
color: white;
background-repeat: repeat-x;
height: 100%;
}
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
#description {
font-size: 15px;
text-align: center;
width: 45%;
margin-top: 25px;
}
.video-player-container {
/*width:40%;*/
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
margin-bottom: 40px;
}
.video-player {
width: 100%;
border: 5px solid #ECECEC;
box-sizing: border-box;
}
.footer-bloc-droite {
text-align: center;
padding-left: 30px;
padding-right: 30px;
overflow: hidden;
}
#logo-joon {
float: left;
width: 200px;
}
#btn-xp {
display: inline-block;
margin: 0 auto;
background-color: white;
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
color: #0080b9;
}
#joon-p {
float: right;
width: 200px;
}
#joon-p-img {
/*transform: rotate(-20deg);
padding-bottom: 0px;
-webkit-transform-origin-x: -55px;
overflow: hidden;
*/
-webkit-transform-origin-x: -55px;
width: 95%;
}
#left-block {
float: left;
}
#right-block {
float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class='conteneur'>
<div id='bloc-gauche'>
<div class='wrapper-bloc-gauche'>
<div class='row'>
<div id='intro'>
Vivez l'intégralité d'un voyage JOON avec Maxime Gasteuil
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 1 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 2 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 3 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
<div id='playlist'>
<div class='video-preview'>
<div class='video-title'>Ep 4 <span class='light'>Lorem Ipsum dolores sit amet</span></div>
<div class='video-cover'></div>
</div>
</div>
</div>
</div>
<div id='bloc-droite'>
<div id='content-bloc-droite'>
<div class='row'>
<img src='http://94.23.46.98/img/logo-qpV2.png' style='width:25%;' class='center-block'>
</div>
<div class='row'>
<div id='description' style='text-align:center;' class='center-block'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis veritatis, fugit quia repudiandae est dignissimos modi expedita ullam totam, aliquid odit voluptas omnis dolores nemo nam
</div>
</div>
<div class='row'>
<div class='video-player-container center-bloc'>
<video controls class='video-player center-block' style='min-width:475px;max-width:40%;'>
<source src='http://web1.fr-hmd.com/adpulse/videos-adpulse/joon-1.mp4' type="video/mp4">
</video>
</div>
</div>
<div class='footer-bloc-droite'>
<div class='row'>
<div id='logo-joon'>
<img src='http://94.23.46.98/img/logo-joon.png' width='150px;'>
</div>
<div id='btn-xp'>
Démarrer l'expérience de voyage
</div>
<div id='joon-p'>
<img src='http://94.23.46.98/img/logo-pV2.png' width='240px;' id='joon-p-img'>
</div>
<div style='clear:both'></div>
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
</div>
I'm designing this box but I have the following problem. I have an image, a header and some text inside of it but I can't align the header so that it appears above the rest of the text. It ends up looking like this:
HTML:
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
CSS regarding the two text parts:
.Messagebox_title {
vertical-align:middle;
display:table-cell;
text-align:center;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:table-cell;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}
You could use flexbox, you would need to wrap the text in an additional div.
Example:
.Messagebox_title {
text-align: center;
}
.Messagebox {
text-align: justify;
margin: 0 2px;
}
.box {
font-size: 15px;
font-family: monaco, monospace;
display: flex;
color: #555;
}
.text_wrapper {
display: flex;
flex-direction: column;
}
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<div class="text_wrapper">
<div class="Messagebox_title">
<h1>Favorites category
</h1>
</div>
<div class="Messagebox">
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
</div>
You can also do something similar with CSS Grid, which reduces the amount of HTML needed.
.Favorites {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 1em;
font-size: 15px;
font-family: monaco, monospace;
color: #555;
}
.picture {
grid-row: 1 / 3;
}
h1 {
grid-column: 2;
text-align: center;
}
h4{
grid-column: 2;
grid-row: 2;
text-align: justify;
margin: 0 2px;
}
<div class='Favorites'>
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<h1>Favorites category</h1>
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>
Try changing according to your need
.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}
<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>
You are doing fine.
Your code works by making a small change.
Just change display: to block and add float: left to your picture.
<style>
.picture
{
float:left;
margin-right:10px;
}
.Messagebox_title {
vertical-align:middle;
display:block;
text-align:left;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:block;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}
</style>
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
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;
};
});
});
I tried to search my problem's solution but i couldnt't find it because of my bad english so i apologize if my question have an answer already.
I want place my button to there that i showed you in image. If possibly i want to do this with 'flex'. But doesn't matter.
Here is the code (i wrote just this section)
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-image: url('img/bg.png');
font-family: 'Roboto', 'sans-serif';
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.container{
padding-left:2rem;
padding-right:2rem;
}
.container-deep{
padding-left:8rem;
padding-right:8rem;
}
/*about-me start*/
.about-me .card{
background:white;
box-shadow:2px 2px 15px rgba(0,0,0,0.4);
padding:4rem;
display:flex;
border-radius:10px;
}
.about-me .card-info{
margin-left:5rem;
display:flex;
flex-direction: column;
}
.about-me .card .card-info h3{
margin-top:.3rem;
margin-bottom:1rem;
font-size:.8rem;
font-weight: bold;
}
.about-me .card .card-info p{
opacity:.8;
margin-bottom:1rem;
}
.about-me .card .card-info a{
background:black;
border: 1px solid black;
color:white;
padding: .7rem 1.5rem .7rem 1.5rem;
align-self: flex-end;
justify-self: center;
}
.about-me .card .card-info a:hover{
background:white;
color:black;
border: 1px solid black;
}
.about-me .card .card-image img{
width:125vh;
}
/*about-me end*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Emir">
<meta name="keywords" content="full, stack, web, development">
<meta name="description" content="Full Stack Web Development">
<title>Full-Stack Web Site</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="about-me container">
<div class="card">
<div class="card-image">
<img src="https://images.pexels.com/photos/2941570/pexels-photo-2941570.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
</div>
<div class="card-info">
<h1>About Me</h1>
<h3>Full-Stack Web Developer</h3>
<p>
Merhaba, ben Emir.
Kendimi web alanında geliştirebilmek adına sürekli araştırmalar yaparak full-stack developer olmayı hedefliyorum.
Yaptığım çalışmaları ve sahip olduğum referansları sunabilmek adına bu siteyi yazdım.
</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus illo deleniti nostrum praesentium dignissimos pariatur magnam ipsum perferendis aut ab. Voluptatum, ut sapiente. Fuga dolor corporis quis temporibus quos qui.</p>
Visit My Blog
</div>
</div>
</div>
</section>
</body>
</html>
Using propriety position:relative|absolute to reslove your problem.
Add this in your code :
//Your button "Visit My Blog"
a{
position: absolute;
bottom: 0;
right: 0;
}
//Your content
div.card-info{
position: relative;
}
Using flex, you have to go for a column logic and space-between the child containers like so:
#container {
display: flex;
flex-direction: column;
height: 45vh;
width: 40vw;
justify-content: space-between;
border-style: solid;
border-width: 2px;
border-color: blue;
}
#button {
border-style: solid;
border-width: 2px;
border-color: red;
width: 10vw;
}
<html>
<body>
<div id="container">
<div id="text">This is the about me text</div>
<div id="button">this is the button</div>
</div>
</body>
</html>