I am a beginner that learning CSS and JS. I faced a problem in CSS. Please help... thanks
My page
This is the page that I get the problem, and how can I align the text in one line and put them in average space. Check below what I imagine...
This is what I want
Imagine
This is CSS code
body {
background: #292929;
}
h1 {
font-family: Roboto;
background-color: #292929;
display: flex;
align-items: center;
justify-content: center;
color: #ffff
}
div {
align-content: center;
}
.yesButton {
margin-left: 350;
left: 100;
bottom: 0;
width: 65;
margin: initial;
background-color: #575757;
color: #ffff;
text-align: right;
cursor: pointer;
}
.yesButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.yesButton p:hover {
background: #3d3d3d;
color: #ffff;
}
.noButton {
margin-left: 500;
left: 100;
bottom: 0;
background-color: #575757;
color: #ffff;
text-align: left;
cursor: pointer;
}
.noButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.noButton p:hover {
background: #3d3d3d;
color: #ffff;
}
div p{
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
Thanks a lot...
First of all you should share your complete code.I assumed that you are using two <p> tags which you want to display in one line.
There are multiple solutions to do this and to make this better. But I am using your approach i.e <p> tag and made some minor changes to make the things happen.
Following is the code snippet for the <p> tag implementation. I updated your CSS which you can compare.
Also enhance your skills of HTML and CSS.
Checkout this;
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background: #292929;
}
h1 {
font-family: Roboto;
background-color: #292929;
display: flex;
align-items: center;
justify-content: center;
color: #ffff
}
div {
align-content: center !important;
}
.yesButton {
margin-left: 350;
left: 100;
bottom: 0;
width: 65;
margin: initial;
background-color: #575757;
color: #ffff;
text-align: right;
cursor: pointer;
}
.yesButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.yesButton p:hover {
background: #3d3d3d;
color: #ffff;
}
.noButton {
margin-left: 500;
left: 100;
bottom: 0;
background-color: #575757;
color: #ffff;
text-align: left;
cursor: pointer;
}
.noButton p {
float: left;
color: #ffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.noButton p:hover {
background: #3d3d3d;
color: #ffff;
}
div p {
/*clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;*/
text-align:center;
}
div {
width: 50%;
float:left;
color:#fff;
}
</style>
</head>
<body>
<div><p>No .....</p></div>
<div><p>Yes .....</p></div>
</body>
</html>
Related
How change text when I push cursor in button? If I push cursor in button with price, will show text: "Add to basket".
This is Code:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>
How solve this problem?
You can use a wrapper div to catch the over, I think is more maintainable if you change the html in the future:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
width: 20%;
margin: 20px auto;
cursor: pointer;
}
.wrapper:hover .info {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
<div class="price">$50</div>
<div class="info">Add to basket</div>
</div>
you can use :active to show text when mouse is clicking down on the price like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:active + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
if you are trying to show the text on :hover like the title of the question says the unser :hover like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:hover + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
Update 3:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info,
.price:hover .amount {
display: none;
}
.price:hover .info {
display: block;
}
<div class="price">
<div class="amount">$50</div>
<div class="info">Add to basket</div>
</div>
Here is my problem code and advice me something fot the portfolio pls https://codepen.com/LukaBarliani/pen/xrGyRy
Run your CSS through any CSS Linter and you will know why.
http://csslint.net/
Your CSS works fine after fixing some issues and ran through a CSS beautifier.
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
body {
background-image: url("");
background-repeat: no-repeat;
}
.button1 {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button2 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button3 {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
li {
float: left;
border-right: 1px solid #bbb;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li:last-child {
border-right: none;
}
I don't know how to place a "+" in my CSS. Take a closer look at the "Donator+" div.
body
{
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
.nav
{
background-color: #595959;
color: #ffffff;
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
border-bottom: 3px solid #1b1b1b;
}
.nav > li
{
display: inline-block;
padding: 0 25px 0 25px;
}
.nav > li > a
{
text-decoration: none;
color: #ffffff;
}
.nav > li > a:hover
{
color: #1b1b1b
}
.line
{
width: 100%;
height: 0;
border-bottom: 2px solid #353535;
}
.image
{
display: block;
max-width: 100%;
height: auto;
}
div.vip
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 215px;
margin-left: 350px;
margin-top: 70px;
}
div.price-vip
{
font-weight: bold;
font-size: 85%;
}
div.name-vip
{
margin-top: 20px;
font-size: 85%;
font-weight: bold;
}
div.donator
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 165px;
margin-left: 320px;
margin-top: 70px;
}
div.price-donator
{
font-weight: bold;
font-size: 85%;
}
div.name-donator
{
font-size: 85%;
font-weight: bold;
margin-top: 20px;
}
div.donator+
{
vertical-align: top;
display: inline-block;
text-align: left;
width: 190px;
height: 165px;
margin-left: 320px;
margin-top: 70px;
}
div.price-donator+
{
font-weight: bold;
font-size: 85%;
}
div.name-donator+
{
margin-top: 20px;
font-size: 85%;
font-weight: bold;
}
You just need to escape the character in your selector:
div.name-donator\+ {
but don't escape it in the HTML:
<div class="name-donator+">
See I don't know what you are trying, but here is little explanation regarding css + selector,
element + element - selects all elements that are immediately placed after another element parent element, not parent element and child inside of it, to select and style child element you have to use css > selector.
.div1{
width:200px;
height:200px;
background:#111;
}
.div2{
width:200px;
height:200px;
background:#f2f;
}
.div1 + .div2{
background:#f22;
}
<div class="div1"></div>
<div class="div2"></div>
This is sort of the same issue I asked here: Cannot get two CSS elements to be next to each other
However, this time, it's messing up when I added an iframe. I tried applying different styles, even to the iframe, but it doesn't appear to be working. I also messed with the CSS of the ul and li that I added to the side nav bar (didn't help, though changing the ul property to display: table-row; did fix another issue I had with something else.)
My main plan was to have an iframe to another group of pages. (My restaurant pages might have more than one tab for each restaurant, but I had been wondering how to have a "back" thing to my ski resort (where the restaurants are) so the user could go back to them. I then thought, why not just have an iframe instead?
However, once I added the iframe, the trouble I had before (see previous stack overflow link above) suddenly came back.
main.css:
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 800;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;
}
nav#vert
{
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./snow_mountain.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;
}
footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1050px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 750px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;
}
nav#hor a
{
color: rgb(0 0,238);
}
nav#hor > div > a
{
color: #ccccff;
text-decoration: none;
font-size: 100%;
}
nav#hor>div:hover
{
background-color: #018802;
}
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 36px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
h3
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}
#text-container
{
border: 2px solid cyan;
width: 1005px;
height: 690px;
*/ zoom: 1;
*/ margin: 0;
display: table-cell;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.left img
{
float: left;
padding: 0 20px 20px 0;
}
.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.right img
{
float: right;
margin: 0px 0px 15px 20px;
border: 1px solid transparent;
}
.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
nav#hor ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
}
nav#hor ul li:hover
{
background-color: #018802;
}
nav#vert ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
display: table-row;
}
nav#hor li
{
float: left;
border: 1px solid white;.
}
nav#vert li
{
float: left;
border: 1px solid white;.
}
nav#vert li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
nav#vert li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
li.dropdown {
display: inline-block;
}
.dropdown-content ul li
{
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: rgb(0, 0, 238);
z-index: 1;
}
#eAndADropdown
{
}
#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;
}
#restaurantDropdown ul
{
border: 1px solid white;
}
#restaurantDropdown:hover
{
background-color: #018802;
}
#restaurantDropdown a
{
color: rgb(0, 0, 238);
}
.dropdown-content a {
color: rgb(0, 0, 238);
border: 1 px solid white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
li a
{
color: rgb(0, 0, 238);
}
testingMongoose.php
<html>
<head>
<title> The Mountains </title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
$("#container").css("height", 800);
});
</script>
</head>
<body>
<?php include 'topandside.php';?>
<div id="text-container">
<iframe src="./index.php" width=700; height=620;></iframe>
</div>
</div>
</div>
<?php include 'footer.php';?>
</div>
</body>
</html>
This time, having display: table-cell; for both nav#vert and #text-content doesn't appear to be enough like it was before.
float: left on the nav#vert seems to have fixed that issue, though it broke some other things (though I should be able to fix those.)
<head>
<title>WCK&TMB</title>
<style>
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
background-color: #FFC18F;
}
div#container {
width: 100%;
min-width: 1024px;
}
header {
height: 100px;
width: 100%;
background-color: #ff8400;
text-align: center;
}
header img {
clear: left;
float: left;
margin: 10px;
}
header a#purchase {
background: url("http://i.imgur.com/RJe8a1D.png") repeat-x;
width: 500px;
height: 25px;
margin: 30px;
padding: 5px;
border: 3px double #ccc;
text-align: center;
float: right;
font-family: Arial;
font-size: 20px;
text-decoration: none;
color: #ffffff;
}
section#main {
padding: 0px 0px 10px 0px;
text-align: center;
}
section#main div#head_announcements {
padding-top: 10px;
color: #000;
font-family: "Arial";
}
section#main div#head_announcements h2 {
font-size: 24px;
font-weight: lighter;
line-height: 26px;
}
section#main h2 a {
color: #FFFFFF;
text-decoration: none;
}
section#main h2 a:hover {
color: #000000;
}
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
}
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float:center;
}
section#main nav a.link:nth-of-type(1) {
float:center;
}
section#main nav a.link:hover {
color: #39F;
}
section#main nav a.link.active {
color: #39F;
}
section#main section#frames {
margin-top: 10px;
width: 100%;
}
section#main section#frames iframe {
border: 0px;
outline: 0px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
section#main section#frames iframe#frame1 {
width: 650px;
height: 450px;
background-color: black;
}
section#main section#frames iframe#frame2 {
width: 350px;
height: 450px;
}
footer {
padding: 10px 0px 10px 0px;
width: 100%;
text-align: center;
height: 110px;
}
</style>
</head>
URL: http://skyaccess.se/forum/misc.php?page=hdppvs
I can't seem to center the navigation bar text. Can someone please correct this?
Also, I'm trying to learn CSS so if anyone could show me a great site, I'd be very thankful. Considering paying $29/mo are some interaction website with points.
add float:left in your css:
section#main nav {
background: url("./images/navBG.png") repeat-x;
width: 100%;
height: 35px;
text-align: center;
float: left;
also add this css for create gaping between navigation: "padding-right: 40px;".
section#main nav a.link {
font-family: "Century Gothic";
text-decoration: none;
color: white;
font-size: 25px;
vertical-align: top;
float: center;
padding-right: 40px;