I've seen some posts about this issue, but nothing's working for me right now. I have a div inside of which are many spans. The spans are running off the page. Can anyone help me please wrap the spans to keep them on the page?
HTML:
<div id="creditsbar">
<span class="title">Writing</span> <span class="name">Bob, Mary</span>
<span class="smallsquare">■</span>
<span class="title">Editing</span>
<span class="name">Mary, Bob</span>
<span class="smallsquare">■</span>
<span class="title">Design</span>
<span class="name">Bob</span>
<span class="smallsquare">■</span>
<span class="title">Development</span>
<span class="name">Mary</span>
<span class="smallsquare">■</span>
</div>
CSS:
#creditsbar {
width: 100%;
background color: lightgray;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
max-height: 10%;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
padding-bottom: 10px;
max-width: 100%;
vertical-align: top;
}
#creditsbar span {
word-wrap: normal;
display: inline-block;
}
#creditsbar .title {
text-transform: uppercase;
font-size: 80%;
font-weight: 600;
padding-right: 5px;
}
#creditsbar .name {
}
#creditsbar .smallsquare {
padding: 0 10px;
}
It's because of padding-left: 20%; inside
#creditsbar {
width: 100%;
color: #333;
font-family: "Muli", Helvetica, Arial;
padding-left: 20%;
}
remove that line and it will work fine
else use box-sizing: border-box; as suggested by #Andy
Related
I try to create a set of nav buttons that look like this
I was trying with mix-blend-mode but had no success. Would anyone have a suggestion on how I should achieve this?
So far I did this
.nav {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #b3b3b3;
}
.skills-btn {
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.6rem;
background-color: #000;
color: white;
text-decoration: none;
border-radius: 60px;
height: 45px;
display: inline-flex;
align-items: center;
overflow: hidden;
width: auto;
max-width: 45px;
-webkit-transition: max-width 0.5s;
transition: max-width 0.5s;
z-index: 9999;
margin: 0 2px;
}
.skills-btn:hover {
max-width: 300px;
}
.icon {
margin-right: 23px;
padding: 0px 12px;
display: flex;
align-items: center;
}
.text {
white-space: nowrap;
padding-right: 15px;
}
.skills {
position: fixed;
bottom: 10;
left: 20;
font-size: 3.8rem;
line-height: 1.8em;
font-family: Roboto, sans-serif;
font-weight: 600;
}
<div id="nav" class="nav">
<a href="#" class="skills-btn">
<span class="icon"></span>
<span class="text">App Skills </span>
</a>
<a href="#" class="skills-btn">
<span class="icon"></span>
<span class="text">Language Skills</span>
</a>
<a href="#" class="skills-btn">
<span class="icon"></span>
<span class="text">Fields of Experties</span>
</a>
<span class="skills">skills</span>
</div>
This can be achieved using
an additional DIV .nav-content in order to move the gray background to the common parent wrapper element (.nav)
use filter: invert(100%) on that .nav-content inner element
Invert the default initial buttons colors! Background has to be white, color has to be black. Use mix-blend-mode: difference;
on buttons hover use mix-blend-mode: normal;, use the normal colors background: #000; color: #fff; and to prevent mousemove flickers bug on Chrome use also filter: invert(100%);
body {
font: 1.2rem/1.6rem Roboto, sans-serif;
}
.nav {
background: #b3b3b3;
height: 100vh;
display: flex;
}
.nav-content {
display: flex;
margin: auto;
justify-content: center;
align-items: center;
gap: 0.4rem;
filter: invert(100%);
}
.skills {
position: absolute;
font-size: 3.8rem;
line-height: 1.8em;
font-weight: 600;
color: #fff;
}
.skills-btn {
text-decoration: none;
border-radius: 4rem;
height: 45px;
display: inline-flex;
white-space: nowrap;
align-items: center;
overflow: hidden;
max-width: 45px;
transition: max-width 0.5s;
background: #fff;
color: #000;
mix-blend-mode: difference;
}
.skills-btn:hover {
max-width: 300px;
/* Invert on hover and prevent mousemove flickering bug Chrome */
mix-blend-mode: normal;
background: #000;
color: #fff;
filter: invert(100%);
}
.text {
transition: opacity 0.5s;
opacity: 0;
padding: 0 1.5rem;
}
.skills-btn:hover .text {
opacity: 1;
}
<div id="nav" class="nav">
<div class="nav-content">
<span class="skills">skills</span>
<a href="#" class="skills-btn">
<span class="text">App Skills </span>
</a>
<a href="#" class="skills-btn">
<span class="text">Language Skills</span>
</a>
<a href="#" class="skills-btn">
<span class="text">Fields of Experties</span>
</a>
</div>
</div>
Hello i am a beginner in css and i want to recreate this:
this is my current start,i don`t know how to put the ' " '
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 85px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
`
Try to use a :before, something like this should give you an approximative result
#rectangle p:before {
content: '"';
position: absolute;
color: yellow;
font-size: 2em;
transform: translateY(-100%);
}
As a beginner the inclusion of other libraries or pseudo elements may be tricky. Here's a rather straightforward start.
.blue-box {
background: #2edfd2;
padding: 10px 40px;
width: 300px;
}
.lquote {
color: #ace941;
font-size: 60px;
height: 20px;
}
.underline {
background-color: #ace941;
height: 4px;
width: 20px;
}
.fine-print {
margin: 4px 0 0;
font-size: .6em;
}
<div class="blue-box">
<div class="lquote">“</div>
<p>Knowing I was adopted may have made me feel more independent, but I have never felt abandoned. My parents made me feel special.
<div class="underline"></div>
<p class="fine-print">Steve Jobs, 2009</p>
</div>
There can be many ways of doing this, one of which is that you can use icons.
Like I personally use fontawesome.
You can get many icons of different sizes just use them with an online css file.
http://fontawesome.io/icon/quote-left/
This is the link to the quotes that you want to insert
I created a prototype for you.
https://codepen.io/djmayank/pen/opYeyo
#rectangle{
width: 100%;
height: 230px;
background-color:darkcyan;
display: block;
margin: 0px;
}
#rectangle p{
padding-top: 5px;
padding-left: 60px;
padding-right: ;
font-family: roboto_bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
font-size: 38px;
color: aliceblue
}
.fa {
color:#abe941;
margin-top:3%;
margin-left:10%;
}
<div id="rectangle">
<i class="fa fa-quote-left fa-2x" aria-hidden="true"></i>
<p>Loreim ispum Loreim ispumLoreim ispum Loreim </p>
</div>
<script src="https://use.fontawesome.com/8d594f9226.js"></script>
I was doing some CSS, and my divs keep piling up underneath each other. I tried using position on them but it didn't work. My work is below. The picture I have in it will not be available to you as it is from my computer, but I hope you can get the idea of what my issue is(The sitelingo and Capture12 are the ones piling up):
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
padding-left: 470px;
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
padding-left: 232px;
padding-top: 24px;
}
#barone {
position: fixed;
float: left;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#bartwo {
postition: fixed;
float: right;
width: 50%;
height: 70px;
background-color: #0A4076;
}
#login {
padding-left: 400px;
position: absolute;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="images/Capture12.png" /> </div>
</div>
</body>
</html>
A couple of issues:
You set a position:fixed to #barone. This will position the element relative to the actual screen.
You have elements positioned absolute, when the screen resizes, it will overlap with other elements
A padding left is set on your logo, this makes it out of viewpoint
Maybe you may want something as depicted below
#logomain {
font-family: museo-sans-rounded, sans-serif;
font-size: 33px;
color: white;
font-weight: 600;
padding-top: 13px;
/* padding-left: 470px;*/
}
#sitelingo {
font-family: museo-sans-rounded, sans-serif;
font-size: 14px;
font-weight: bold;
position: relative;
color: white;
/*padding-left: 232px;*/
padding-top: 24px;
}
#bar_container {
background-color: #0A4076;
}
#barone {
/* position: fixed;*/
height: 70px;
background-color: #0A4076;
display: inline-block;
}
#bartwo {
postition: fixed;
float: right;
height: 70px;
background-color: #0A4076;
}
#bartwo *{
display:inline-block;
}
#login {
position:relative;
/*padding-left: 400px;
position: absolute; */
vertical-align: middle;
top:0;
}
#login img{
width:100px;
height:100%;
}
body {
margin: 0;
}
.bold {
font-weight: bold;
}
<head>
<title>Duolingo</title>
</head>
<body>
<div id="bar_container">
<div id="barone">
<div id="logomain"> duolingo </div>
</div>
<div id="bartwo">
<div id="sitelingo"> Site language: English </div>
<div id="login"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRgKSOJmOr8tNodELaCLPrI1T2XE7iwrpuxPDGuFeoJwlJC4AVKZw" /> </div>
</div>
</div>
</body>
</html>
I am going crazy. I have read dozens of blog articles and different stackoverflow postings but I am unable to vertically center a FontAwesome icon which is placed as content inside a css before pseudo element of a link element.
This is my CSS Code:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
}
And thats the HTML code:
<a class="button back">back to<br/>whatever</a>
Here you can find a fiddle which shows my problem: https://jsfiddle.net/r1vysfaf/1
UPDATE:
I want to avoid using javascript to solve the styling issue. Furthermore the text of the link is dynamic and therefore it is not a solution to use "constant magic" spacings for paddings/margin/top.
Use display: table for parent and table-cell for child and alter your css as following:
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: table;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 10px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
line-height: 1em;
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="button back">back to<br/>whatever</a>
UPDATE
Added the forward button, plus position values in ems so an increase or decrease of font sizes or element will not offset the icon.
Instead of absolute , use relative on the pseudo-element.
FIDDLE
SNIPPET
a.button {
background-color: green;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
position: relative;
display: inline-block;
}
a.button.forward {
padding-right: 35px;
}
a.button.back {
padding-left: 35px;
}
a.button.back:before {
font-family: FontAwesome;
content: "\f100";
font-size: 1em;
position: relative;
top: .625em;
bottom: 0;
right: 1.25em;
}
a.button.forward:after {
font-family: FontAwesome;
content: "\f101";
font-size: 1em;
position: relative;
top: -.5em;
left: 1.25em;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<a class="button back">Back to<br/>whatever</a>
<a class="button back" style='font-size: 1.5em'>Font-size is<br/>increased by 50%</a>
<a class="button forward">Next to<br/>whatever</a>
<a class="button forward" style='font-size: .5em'>Font-size is<br/>decreased by 50%</a>
I want to align the list items horizontally. But i'm not getting them in a line. If i remove the br tag inside the first li then its aligning perfectly. What am i missing? please help. jsfiddle code -> here
html:
<div id="info_new_cont">
<ul id="info_new_ul">
<li id="app_no_li">
<div>
<div id="app_no_title">Appn<br> No:</div>
<div id="app_no" class="info_new_bottom">42382464</div>
</div>
</li>
<li id="new_li">
<div>mcs</div>
<div id="new_case" class="info_new_bottom">New Case</div>
</li>
<li id="ifw_li">
<div>ld</div>
<div id="file_wrap" class="info_new_bottom">More Info</div>
</li>
</ul>
</div>
here is the style
#info_new_cont {
float: right;
display: inline-block;
width: 500px;
height: 100%;
margin: 0px;
}
#info_new_ul {
list-style: none;
margin: 0px;
width: 400px;
height: 140px;
}
#info_new_ul li {
display: inline-block;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
.info_new_bottom {
margin-top:30px;
}
#app_no_li {
width: 120px;
height: 120px;
background-color: #00ddff;
}
#app_no_cont {
white-space: nowrap;
}
#app_no_title {
}
#app_no {
font-weight: bold;
}
#new_li {
width: 120px;
height: 120px;
background-color: #eee;
}
#ifw_li {
width: 120px;
height: 120px;
background-color: #eee;
}
Delete the display: inline-block; from de #info_new_ul li
and use a float:left for the <li>.
#info_new_ul li {
....
float:left;
}
Your JsFiddle but updated with the new code
You should use float:left for li tags.
#info_new_ul li {
float:left;
margin-left: 2px;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
DEMO