Is there any way I can align paper-tabs in the center of a div? If so, how?
Custom element:
<div class="navigation" id="tabs">
<paper-tabs selected="{{selected}}" scrollable noink>
<paper-tab>fruits</paper-tab>
<paper-tab>vegetables</paper-tab>
<paper-tab>dairy</paper-tab>
</paper-tabs>
</div>
CSS:
.navigation {
margin: 0 auto;
}
paper-tabs {
height: 80px;
}
paper-tabs paper-tab .tab-content {
color: white;
font-family: swimfeedsraleway;
font-size: 24px;
font-weight: 700;
padding: 0 32px;
text-transform: uppercase;
}
paper-tab:not(.iron-selected) > .tab-content.paper-tab {
opacity: 0.5;
font-weight: normal;
}
.paper-tabs-0 #selectionBar.paper-tabs {
background-color: white;
}
#selectionBar.paper-tabs {
height: 3px;
}
paper-tabs paper-icon-button {
color: white;
}
Related
This is my HTML and CSS code. If you run this, there will be a image of a macbook and a 'buy' button. When the browser is minimised, the image is alittle off from the center. When it is in full screen, it causes the image to move up and the 'buy' button gets pushed to the bottom. I tried to use position: fixed but it didnt work. How do you make the picture have fixed position in the middle
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
Just apply display: block to the <a>-element. When you use display: block on an element, it will try to take up as much width as possible. Seeing as it is not inside a parent container, it will take up 100% width of the <body>-element, as that is the elements closest parent. This way, it won't wrap around the image. The link will however stretch and fill the entire parent container as well. To combat this, apply max-width: fit-content, so the link's width is only relative to its content. Then you can apply margin: auto to center the element again.
For a responsive image, apply max-width: 100% and height: auto. This way it will automatically scale down, as the max-width: 100% property won't let it overflow its parent container (the <body>-element)
body {
text-align: center;
}
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
max-width: 100%;
height: auto;
}
a {
display: block;
max-width: fit-content;
margin: auto;
}
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
By default an image is displayed inline, which is causing your issue. You're on the right track, but instead of position fixed, position: block; would be a better choice.
(You can also centre your image and avoid it overflowing using a max-width and some margin)
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin: 50px auto 0 auto;
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
I have a home page that has two background colours. What I would like for the navbar li's is that when the screen resizes, and the nav bar text enters the part of the screen where the background is blue, I'd like it to change to grey (the same colour as the other part of the screen)...
Now, I know mixed-blend-mode is a thing, but I don't like how it inverts the colour... Is there a way to specify the colour of mixed-blend-mode? Or are there any other alternatives?
html, body {
margin: 0;
padding: 0;
/*background-color: #eeeeee;*/
}
div {
display: block;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-logo{
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
}
<div id="desktop-navbar"">
<div id="desktop-nav-wrapper">
<h3 id = "desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id = "desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>
Since you gradient is covering the whole page width, you can then color your text with the opposite gradient and you make it fixed to simulate the changing color effect:
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index: 1;
}
#desktop-logo {
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
/*relevant code*/
background: linear-gradient(90deg, #dddddd 63%, #000 0%) fixed;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/**/
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<h3 id="desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id="desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>
I'm creating a child theme for WooCommerce's Storefront theme. My issue is with the navbar, where the navigation elements do not get centered horizontally. Please take a look at the code, as well as the image on the navbar. The navigation div has a background-color of red so it's easier to identify the issue.
Navbar Image
| JSFiddle with code
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
height: 70px;
line-height: 70px;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
height: 70px;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
Pay attention to the fact that your inline-block elements are not aligned.
So I've aligned them vertically.
Another thing, is that you don't need the height:70px, instead define line-height: 70px, on the parent, it will propagate to the children.
.navbar {
line-height: 70px;
width: 100%;
border-bottom: 1px solid black; /* Change */
}
.logo p {
color: #000;
font-family: 'Fjalla One', sans-serif;
font-weight: 700;
font-size: 30px;
text-transform: uppercase;
margin: 0;
letter-spacing: 1px;
width: 120px;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.navigation {
display: inline-block;
margin-left: 5px;
background-color: red;
}
.navigation li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 70px;
font-size: 14px;
font-family: "Open Sans", sans-serif;
color: #333;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
.navigation li:hover {
color: #D4B349;
}
<div class="navbar">
<div class="logo"><p> Lorem </p></div>
<div class="navigation">
<li> Home </li>
<li> About </li>
<li> Contact </li>
</div>
</div>
I asume that you want the logo far left and the social icons far right. To achieve this I would use:
.logo {
float:left;
}
.icons {
float: right;
}
you could also use position absolute.
Now you have two options:
aligning the navigation elements center. To do this you have to set the navigation to text-align: center and display: block:
.navigation {
display: block;
margin-left: 0px;
text-align: center;
background-color: red;
}
You could give the .navbar a text-align: center:
.navbar {
height: 70px;
width: 100%;
border-bottom: 1px solid black;
}
I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.
.header, .navBar, .pageTitle {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
footer {
background-color: #bfd8d8;
position: absolute;
bottom: 0px;
width: 100%;
font-size: 15px;
border: 1px solid black;
}
nav, h1, h2 {
font-family: arial, sans-serif;
}
nav a:hover {
background-color: #006400;
}
nav a {
color: white;
text-decoration: none;
}
h2 {
text-align: center;
background-color: white;
}
#container {
width: 1000px;
margin: auto;
min-height: 100vh;
position: relative;
}
#signUp {
color: white;
font-size: 20px;
font-family: arial;
}
#welcomeFont {
color: white;
font-size: 25px;
font-family: arial;
}
.currentNav {
background-color: #006400;
}
.emailStyle {
font-weight: bolder;
}
.footerSpacer {
height: 50px;
}
.header {
color: white;
background-color: #006400;
padding: 20px;
}
.headerAnchor {
text-decoration: none;
color: white;
}
.navBar {
background-color: #228B22;
padding: 10px;
}
.pageTitle {
padding-bottom: 0px;
box-shadow: 0px 8px 25px 0px;
background-color: #bfd8d8;
}
.poetryAuthor {
color: white;
font-size: 15px;
font-family: arial;
font-style: italic;
}
.poetryCaptions {
margin-top: 50px;
color: white;
font-size: 25px;
font-family: georgia, serif;
}
.resizeAbout {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.resizeHome {
max-height: 50%;
max-width: 50%;
margin-top: 50px;
}
.resizePhotos {
max-height: 50%;
max-width: 50%;
}
.table {
background: #006464;
max-width: 100%;
border: 1px solid black;
border-spacing: 10px;
margin-left: auto;
margin-right: auto;
}
.tableData {
font-size: 19px;
background: #bfd8d8;
border: 1px solid black;
padding: 8px;
}
<!DOCTYPE html>
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
</header>
<nav class="navBar"> <a class="currentNav" href="index.html">Home</a> Music Photos Poetry About </nav>
<h2 class="pageTitle"> Get the Full Effect! </h2>
<img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams">
<h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
<br>
<form>
<span id="signUp">Sign up for our newsletter!</span> <br>
<input type="text" name="emailaddress" value="Email Address">
<input type="submit" value="submit">
</form>
<div class="footerSpacer"> </div>
<footer> © 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1#snhu.edu</span> </footer>
</div>
</body>
Add this to your CSS:
#container {
text-align: center;
}
And if you don't want all your content centered in this way, just wrap the content you do and give the container a text-align: center.
add text-align:center in your body tag. Try it.
body {
text-align:center;
margin: 0px;
padding: 0px;
font-size: 20px;
background-color: #006464;
}
I'm relatively new to coding. I'm playing around with a page where I have the nav bar at the very top of the page. Directly underneath I'm wanting an image with the page logo and description on top of the image.
The problem I'm having is there is a blank space between the nav bar and the image.
If I delete the words from the header (the logo, description) the image becomes flush with the nav bar like I intend it to be. But if put the words back into the header the space separates my two elements again. I'm not sure why this is consider the words are with the larger container of the header.
Can anyone help me delete this space between the elements.
By the way, this is my first time posting a question, so I'm not sure if I'm doing this correctly. Below are my html and css codes. Thanks in advance.
HTML:
<body>
<div class='top-bar'>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Destinations</a></li>
<li><a href='#'>Languages</a></li>
<li><a href='project1-about.html'>About Us</a></li>
</ul>
</nav>
</div>
<header>
<h1><span>Project 1</span></h1>
<p class='kicker'>Traveling // Exploring // Coding</p>
</header>
CSS:
header {
height: 450px;
background: url('http://gratisography.com/pictures/17_1.jpg') center center;
background-size: cover;
margin: 0; }
header p {
font-family: Cinzel; }
.top-bar {
width: 100%;
height: 50px;
background-color: red;
margin: 0; }
nav {
float: right;
margin: 0px 30px 0 0;
height: 50px; }
nav li {
display: inline-block;
margin-left: 20px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase; }
nav a {
text-decoration: none;
color: white;
font-family: Cinzel; }
nav a:hover {
color: grey; }
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px; }
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
line-height: 1;
position: relative; }
span {
display: inline-block;
padding: 0.2em 0.5em;
border: white solid 10px; }
This is happening because you have not done the CSS reset. Your H1 tags and other elements still have the browser default CSS properties like margin and paddings which is causing this behaviour.
Fix:
header h1 {
margin: 0;
}
See my jsfiddle.
Please try this:
i have added margin-top: 0 to h1 .
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px;
margin-top: 0
}
Add margin:0 in your h1 tag.In Markup, h1 tag take its default margin , so when you reset your css then it should be worked.Take a look in JSFIDDLE.
header {
height: 450px;
background: url('http://gratisography.com/pictures/17_1.jpg') center center;
background-size: cover;
margin: 0;
}
header p {
font-family: Cinzel;
}
.top-bar {
width: 100%;
height: 50px;
background-color: red;
margin: 0;
}
nav {
float: right;
margin: 0px 30px 0 0;
height: 50px;
}
nav li {
display: inline-block;
margin-left: 20px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
nav a {
text-decoration: none;
color: white;
font-family: Cinzel;
}
nav a:hover {
color: grey;
}
h1 {
text-align: center;
font-size: 72px;
font-family: Cinzel;
weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: .05em;
clear: both;
padding-top: 100px;
margin: 0
}
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
line-height: 1;
position: relative;
}
span {
display: inline-block;
padding: 0.2em 0.5em;
border: white solid 10px;
}
<div class='top-bar'>
<nav>
<ul>
<li><a href='#'>Home</a>
</li>
<li><a href='#'>Destinations</a>
</li>
<li><a href='#'>Languages</a>
</li>
<li><a href='project1-about.html'>About Us</a>
</li>
</ul>
</nav>
</div>
<header>
<h1><span>Project 1</span></h1>
<p class='kicker'>Traveling // Exploring // Coding</p>
</header>