I have been learning htm, css and php all at once. I am creating a website that touch's all of
these things. Its for educational purposes only.
How can I make it so that I have my websites name beside the navigation text with it all centered.
Like right now I have the website name in the nav bar with the navigation text beside it but the
navigation text isnt in the center of the line its a bit low. Here is the site: http://66.172.10.179/resolver/
CSS:
/* Body */
body {
background-color: #FF5930;
margin: 0px;
}
a {
text-decoration: none;
color: white;
}
/* Navigation bar */
header {
background-color: #FF4719;
padding: 5px 0 8px 15px;
}
header nav h2 {
display: inline;
font-family: sans-serif;
}
header nav ul {
display: inline;
}
header nav ul li {
display: inline;
padding: 0 5px;
font-size: 15px;
font-family: sans-serif;
color: white;
height: 10px;
}
header nav ul li:hover {
}
HTML:
<header>
<nav>
<h2>Skype Resolver</h2>
<ul>
<li>Resolver</li>
<li>Blacklisting</li>
<li>Purchase API</li>
<li>Domain tools</li>
<li>Spam tools</li>
<li>Misc tools</li>
</ul>
</nav>
</header>
I added line-height to H2, create a CSS thing for nav and added: display: inline-block;
Worked like a charm!
To achieve this without actually putting in any line height you can add the following:
CSS
nav{
display:table;
}
nav h2 {
vertical-align: middle;
}
nav ul{
vertical-align: middle;
}
This will vertically center your text without you having to guess the line height...
DEMO JSFiddle
Related
I have come across a few examples while searching SO but to me - as a beginner - it is not very clear what the best practices are when it comes to implementing this.
I want to have the logo in the middle of my navigation bar with 2 links to centered left of the image and 2 centered right so that my 4 links so that the center of the logo aligns with the 4 links horizontaly.
For your reference:
http://jsfiddle.net/8fc0e632/
HTML:
<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li>Over ons</Li>
<Li>Menukaart</Li>
<li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
<Li>Ontbijtmanden</Li>
<Li>Contacteer ons</Li>
</ul>
</div>
</nav>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);
.body {
font-family: "Open Sans";
}
.menubar {
background: rgb(228, 6, 19);
box-shadow: 0 1px 3px #999;
font-family: inherit;
}
.menubar ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
.menubar ul li {
display: inline;
list-style: none;
}
.menubar ul li a {
text-decoration: none;
color: white;
padding: 0 15px 0 0;
font-family: "Open Sans"
}
.logo img {
margin: 10px auto 0px auto;
display: block;
width:220px;
}
If you want to do it like this, you will have to set the li width, because menu items are not the same length.
CSS:
.menubar ul li {
display: inline-block;
width: 220px;
list-style: none;
vertical-align: middle;
}
and here's your updated JSFiddle
But in my opinion the best what you can do is to use Bootstrap
//Oh and you should always use <li></li> not <Li></Li> and definitely not <li></Li>
Sometimes you can center img elements with by adding margin: 0 auto; to the property you want to center(in your case .logo img)
otherwise i would go with a margin-left:45%; or margin-left:auto with a margin-right:auto property on the .logo img elemsome solution in that ballpark.
/S
Just change your css applied to logo img. Hope this works.
.logo img {
width:220px;
vertical-align: middle;
}
I'm playing around with some HTML5 and CSS3 and trying to build a single static page for now.
Currently working on the navigation menu with one of the items being a drop down menu.
When I hover above the drop down item, the item is pushing the items on its left and right away.
Could someone explain to me why this is happening? I have very little HTML or CSS experience, I just started putting something together.
The CSS is based on many tutorials on the internet for making drop down navigation menu's. I've stripped most of the code down to the "very basic" to get this working.
Edit: Any tips to make the CSS cleaner are welcome as well.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
I think the issue is that your secondary menu UL is wider than your primary menu LI containing it. When the embedded UL switches from display:none to display:block it increases the width of the parent LI.
A couple possible solutions:
specify a width for your main menu LIs, e.g.:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
Use position: absolute to take the embedded UL out of the layout flow, e.g.:
nav ul ul {
display: none;
position: absolute;
}
Both of these options have some issues with your current layout, though, and would required you to rework things a bit. Hopefully this is helpful in terms of pointing you in the right direction.
Try by like bellow:
nav>ul { display: inline-block; list-style: none; }
I am creating a website using a mobile-first approach. I am currently styling the navigation bar, which is comprised of a ul with five li elements and an a element within each li. For the mobile layout, I want the navigation to be perfectly centered. The nav element and the li elements appear to be perfectly centered; however, the a elements are not centered within each li... They are skewed toward the right. How can I correct this?
Here is my HTML:
<nav>
<ul>
<li>Home</li>
<li>Programs</li>
<li>About Us</li>
<li>Why</li>
<li>Contact Us</li>
</ul>
</nav>
And here is my CSS:
nav {
width: 15%;
margin: 0 auto;
padding-top: 0.5em;
}
nav ul {
list-style-type: none;
}
nav li {
max-width: 100%;
margin: 1em;
text-align: center;
border-radius: 10px;
}
nav a {
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0.5em;
color: inherit;
text-decoration: none;
}
And here is an image of what the nav currently looks like in the browser (Chrome):
Set the li's margin and padding to 0;
Add the following inline or in an external style sheet to nav a
margin: 0px;
text-align: center;
Try this :
nav ul {
display: block;
overflow: hidden;
padding: 0px;
list-style-type: none;
}
nav a {
display: block;
width: 100%;
margin: 0 auto;
color: inherit;
text-decoration: none;
overflow: hidden;
}
And use max-width on the tag not simple width
Started on a project that will be used for educational purposes as it requires html,css and php which
I am still learning! I want to know how can I position my H4 so it lines up with the navigation text.
Is there a better way of doing this? http://66.172.10.179/resolver/
CSS:
/* Body */
body {
background-color: #FF5930;
}
/* Navigation bar */
header {
background-color: #FF4719;
}
nav h2 a{
color: black;
text-decoration: none;
display: inline;
margin: 0;
}
nav h2 a:hover{
color: gray;
text-decoration: none;
}
nav ul li {
display: inline;
margin: 0;
}
HTML:
<header>
<nav>
<h2 class="header-text">Skype Resolver</h2>
<ul>
<li>Resolver</li>
<li>Blacklisting</li>
<li>Purchase API</li>
<li>Domain tools</li>
<li>Spam tools</li>
<li>Misc tools</li>
</ul>
</nav>
</header>
Try this:
Add margin and padding to nav ul:
nav ul {
margin:0;
padding:0;
}
Change nav ul li to this:
nav ul li {
display: inline;
}
JSFiddle Demo
At the top of my page I want to have the title of the page aligned to the left of the screen with a short nav menu aligned to the right of the screen. I can achieve this using float but the two elements have different baslines i.e. the baseline of the text appears different. Is there any way to get this to work using css? I have a sample of what I'm trying to do up on jsfiddle http://jsfiddle.net/nBPCG/63/
Hi you can use display:inline-block in your h1
or see the Fiddle:- http://jsfiddle.net/nBPCG/101/
First I'd suggest using a ul to wrap the links rather than an h3, that structure doesn't make sense. Then I'd just add some padding to the ul. Here's a cleaned up example of the markup:
<article >
<header>
<h1>This is Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Works</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div class="clr"></div>
</header>
</article>
And the styles:
body {
font-family:"Verdana", Verdana, sans-serif;
font-size: 1em;
font-weight:400;
}
h1 {
font-family:"Century Gothic", Verdana, sans-serif;
font-size: 4em;
font-weight:400;
float: left;
margin-left:10px;
}
header nav {
margin-right: 10px;
float: right;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 2em 0 0 0;
}
nav ul li {
display: inline;
font-size: 1.2em;
font-weight:400;
}
nav a {
padding: 0 1em;
border-right: 1px solid #000;
}
nav li:last-child a {
padding-right: 0;
border-right: none;
}
.clr {clear:both;}
Fiddle: http://jsfiddle.net/nBPCG/98/