I have the following social media menu that is part of my navigation top bar menu. My problem is that it doesn't display the social media text in center.
CSS
.fa {
padding: 12px;
font-size: 20px;
width: 47px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
left: auto;
border-radius: 70%;
justify-content: center;
}
#tpbr_box .a {
width: 10%;
height: 20%;
text-align: center;
display: inline;
font-size: 20px!important;
}
#tpbr_box .social2{
float:right;
}
#tpbr_box {
font-size: 20px!important;
}
.top_nav{
display: flex;
}
.top_nav .social2 {
position: absolute;
right: 14px;
}
.info{
margin: 0 auto;
}
.social2 a{ padding-left: 4px; }
HTML
<div class="top_nav">
<div class="info">
<i class="fa fa-home"></i> |
<a style="color:white;" href="tel:2434">tel 3242342</a> |
</div>
<div class="social2">
</div>
</div>
Why the social media letters are not in center? what is wrong?
The issue is this line right here:
.social2 a{ padding-left: 4px; }
Comment that out and they'll be centered.
Related
How can I center my webpage only with html & css? I tried it with margin: auto, margin: 0 auto and also margin-left: auto & margin-right: auto. Nothing seems to work from the things I've read on the internet. I'll show you my code. I want that everything is centered. Every Div. And compatible with mobile Applications.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
}
.social {
float: left;
text-align: center;
margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px;
}
.social #spotifylogo {
position: relative;
bottom: -7px;
}
.social #fblogo {
position: relative;
bottom: 1px;
left: -1px;
}
.social #twitterlogo {
position: relative;
bottom: 1px;
left: 6px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
float: left;
position: relative;
right: -495px;
margin-top: 25px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
position: relative;
right: -225px;
bottom: -100px;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
if you want center items you can use 'flex-box'
something like this
html
<div class="Aligner">
<div class="Aligner-item">…</div>
</div>
and css
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
for this to work just warp the items with flex box (display: flex) you just put it on your title (h1)
this code is from this article :
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
also there is much more you can do with flex box
can also read abut flex box at w3s
https://www.w3schools.com/css/css3_flexbox.asp
I made several tweaks but mainly removed all the flexbox information - this was the biggest change across the CSS edits. Hope this helps!
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
color: black;
margin-top: 50px;
font-size: 40px;
font-weight: bold;
text-align: center;
}
.social {
text-align: center;
margin-bottom: 20px;
}
.nav {
text-align: center;
color: black;
font-size: 14px;
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
display: block;
max-width: 100%;
height: auto;
}
#headpic-image {
display: block;
margin: auto;
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img id="headpic-image" src="headpic.jpg" width="900" height="500">
</div>
Do not use properties such as top,bottom,left,right to align items unless necessary. It's impossible to get a sensible layout in this way. You do not need to use position: "relative" for each item. A lot of your codes are wrong. I took these parts to comment lines for you to see. You can use flexbox for some structures to center items. Often marginx "auto" will work for inline-block or block-sized elements.
body {
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
color: black;
/* margin-top: 50px; */
font-size: 40px;
font-weight: bold;
}
.social {
/* float: left; */
text-align: center;
display: flex;
justify-content: center;
/* margin-bottom: 20px;
position: relative;
right: -220px;
bottom: -70px; */
}
.social #spotifylogo {
/* position: relative;
bottom: -7px; */
}
.social #fblogo {
/* position: relative; */
/* bottom: 1px;
left: -1px; */
}
.social #twitterlogo {
/* position: relative; */
/* bottom: 1px;
left: 6px; */
}
.nav {
text-align: center;
color: black;
font-size: 14px;
display: flex;
justify-content: center;
/* float: left;
position: relative;
right: -495px;
margin-top: 25px; */
}
.nav a:link {
text-decoration: none;
color: black;
margin-right: 15px;
}
.nav a:hover {
color: greenyellow;
}
#headpic {
text-align: center;
/* position: relative; */
/* right: -225px;
bottom: -100px; */
}
<h1 id="header">cyberpVnk</h1>
<div class="nav">
Start
Musik-Player
Video-Player
Biografie
Kontakt
</div>
<div class="social">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" width="25" height="25">
<img src="spotify.png" width="40" height="40" id="spotifylogo">
<img src="fbbutton.png" width="26" height="26" id="fblogo">
<img src="https://www.nicepng.com/png/full/84-842524_twitter-logo-in-circular-black-button-twitter-logo.png" width="27" height="27" id="twitterlogo">
</div>
<div id="headpic">
<img src="headpic.jpg" width="900" height="500">
</div>
add this in your CSS
div_id(div that you want to change) {
margin: 0 auto;
}
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
I have a section at the top of my site which contains a background image and text with a black strip at the bottom for the ability to embed video etc (see more / see our showreel) in the future. I've just altered some styling and now the black strip won't stretch across the whole page. It worked before now it doesn't work and I can't get it to go back. Can anyone see what might be causing this?
body {
font-family: "Merriweather Sans", sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px !important;
padding-right: 10px !important;
}
section#topimageagency {
height: 400px;
background: url('http://localhost:8888/wp-content/uploads/2017/07/VIDEO.jpg') center center no-repeat;
background-size: 100%;
background-position: center;
overflow: hidden;
position: relative;
}
section#topimageagency .showreel {
height: 50px;
max-width: 100% !important;
position: absolute;
background-color: black;
bottom: 0;
padding: 0 30px;
justify-content: space-between !important;
}
section#topimageagency .showreel, .showreel > div.seemore {
display: flex;
align-items: center !important;
justify-content: flex-start !important;
flex:1;
}
section#topimageagency .showreel, .showreel > div.seeour {
justify-content: flex-end;
flex:1;
display: flex;
align-items: center;
}
section#topimageagency .showreel p {
font-size: 15px;
font-weight: normal;
margin: 0;
padding-left: 10px;
color: #ffffff;
}
.showreel i {
color: #ffffff;
}
.seemore {
margin-left: 30px !important;
}
.seeour i {
margin-right: 30px !important;
}
#topimageagency a {
text-decoration: none;
color: #FFFFFF;
/* position: static; */
float: right;
background-color: #000000;
padding:5px;
padding-left:10px;
padding-right: 10px;
width:auto;
white-space: nowrap;
}
section#agency .text {
float: left !important;
margin-top: 50px;
margin-bottom: 50px;
left: 100px;
}
.text p {
font-size: 10px;
color: #FFFFFF;
}
.text h1, h2 {
color: #FFFFFF;
margin: 0;
padding: 0;
border: 0;
}
.text h2 {
line-height: 5px;
font-size: 25px;
font-weight: 200;
}
.text h1 {
font-size: 50px;
margin-bottom: 40px;
}
<section id="topimageagency">
<div class="container">
<a href="http://localhost:8888/products/">
I'm a business
</a>
<div class="text">
<h2>VIDEO & ANIMATION</h2>
<h1>FOR AGENCY</h1>
<p><?php the_field('agency_img_paragraph'); ?></p>
</div>
</div>
<div class="container showreel">
<div class="seemore">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
<i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
</span>
<p>SEE MORE</p>
</div>
<div class="seeour">
<p>SEE OUR SHOWREEL</p>
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
Give the strip a width: 100%; attribute
For bottom strip to be acroos whole page:
.showreel{
width:100vw;
}
This is the look:
How do I move the text up? So its centered besides the image?
CSS:
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
padding: 0px 190px;
font-size: 17px;
vertical-align: middle;
line-height: 20px;
}
.logopng{
width: 35px;
height: 35px;
}
HTML:
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>
EDIT: added vertical-align:middle to the image class
The easiest way is to set display: flex and align-items: center on parent element.
header {
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1 {
color: white;
font-size: 17px;
display: flex;
align-items: center;
}
.logopng {
width: 35px;
height: 35px;
margin-right: 20px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">Rocket League Prices
</div>
</header>
you can use css3 flexbox concept.just add
display:flex;
align-items:center;
justify-content:center;
to your .header-1 it works fine.I'm added the snippet below.
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
font-size: 17px;
display:flex;
align-items:center;
justify-content:center;
}
.logopng{
width: 35px;
height: 35px;
margin-right:10px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>
I created a page having a banner. The banned contains the title of the page at the left and a box having text and two buttons inside at the right.
The page is completely responsive except the banner because i am not sure how to use top and left while keeping things responsive.
HTML
<div class="banner_container">
<img src="img/banner_1.png">
</div>
<div class="col-md-12">
<div class="col-md-7">
<div class="banner-title"><strong>WAKE UP IN BALI</strong></div>
</div>
<div class="col-md-3 trip_inclusions">
<div class="inclusions_price">
<div class="total_nights">
<div class="number_of_nights">12 </div> NIGHTS
</div>
<div class="price_grid_wrapper">
<div class="starting_from">STARTING FROM </div>
<div class="tour_price">
<div class="dollar_price_wrapper">
<div class="dollar_logo">$</div>
<div class="price_text">1250</div>
</div>
<div class="price_tax_text">TAXES INCL/PERS</div>
</div>
</div>
</div>
<div class="inclusions_details">
<div class="package_includes_title">PACKAGE INCLUDES</div>
<div class="includes_content">
<p>+ INTERNATIONAL FLIGHTS</p>
<p>+ WELCOME & TRANSFERS</p>
<p>+ HOTEL(12 NIGHTS)</p>
<p>+ BREAKFASTS</p>
<p>+ EXCURISIONS</p>
</div>
</div>
<div class="package_buttons">
<div class="share_package">SHARE PACKAGE +</div>
<div class="all_packages"> < ALL PACKAGES </div>
</div>
</div>
</div>
CSS:
.banner_container img{
width: 100%;
}
.banner-title{
font-size: 160%;
color: white;
text-shadow: 0 1px gray, 1px 0 gray, -1px 0 gray;
margin: 48px 25px;
display: block;
position: absolute;
top: 0;
}
.trip_inclusions{
padding: 2px;
top: 1em;
position: absolute;
left: 20em;
}
.inclusions_price {
background-color: #00467e;
overflow: auto;
padding: 3px;
color: white;
margin: 0 auto;
display: inline-block;
width: 80%;
}
.total_nights {
width: 24%;
text-align: center;
border-right: 1px solid #fff;
float: left;
margin-right: 10px;
font-size: 0.95em;
}
.number_of_nights{
font-size: 3.8em;
margin-bottom: -13px;
margin-top: -10px;
}
.price_grid_wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
.starting_from {
width: 8%;
float: left;
margin-right: 4em;
font-size: .95em;
margin-top: 2px;
}
.tour_price {
float: left;
width: 40%;
}
.dollar_price_wrapper{
display: block;
margin: 0 auto;
}
.dollar_logo{
float: left;
font-size:1.5em;
}
.price_text{
float: left;
font-size: 3em;
margin-top: -10px;
}
.price_tax_text{
text-align: center;
margin-bottom: 3px;
font-size: .9em;
}
.inclusions_details{
background-color: #fff;
overflow: auto;
margin-top: -5px;
width: 80%;
}
.package_includes_title{
color: #399fff;
font-size: 20px;
margin-left: 10px;
margin-top: 11px;
}
.includes_content{
color: black;
font-size: 16px;
margin-left: 15px;
line-height: 16px;
margin-top: 6px;
}
.package_buttons{
margin:0 auto;
display: block;
}
.share_package{
background-color: #399fff;
padding: 10px;
color: white;
font-size:1em;
float: left;
width:40%;
text-align: center;
}
.all_packages{
background-color: #ffffff;
padding: 10px;
width:40%;
color: #00467e;
font-size:1em;
float: left;
text-align: center;
}
.share_package a{
color: white;
}
.share_package a:hover{
color: white;
}
Please have a look at the JsFiddle. Its not responsive at all also you will see the right container is big, ignore that i`ll fix it but i want text at left and container at right and image at the back and keep it responsive.
Note: I could have used backgroundurl() but i didnt as i am planning to replace the background image with a slider so i need it in a separate
Thanks !!!