.site_title {
/*text-overflow: ellipsis;*/
overflow: visible;
font-weight: 400;
font-size: 22px;
width: 100%;
color: #ECF0F1 !important;
margin-left: 150px !important;
line-height: 59px;
display: block;
height: 55px;
margin: 0;
padding-left: 10px;
}
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title">
<i class="fa fa-paw"></i> <span>Gentellela Alela!</span>
</a>
</div>
I want to make the contents visible if overflowed. I have set overflow:visible but still the extra contents are clipped.
You mean like this?
.site_title {
/*text-overflow: ellipsis;*/
overflow: visible;
font-weight: 400;
font-size: 22px;
width: 100%;
color: #ECF0F1 !important;
line-height: 59px;
display: block;
height: 55px;
margin: 0;
padding: 0;
}
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title">
<i class="fa fa-paw"></i> <span>Gentellela Alela!</span>
</a>
</div>
Related
Sorry for the simplicity of this question. This doesnt work by any way, I dont know what else to do.
This image shouldnt be selected? I've tried lot of ways to select it but its not being selected.
I may be making a fool mistake.
HTML
<div class="social-media__banner">
<ul>
<li>
<a href="">
<img id="icon-test" src="images/github.svg" alt="github">
</a>
</li>
<li>
<a href="">
</a>
</li>
<li>
<a href="">
</a>
</li>
</ul>
</div>
CSS
.social-media__banner {
margin-top: 20px;
position: absolute;
top:500px;
left: 0;
width: 100%;
height: 200px;
ul{
left: 0rem;
width: 30px;
display: flex;
padding: 0;
li{
margin: 0 10px;
list-style: none;
font-size: 20px;
padding: 20px 20px;
color: white;
a{
position: relative;
display: block;
width: 50px;
height: 50px;
background-color: white;
color: black;
text-align: center;
border-radius: 50%;
overflow: hidden;
}
}
}
}
#icon-test{
height: 24px;
margin-top: 11px;
}
*I've checked on the inspector tool and it does not even select.
Thanks
If not for the cleanliness alone, why nest all of those selectors? Stick with the basics and you won't go wrong. You are saving yourself having to write .social-media__banner only a few times in your code.
.social-media__banner {
margin-top: 20px;
position: absolute;
top:500px;
left: 0;
width: 100%;
height: 200px;
}
.social-media__banner ul{
left: 0rem;
width: 30px;
display: flex;
padding: 0;
}
.social-media__banner li{
margin: 0 10px;
list-style: none;
font-size: 20px;
padding: 20px 20px;
color: white;
}
.social-media__banner a{
position: relative;
display: block;
width: 50px;
height: 50px;
background-color: white;
color: black;
text-align: center;
border-radius: 50%;
overflow: hidden;
}
#icon-test{
height: 24px;
margin-top: 11px;
}
<div class="social-media__banner">
<ul>
<li>
<a href="">
<img id="icon-test" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="github">
</a>
</li>
<li>
<a href="">
</a>
</li>
<li>
<a href="">
</a>
</li>
</ul>
</div>
I'm working on a navbar where I will have a burger menu for toggling an extended menu.
I want to avoid to explicitly set a width to the burger menu element (.extendedMenu__toggle) and have it scale based on the font-size set on .header if possible.
The element gets it height from the parent as it's flex, but not sure how I can translate that into a proper width property so that I get a perfect square.
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 1.3rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div class="extendedMenu__toggle">
<span></span>
<span></span>
<span></span>
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>
Option #1: Use Javascript. After the element renders you would check the height then set flex-basis to element height. I also set overflow: hidden since my content is "not square".
SO's code snippet seems not to like window.onload so here's a codepen example
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 4rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
overflow:hidden;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div id="box" class="extendedMenu__toggle">
menu
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>
Option #2: Use an image. This is kinda hacky but a square image will try to retain its proportions long as it's rendered in the HTML. Here are a few ways, available:
place an image of the hamburger menu with a transparent background in HTML. (go large so you're not scaling up, just down).
place a 10px x 10px transparent image in HTML and absolutely position other content on top of it.
create a pseudo class with content: url(image.jpg); in the CSS then layer content above it.
The first is the easiest to show so I'm doing that one. I would add a max-height to the image so it doesn't get out of control.
html {
font-size: 62.5%;
}
html, body {
font-family: helvetica;
line-height: 1.45;
}
.header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
font-size: 4rem;
font-weight: bold;
}
.nav {
display: flex;
justify-content: flex-start;
margin: 0;
position: relative;
z-index: 5;
margin: 1rem;
}
.extendedMenu__toggle {
/*width: 37px;
height: 37px;*/
background: red;
}
.extendedMenu__toggle img {
display:block;
max-height: 6rem;
}
.navLink {
padding: 0.75rem 1.25rem;
text-decoration: none;
border: 2px solid;
border-radius: 30px;
margin-left: 0.75rem;
text-transform: uppercase;
}
.navLink:first-child {
margin-left: 0;
}
<header class="header" role="banner">
<nav class="nav">
<div class="extendedMenu__toggle">
<img src="https://cdn1.imggmi.com/uploads/2018/10/15/e86f8a312edd60d643c8d80212b64dba-full.png" />
</div>
<a class="navLink" href="#">Home</a>
<a class="navLink" href="#">About</a>
<a class="navLink" href="#">News</a>
</nav>
</header>
There seems to be a gap between the footer and main body. i want the body to touch the footer, as seen i want it to completely fill up the space in the middle.
https://ibb.co/dUpFJF
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
position: absolute;
color: #FFF;
text-align: center;
left: 0;
bottom: 0;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
When using floats you disturb the normal document flow. Change the definition of .foot as follows:
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Droid Sans', sans-serif;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
min-height: 100%;
}
.div_top1 {
height: 30px;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #FFF;
background-color: #2d2d2d;
}
.div_top2 {
height: 150px;
width: 100%;
background-color: #072135;
}
.main_container {
width: 100%;
margin: 0 auto;
background-color: #FFF;
overflow: auto;
min-height: 100%;
display: inline-block;
}
.container_right {
height: 100%;
padding-left: 20px;
margin: 0 auto;
}
.container_left {
float: left;
text-align: left;
border-right: 2px solid #5a5c5d;
border-bottom: 1px solid #5a5c5d;
height: 100%;
overflow: hidden;
}
.bk {
border-top: 4px solid #da6161;
display: table;
height: 200px;
margin: 0 auto;
margin-top: 30px;
padding: 8px;
}
.icon {
float: left;
display: block;
}
.icon-bar {
width: 70px;
/* Set a specific width */
background-color: #FFF;
/* Dark-grey background */
height: 100%;
}
.icon-bar a {
display: block;
/* Make the links appear below each other instead of side-by-side */
text-align: center;
/* Center-align text */
padding: 16px;
/* Add some padding */
transition: all 0.3s ease;
/* Add transition for hover effects */
color: black;
/* White text color */
font-size: 27px;
/* Increased font-size */
height: 100%;
}
.icon-bar a:hover {
background-color: #5a5c5d;
/* Add a hover color */
}
.active {
background-color: #818384;
/* Add an active/current color */
}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: auto;
background-color: #da6161;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
font-size: 20px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
margin-left: 36px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.foot {
background-color: #2d2d2d;
color: #FFF;
text-align: center;
float: left;
height: 35px;
width: 100%;
border-top: 3px solid #9c9d9e;
padding-top: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="div_top2"> </div>
<div class="main_container">
<div class="container_left">
<div class="icon_menu">
<div class="icon-bar">
<a class="active tooltip" href="#">
<span class="tooltiptext">Home</span>
<i class="fa fa-home"></i>
</a>
<a class="tooltip" href="#">
<span class="tooltiptext">My Story</span>
<i class="fa fa-black-tie"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Companies</span>
<i class="fa fa-building"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Blog</span>
<i class="fa fa-paper-plane"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Ask Me Anything</span>
<i class="fa fa-quora"></i>
</a>
<a href="#" class="tooltip">
<span class="tooltiptext">Contact</span>
<i class="fa fa-address-card"></i>
</a>
</div>
</div>
</div>
<div class="container_right">
<div class="bk"></div>
</div>
</div>
<div class="foot">
Copyright 2017
</div>
you made the footer element absolutely positioned relative to parent(body tag).
try wrapping your code in a after element
html
<body>
<div class="wrapper">
<!-- your code here -->
</div>
</body>
css
.wrapper
{
position:relative;
}
hope this works...
I have a navbar with a few elements inside it and a button that escapes the navbar when i resize it. What CSS property should I style to keep the button in CSS to stop the button from escaping the navbar?
Attached is a JFiddle of an example of what happens:
https://jsfiddle.net/6Lx0hkfa/
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
float: left;
margin-left: 235px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
<a href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
</div>
</section>
I don't know what you are trying to achieve, but this one worked for me:
.green-button {
position: absolute;
}
This is a case where I would use float for simplicity. Note that this requires to put the link element on top of the rest of the wrapper's contents within the markup, but it's the most direct solution.
.green-button-link {
float: left;
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
margin-right: 20px;
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<a class="green-button-link" href="/contacts">
<button class="green-button">Book Consultation</button>
</a>
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social">
<a class="social-btn fb" href="http://facebook.com"></a>
</div>
<div class="social">
<a class="social-btn tw" href="http://twitter.com"></a>
</div>
<div class="social">
<a class="social-btn ig" href="http://instagram.com"></a>
</div>
<div class="social">
<a class="social-btn gp" href="https://plus.google.com"></a>
</div>
</div>
</section>
check the snippet if its what you want.i added description add to ones I added to your code.
* {
margin: 0;
padding: 0;
}
body {
background: url(img/hero_bg.jpg) repeat-y center center fixed;
background size: 100%;
}
#header {
background-color: #1d7cb6;
display: block;
/* position: relative; */
color: white;
width: 100%;
height: 50px;
}
.wrapper {
text-align: center;
margin: 0px auto;
font-family: 'Raleway';
background: white;
z-index: 500;
vertical-align: middle;/* add */
position: relative;/* add */
padding-right: 200px;
}
.address {
display: inline-block;
width: 240px;
float: left;
display: inline-block;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.phone {
display: inline-block;
width: 100px;
float: left;
height: 100%;
font-size: 10px;
padding: 20px 18px;
}
.email {
width: 150px;
float: left;
display: inline-block;
height: 100%;
padding: 20px 18px;
font-size: 10px;
}
a.social-btn {
width: 20px;
height: 20px;
margin-top: 13px;
float: left;
}
a.social-btn.fb {
background: url("img/facebook#2x.png") 0% 0%/ 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.tw {
background: url("img/twitter#2x.png") 0% 0% / 20px 20px no-repeat;
display: inline-block;
}
a.social-btn.ig {
background: url("img/instagram#2x.png") 0% 0% / 20px 20px no-repeat;
}
a.social-btn.gp {
background: url("img/google#2x.png") 0% 0% / 20px 20px no-repeat;
}
section {
width: 900px;
margin: 0 auto;
}
section#header .wrapper button.green-button {
text-decoration: none;
font-family: 'Raleway';
}
.green-button {
font-size: 13px;
display: inline-block;
height: 50px;
width: 170px;
/* float: left; */
right: 0;/* add */
position: absolute;/* add */
/* margin-left: 235px; */
padding: 6px 10px;
background-color: rgb(185, 233, 137);
color: rgb(43, 150, 190);
text-transform: uppercase;
border-radius: 0px;
border-width: 0px;
border-style: initial;
border-color: initial;
box-sizing: border-box;
}
<section id="header">
<div class="wrapper">
<div class="address">7542 Fay Ave Upstairs Suite, La Jolla, CA 92037</div>
<div class="phone">(858) 381-0740</div>
<div class="email">sdacneclinic#gmail.com</div>
<div class="social"><a class="social-btn fb" href="http://facebook.com"></a></div>
<div class="social"><a class="social-btn tw" href="http://twitter.com"></a></div>
<div class="social"><a class="social-btn ig" href="http://instagram.com"></a></div>
<div class="social"><a class="social-btn gp" href="https://plus.google.com"></a></div>
<button class="green-button">Book Consultation</button>
</div>
</section>
I've been trying to get this list of buttons to have a scroll bar and scroll on table and smaller screens. I've add two divs for inner and outter to add overflow: hidden on outter and overflow: auto on inner. I can't seem to get this to work. Can anyone tell me what I'm missing?
Created a JSFiddle as asked and it works here. Maybe it is an issue with my SASS
http://jsfiddle.net/tuckerjoenz/p9afq4y9/
HTML
<div class="circle-outer">
<div class="circle-button-menu-container">
<ul class="field field-name-field-link-button field-type-entityreference field-label-hidden">
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#parents">
<div class="circle-image">
<img class="active" src="../images/Parent_2_0.jpg">
</div>
<div class="button-title">Parents</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#kids">
<div class="circle-image">
<img class="active" src="../images/kids_JPEG_0.jpg">
</div>
<div class="button-title">Kids</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#educators">
<div class="circle-image">
<img class="active" src="../images/Educator_JPEG_0.jpg">
</div>
<div class="button-title">Educators</div>
</a>
</li>
<li class="link-button">
<span property="dc:title" class="rdf-meta element-hidden"></span>
<a class="circle-button" href="#volunteer">
<div class="circle-image">
<img class="active" src="../images/volunteer_JPEG_0.jpg">
</div>
<div class="button-title">Volunteer</div>
</a>
</li>
</ul>
</div>
</div>
SASS
.circle-outer {
height: 350px;
display: block;
margin: 0 auto;
width: 100%;
margin-top: -200px;
padding: 100px 0px 0px;
overflow: hidden;
.circle-button-menu-container {
overflow: auto;
.field-name-field-link-button {
text-align: center;
display: block;
width: 1000%;
z-index: 100;
list-style-type: none;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
.link-button {
margin: 0px 46px 10px;
float: left;
text-decoration: none;
list-style: none;
position: relative;
display: block;
width: 170px;
a.circle-button {
display: block;
text-decoration: none;
.circle-image {
border: 10px solid white;
border-radius: 50%;
box-shadow: 0 4px 2px -2px gray;
overflow: hidden;
width: 170px;
height: 170px;
img {
display: block;
min-width: 100%;
min-height: 100%;
width: 100%;
}
&:hover, &:active {
border: 10px solid #b6b6b6;
box-shadow: none;
}
}
.button-title {
text-transform: uppercase;
color: #40749e;
font-weight: bold;
font-size: 1.3em;
margin-top: 10px;
}
&:before, &:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
&:before {
bottom: -33px;
left: 39%;
border-top-color: #b6b6b6;
border-width: 17px;
}
&:after {
bottom: -28px;
left: 40%;
border-top-color: #fff;
border-width: 15px;
}
}
}
}
}
}
Ok I figured this out. I had to remove the position: absolue on the .circle-button-menu-container class and it works! Thanks!
You could try overflow:scroll