.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
Related
I'm trying to align circles in the center on mobile. Here is what I've used on https://www.wmhi.com.au/elite-edge-leadership-resilience/
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
.circle:hover {
background-color:#79c852;
color:white;
}
I need to keep the texts as laid there now (inline-block). The circles are appearing left aligned on mobile phones. Any help would be highly appreciated.
Thanks in advance :)
Kindly change your CSS from
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: inline-block;
}
to this
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: block;
padding-top: 10px;
margin: auto;
}
And it will work perfectly fine. I just made these elements block give them an auto margin and give some top padding to the text.
try following code for good design some change for good design please add one div for all content vertically center when you add one line code or more than large content set vertically center also your circle center in mobile.
.circle {
width: 240px;
height: 240px;
border-radius: 50%;
font-size: 24px;
color: #fff;
line-height: 30px;
text-align: center;
background: #ea4335;
vertical-align: top;
display: table;
margin: 0 auto;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
}
.circle h2 {
margin-top: 0;
margin-bottom: 15px;
}
.circle p {
margin: 0;
}
.circle:hover {
background-color:#79c852;
color:white;
}
<div class="wpb_wrapper">
<div class="circle">
<div class="vertical-center">
<h2 class="w-h2">
<span style="color: #ffffff;">Step 3</span>
</h2>
<p>Run the popular Elite Edge training</p>
</div>
</div>
</div>
add the div before the circle class. like this and it will resolve the problem
<style>
.divCenter{margin:0 auto;text-align:center;}
</style>
<div style="margin:0 auto;text-align:center;">
<div class="circle">
<h2><span style="color: #ffffff;">Step 1</span></h2>
<p>Tell us your team’s resilience and leadership goals</p>
</div>
I have an HTML code that can be simplified as:
<body>
<div class='header'>
</div>
<div class='main'>
<nav class='menu'>
<a>a</a><a>b</a>
</nav>
<div class='content'>Here be dragons!</div>
</div>
</body>
It uses the following CSS:
html, body
{
margin: 0;
padding: 0;
background-color: #7effad;
}
.header
{
background-color: black;
position: relative;
height: 20px;
}
.main
{
position: relative;
}
.main .menu
{
background-color: white;
}
.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
display: block;
float: left;
background-color: blue;
border-radius: 2px;
margin: 5px;
}
.main .menu:after
{
display: block;
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.main .content
{
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 21px;
margin-right: 21px;
margin-top: 15px;
margin-bottom: 0;
min-height: 1500px;
background-color: #d4b074;
}
As you can see here this generates some sort of a margin between the header and the menu. However, if i remove the content tag all together this margin magically disappears.
I don't understand how it can alter the appearance, since it is a normal block that follows the menu.
Edit: The problem only occurs in Firefox, Chromium does everything just fine.
The problem goes away if i set margin-top for .main .content to 0; however if margin-bottom of .main .menu is non-zero the problem returns.
I need to have these divs side by side for a menu bar but up until now it keeps stacking up on each other. I have tried doing margin-right/left/top/bottom, padding, etc... but can't get it to work, any suggestions?
<div id="Menu" >
<div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
<div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
<div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
<div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>
The CSS is:
#Menu
{
width: 50%; height: 40px; background-color: blue; margin-left: auto;
margin-right: auto; margin-top: 20px; border-radius: 20px;
}
#M_1
{
text-align: center; width: 20%; background-color: black;
}
#M_2
{
text-align: center; width: 20%; background-color: black;
}
#M_3
{
text-align: center; width: 20%; background-color: black;
}
#M_4
{
text-align: center; width: 20%; background-color: black;
}
add these two for each one
#M_1
{
display: inline-block;
float: left;
}
if that doesn't fit them all in, try changing 1 or 2 or all of them to 19% width instead
You need to float: left them or set them to display: inline-block.
You can tidy your CSS by merging selectors.
#menu{
display:table;width: 50%; height: 40px; background-color: blue;
margin:20px auto; border-radius: 20px;
}
#menu > div{
text-align: center; background-color: black;display:table-cell
}
This best thing to do would be:
<ul>
<li>given</li><li>
received</li>
</ul>
Ul {
Width:50%;
Height:40px;
Background: blue;
Margin: 0 auto;
}
Ul li {
Display:inline-block;
Width:20%;
Background:#000;
Text-align: center;
}
Having the closing tag and open tag next to each other stops inline-block from leaving a gap between the elements.
I'm working on my first web page and ran into an issue with finding the right code for my sticky nav bar. The nav bar already has a jQuery code attached to it so I'm wondering if that may affect the code, or if I'm not using the right one.Here's the HTML for the nav bar...
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres my css for it...
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
And for the jQuery I've already included....
$(document).ready(function(){
$('ul#nav li').click(function(){
var number = $(this).index();
$('.sec').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('ul#nav li').not(this).removeClass('active').addClass('inactive');
});
$('.sec').not(':first').hide();
});
To make it sticky you would use position: fixed in the css. That makes it stay in the same position relative to the browser window. You don't have to use any jQuery for this part.
Try position:fixed;
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: fixed; //change this to fixed....to stick to top
max-width: 970px;
width: 100%;
text-align: center;
}
You have to compensate for the height of the header though, in your container div, so notice in my demo I have padding of 200px added to "bodydiv" to compensate
DEMO HERE
It is possible to have a nav bar that is sticky even without using javascript, jquery or any other scripting languages. You only need to add another attribute to your CSS code.
Everything that does the magic is the position: fixed attribute. The position attribute denotes the type of the position of a particular division in HTML. It is followed by the attribute(s) that mention the pixel position. They are top, bottom, right, and left.
Here is the code:
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
Here we are using position: fixed followed by top: 0px because we want the nav bar to always be fixed at 0 pixels from the top of the screen.
If you are looking for a STICKY one, as the question says, you better opt for position: sticky. Hope it helps.
If You want to know more about the position attribute in CSS, please visit https://www.w3schools.com/css/css_positioning.asp
I am trying to center an image within a div and I used the display:table & display: table-cell method. It is centered but it is off by a few pixels from the top. What can I do to correct this?
CSS
html, body {
width: 100%;
height: 100%;
}
body,html {
margin: 0;
padding: 0;
color:#ffffff;
text-align: center;
}
#wrapper{
text-align: left;
width: 940px;
margin: 0 auto;
margin-top: 22px;
background-color: #ffffff;
overflow: hidden;
}
header {
width: 908px;
height: 76px;
display: table;
border-style:solid;
border-top-width: 16px;
border-bottom-width: 16px;
border-top-color: #ffffff;
background-color: #cccccc;
}
#headerdiv { display: table-cell; vertical-align: middle; margin: 0; height: 28px; }
HTML
<div id="wrapper">
<header>
<div id="headerdiv"><img src="logotest.gif" height="28" width="180" alt="test"></div>
</header>
</div>
Add
img {
vertical-align:middle;
}
jsFiddle example