I can't make my background only in my text..allways go futher until the end of the screen.
Any idea what i'm doing wrong?
Here's my HTML:
<div class="textSlide">
<span id="firstTitle">We help you find everyone you</span>
<span id="secondTitle">need to get you started.</span>
<span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
<span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>
Here's my CSS:
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }
FIDDLE
Change the display: block, to display: inline-block;
http://jsfiddle.net/w456u/1/
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }
Related
I need two texts to be stacked like this using CSS:
I tried this code:
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.special-order>span {
display: inline-block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.special-order>span {
background: #000000;
color: #f58220;
display: block;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I’m getting some space between the two texts. Help me with this.
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
span.special {
background: #000000;
color: #f58220;
display: block;
font-weight: 700;
line-height: 1.3;
padding: 0 4px;
border: 1px solid white;
border-radius: 2px;
}
.order {
display: inline-block;
font-weight: 600;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1;
border-radius: 1px;
}
<div class="sp-order">
<span class="special">Special </span>
<span class="order">Order</span>
</div>
You can try this :
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span:first-child {
display:block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.sp-order>span:last-child {
background: #000000;
color: #f58220;
padding: 0 2px;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Just change your second CSS selector to .sp-order>span
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span {
background: #000000;
color: #f58220;
display: block;
padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
background: #ddd;
color: #fa0;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
How would I go about adding a sticky footer to the bottom of my page that isn't fixed. I made the mistake of adding the footer to my website last. The footer would be on top of an absolute positioned image. I tried using the absolute position, min-height solution but it didn't work. The footer isn't at the bottom of the total page (it will be at the bottom of the page of the initial starting position). Here is the HTML code and CSS code. I'm not sure where the issue/conflict and I have tried scanning and looking in the code but can't see it. HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Home </title>
<meta name="description" content="A music review website">
<link rel="stylesheet" href="css/main.css">
</head>
<body class="homepage">
<header>
<a href="index.php">
<img class="banner"
src="Pictures/second_banner_image_blue.jpg">
</a>
</header>
<nav>
<a class="homelink" id="activehome" href="index.php">Home</a>
<a class="reviewasonglink" href="Review_a_song.php">Review a
song</a>
<a class="reviewslink" href="Sort_by_rating.php">Reviews</a>
<a class="faqlink" href="faq.php">FAQ</a>
<a class="contactlink" href="contactpage.php">Contact us</a>
<form method="get" action="search.php">
<input type="text" name="q" class="searchbox"
placeholder="Search for a song, album or artist here...">
<input type="image" name="Search"
src="Pictures/magnifyingglass.png" class="searchbutton">
</form>
</nav>
<a href="Review_a_song.php"><img class="homepic1"
src="Pictures/concert_edit.jpg"></a>
<a href="Review_a_song.php"><p class="hometitle1">Review your
favourite music</p></a>
<a href="sort_by_rating.php"><img class="homepic2"
src="Pictures/songreviews_edit.jpg"></a>
<a href="sort_by_rating.php"><p class="hometitle2">Read
comprehensive reviews</p></a>
<a href="faq.php"><img class="homepic3"
src="Pictures/questions_edit.jpg"></a>
<p class="hometitle3">Questions?</p>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: opensans; src: url('fonts/OpenSans.tff');
font-family: roboto; src: url('fonts/Roboto.tff');
font-family: robotobold; src: url('fonts/RobotoBold.tff');
font-family: headings; src: url('fonts/adamcg.otf');
}
html {
position: relative;
min-height: 100%;
}
body {
margin:0px;
padding: 0px;
height: 100%;
overflow-x: hidden;
background-attachment: fixed;
}
.homepage {
background-attachment: scroll;
}
.homepic1 {
height: 100%;
width: 100%;
position: absolute;
cursor: pointer;
}
.homepic2 {
height: 80%;
width: 100%;
position: absolute;
cursor: pointer;
transform: translateY(500px);
}
.homepic3 {
height: 100%;
width: 100%;
position: absolute;
cursor: pointer;
transform: translateY(972px);
}
header {
height: 86px;
}
a {
text-decoration-line: none;
}
.background {
display: block;
height: 100%;
}
a:visited {
color: currentColor;
}
h1 {
margin-left: 53px;
margin-top: 80px;
color: white;
font-family: opensans, sans-serif;
}
h2 {
margin-left: 46px;
text-decoration-line: underline;
color: white;
position: absolute;
transform: translateY(428px);
font-family: opensans, sans-serif;
}
h4 {
font-size: 30px;
font-family: opensans, sans-serif;
}
.review_content{
margin-left: 53px;
transform: translateY(50px);
color: white;
font-family: opensans, sans-serif;
}
nav {
width: 100%;
height: 40px;
background-color:white;
border: 0.5px solid black;
z-index: 1;
position: fixed;
}
nav a{
width:11.4%;
float: left;
text-align: center;
height: 30px;
padding-top: 10px;
color: black;
}
.homelink {
margin-left: 0px;
}
.hometitle1 {
color: black;
margin-top: 90px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
margin-left: 200px;
font-weight: 600;
text-shadow: 2px 2px 6px #565656;
cursor: pointer;
}
.hometitle2 {
color: black;
margin-top: 0px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
color: #16308d;
margin-left: 190px;
font-weight: 600;
text-shadow: 3px 3px 6px #0f2163;
transform: translateY(600px);
cursor: pointer;
}
.hometitle3 {
color: black;
margin-top: 0px;
font-size: 65px;
position: absolute;
font-family: headings, sans-serif;
color: #510000;
margin-left: 440px;
font-weight: 600;
text-shadow: 2px 2px 6px #450000;
transform: translateY(1070px);
cursor: pointer;
}
.reviewasonglink, .reviewslink, .contactlink, .faqlink, .homelink {
transition: 0.4s;
font-size: 16px;
text-decoration: none;
font-family: opensans, sans-serif;
}
.reviewasonglink:hover, .reviewslink:hover, .contactlink:hover,
.faqlink:hover, .homelink:hover {
background-color: #404040;
color:#e6e6e6;
}
#activesortbyrating, #activereviewasong, #activecontact, #activefaq,
#activehome {
background-color: #5e5e5e;
color:#e6e6e6;
}
#activesortbyrating:hover, #activereviewasong:hover, #activecontact:hover,
#activefaq:hover, #activehome:hover {
background-color: #404040;
color:#e6e6e6;
}
.banner {
z-index: 1;
position: fixed;
}
.searchbox {
float: right;
width: 230px;
margin-right: 80px;
padding: 5px;
height: 29px;
}
input::placeholder {
color: black;
font-size: 12.8px;
font-family: opensans, sans-serif;
}
input[name="q"] {
font-family: opensans, sans-serif;
border: none;
padding-bottom: 0px;
border-bottom: 0.8px solid black;
}
textarea:focus, input:focus{
outline: none;
}
.formentries {
margin-top: 80px;
margin-left: 53px;
color: white;
font-family: opensans, sans-serif;
}
.warning {
font-weight: bold;
}
.formentry {
font-size: 20px;
font-weight: bold;
font-family: opensans, sans-serif;
}
.searchbutton {
float: right;
width: 35px;
height: 35px;
transform: translateX(273px);
font-family: opensans, sans-serif;
}
input[type="radio"] {
position: absolute;
font-family: opensans, sans-serif;
}
textarea {
border: 1px solid black;
border-radius: 5px;
background-color: lightgray;
font-family: opensans, sans-serif;
}
select {
background-color: lightgray;
}
.formbox {
font-size: 20px;
font-family: opensans, sans-serif;
border: 1px solid black;
background-color: lightgray;
border-radius: 5px;
font-family: opensans, sans-serif;
}
.contactform {
padding-left: 53px;
margin-top: 25px;
font-size: 19px;
font-weight: 600;
color: white;
font-family: opensans, sans-serif;
}
.contactinfo {
padding-left: 53px;
margin-top: 70px;
color: white;
font-family: roboto, sans-serif;
}
.contactentry {
font-size: 18px;
font-family: opensans, sans-serif;
border: 1px solid black;
background-color: lightgray;
border-radius: 5px;
font-family: opensans, sans-serif;
}
.contactmessage {
font-size:15px;
font-family: opensans, sans-serif;
}
.searchtitle, .searchartist, .searchalbum {
color: white;
transform: translateX(53px);
font-family: opensans, sans-serif;
}
.searchtitle {
font-weight: bolder;
font-size: 18px;
text-decoration-line: none;
padding-top: 20px;
}
.FAQ {
margin-left: 53px;
margin-top: 80px;
margin-right: 30px;
color: white;
font-family: opensans, sans-serif;
}
.genreoptions {
max-width: 960px;
margin-left: 45px;
margin-top: 70px;
position: absolute;
border-spacing: 1;
}
.ratingoptions {
max-width: 960px;
transform: translateX(45px);
margin-top: 277px;
position: absolute;
border-spacing: 1;
}
.reviews th {
font-weight: 400;
background: #024457;
color:white;
}
.reviews {
max-width: 960px;
margin-left: 44px;
margin-top: 520px;
position: absolute;
margin-bottom: 10px;
}
.genreoptions thead th {
font-weight: 400;
background: #8a97a0;
color: #FFF;
}
.ratingoptions thead th {
font-weight: 400;
background: #8a97a0;
color: #FFF;
}
.ratingoptions tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.genreoptions tr {
background: #f4f7f8;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.reviews tr {
background:white;
border-bottom: 1px solid #FFF;
margin-bottom: 5px;
}
.ratingoptions tr:nth-child(even) {
background: #e8eeef;
}
.genreoptions tr:nth-child(even) {
background: #e8eeef;
}
.reviews tr:nth-child(even) {
background:#e0ebfc;
}
th, td, tr {
padding: 8px;
font-weight: 300;
font-family: opensans, sans-serif;
}
.circle {
width: 17px;
height: 17px;
float: right;
padding-left: 25px;
}
input[type=radio]{
visibility: hidden;
position: absolute;
}
label > input + img{
cursor:pointer;
filter: brightness(0%);
transition: all 0.5s ease;
}
label > input:checked + img {
filter: brightness(100%);
}
label {
cursor: pointer;
display: block;
font-family: opensans, sans-serif;
}
.genreoptions, .ratingoptions td {
width: 33%;
}
.reviews tbody tr:hover td {
background-color:#d4d5d6;
}
.genreoptions tbody td:hover {
background-color: lightgray;
}
.ratingoptions tbody td:hover {
background-color: lightgray;
}
.reviews th, td {
cursor: pointer;
text-align: left;
}
.sortinfo {
position: absolute;
color: white;
transform: translate(45px, 468px);
font-family: opensans, sans-serif;
}
.filterbutton {
position: absolute;
transform: translate(45px, 405px);
width: 180px;
height: 30px;
border-radius: 20px;
background-color:white;
border: 0.5px solid midnightblue;
cursor: pointer;
font-family: opensans, sans-serif;
}
.body {
margin-top: 5px;
margin-left: 8px;
font-family: opensans, sans-serif;
}
.noreviewsinfo {
position: absolute;
transform: translate(45px, 420px);
color: white;
font-size: 30px;
font-family: opensans, sans-serif;
}
.submitbutton {
height: 30px;
width: 80px;
font-size: 16px;
margin-top: 8px;
margin-bottom: 8px;
background-color:steelblue;
color: black;
border: 0.5px solid black;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 0 1px #27496d;
font-family: opensans, sans-serif;
}
.submitbutton:hover {
filter: brightness(70%);
font-family: opensans, sans-serif;
}
.nosearchresults {
color: white;
margin-left: 53px;
margin-top: 5px;
font-size: 17px;
font-family: opensans, sans-serif;
}
footer {
height: 30px;
width: 100%;
background-color: gray;
border: 1px solid black;
}
So basically, I want to have 3 lines of text next to a <div>, like this (photoshop mockup):
This is my structure so far:
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player</span></span>
</div>
</div>
</div>
</div>
And it works... for 2 lines.
But as soon as I get a linebreak (because of the text being too long - which is supposed to happen) it just breaks the whole thing:
Any suggestions on what to do?
Set the width of .title to 70%
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
Hope this helps..Tested by me..
.gd-content .gd-c-match.in-match .gd-c-match-tutorial {
margin-top: -5px;
width: 100%;
height: 99px;
background-color: rgba(0, 0, 0, 0.66);
padding-top: 24px;
padding-bottom: 18px;
text-align: center;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section {
height: 57px;
width: 290px;
text-align: left;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title {
display: inline-block;
color: white;
font-size: 16px;
font-weight: 600;
width:70%;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .title .subtitle {
display: block;
font-weight: 400;
color: #494949;
font-size: 14px;
}
.gd-content .gd-c-match.in-match .gd-c-match-tutorial .gd-c-tutorial-section .gd-c-tutorial-square {
display: inline-block;
text-align: center;
padding-top: 19px;
padding-right: 3px;
line-height: 17px;
font-family: 'Uni Sans';
font-weight: bold;
font-size: 24px;
color: white;
float: left;
height: 100%;
width: 57px;
background-image: url('../../img/gd_content_match_tutorial_square.png');
}
<div class="gd-content">
<div class="gd-c-match in-match">
<div class="gd-c-match-tutorial">
<div class="gd-c-tutorial-section">
<div class="gd-c-tutorial-square">1</div><span class="title">Contact Opponent
<span class="subtitle">Add the other player ingame and form a party</span></span>
</div>
</div>
</div>
</div>
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
I'm trying to get my name inside of another block that contains the website name, but can't figure it out. What can I use?
I'm trying to get my website name with a smaller extension after it, shich works. But then i want my name underneath it without the space in between.
<div id="sitename">
<span id="address">website</span>
<span id="extension">.blah</span>
<span id="name">namegoeshere</span>
</div>
#sitename {
width: 330px;
margin: 35px auto 0 auto;
text-align: center;
cursor: default;
}
#address {
display: inline-block;
height: 65px;
font-size: 50pt;
font-weight: 800;
color: rgb(99,99,99);
}
#extension {
display: inline-block;
height: 65px;
font-size: 30pt;
font-weight: 800;
color: rgb(99,99,99)
}
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
}
Fiddle: http://jsfiddle.net/CX5Dn/
is this what you want to achieve
html
<div id="sitename">
<span id="address">website<span id="extension">.blah</span></span>
<span id="name">namegoeshere</span>
</div>
css
#sitename {
width: 330px;
margin: 35px auto 0 auto;
text-align: center;
cursor: default;
}
#address {
display: inline-block;
height: 65px;
font-size: 50pt;
font-weight: 800;
color: rgb(99,99,99);
}
#extension {
display: inline-block;
height: 65px;
font-size: 30pt;
font-weight: 800;
color: rgb(99,99,99)
}
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
}
working demo
Margins on the name.
#name {
display: block;
width: 72%;
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
margin-top: -20px;
}