This is my first ever HTML project and I'm trying to clone the Google Nigeria homepage. I'm about 90% completed, but I have issues that I've tried fixing, to no avail.
The 'app logo' and "Sign in" on the navigation is further up than the other items. I tried using margin-top on those nth items, but it affects the entire nav items.
Here: jsfiddle.net/mux9xbam/
Thanks.
remove float:left; from .first li a{}
write
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
}
instead of
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
float:left;
}
and adjust margin padding of <ul>
use
img
{
vertical-align: middle;
}
to align image middle.
jsfiddle
Related
h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
I would like to know what is the 'correct' way to change my current menu, that looks like this:
to this:
The problem I have is making the buttons into these blocks that would change background on hover, and the vertical alignment, do I use padding? blocks? table? Help :S
(The color doesn't matter)
CSS:
.menu{
clear: both;
background-image:url(meniuBG.jpg);
height:55px;
line-height: 10px;
}
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
}
HTML (for no apparent reason):
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
.menu {
...
height:55px;
/* line-height: 10px; delete this */
}
.menu a {
...
line-height: 55px; /* add this */
}
Because you want to center vertically your <a> , there is many way to do this you can search on google there's many tuto.
the solution i give you is to make line-height equal to the heigh (55px). this solution work when your text is just on one line.
and for the hover just make <a> display: inline-block; and replace margin with padding
.menu a{
text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;
}
here's a FIDDLE
try to add this
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
line-height:55px;
display: inline-block;
}
.menu a:hover{
background-color: #E7550C;
}
I have a side menu on a website. It's inside a floated container named #left_menu, which contains the ul with li elements.
The problem is, I would like the li elements to have their own generated width instead of inheriting it from #left_menu, which they seem to do.
They have to be text-aligned to the right and only as wide as they need to be.
HTML
<div class="left_menu">
<ul>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
</ul>
</div>
CSS
.left_menu{
float: left;
width: 300px;
margin-left: 20px;
line-height: 30px;
padding-top: 3px;
}
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
}
.left_menu li:hover{
color: white;
background-color: #0072ff;
border-radius: 5px;
}
JSFiddle here.
Float left and then clear left and you should get what (I think) you're looking for:
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
float:left;
clear:left;
}
JSFiddle
Or float:right and clear:right, depending on which side you are looking to align the buttons.
JSFiddle
Just float your ul left:
.left_menu > ul{
float: left;
}
http://jsfiddle.net/mUP7n/4/
I'm working on a website where I have a ul menu with list items. I want the items to be centred on the screen. But it seems like my lists items have an annoying offset. See image:
My (HAML) is built up like this:
.menu
%ul
%li
#- content
My (SASS) css looks like this:
.menu {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
ul {
height: 30px;
background-color: black;
li {
background-color: white;
padding-top: 2em;
.active_menu {
border-top: 1px $red solid;
a {
color: $link-hover-color;
margin-bottom: 10px;
}
}
}
}
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
&:hover {
border-top: 1px $red solid;
}
}
}
ul li {
list-style: none;
display: inline;
margin: 0 1em 0 1em;
text-align: center;
a {
font-family: "ff-meta-web-pro",sans-serif;
font-weight: normal;
font-size: 22px;
}
}
Any ideas how I can get the menu/list items to center align?
You need to reset the horizontal margin and padding on the containing ul and list items to margin:0px; and padding:0px then define the individual padding or margins you need underneath them.
Also using margin:0px auto; in the right place should center the elements you specify.
I have some <li> items as part of my navigation bar on the website i'm making, I'm completely stumped on some spacing that occurs just before the items.
margin and padding are both 0, and list-style-type is set to none. Any ideas?
I forgot the website link! Here.
Additional details as requested:
The text for the <li> items is actual text and not an image.
The text for the <li> items is not aligned (removed superfluous
'center' ).
Related CSS:
/*****************
NAVIGATION STYLING
*****************/
#navigation{
position: absolute;
top: 0;
z-index:10;
text-align: center;
width: 100%;
margin: 0 auto 0 auto;
}
#navigation a:link, a:visited{
text-decoration: none;
color: white;
font-size:4.16em;
margin: 0.5em;
line-height: 1.5em;
text-transform: uppercase;
float: left;
width:100%;
}
#navigation #me{
}
#navigation a.im:link, a.im:visited{
line-height: 0em;
}
#navigation a.holly:link, a.holly:visited{
line-height: 0em;
}
#navigation a.games_programmer:link, a.games_programmer:visited{
line-height: 0em;
}
#navigation ul{
height: 50px;
text-decoration: none;
background:#1d6482;
margin: 0;
padding: 0;
}
#navigation li{
display: inline-block;
list-style-type: none;
}
You have in the navigation that any link should have margin: 0.5em. That looks to be about the size of the space. It appears by your screenshot that you have it open in Chrome. You should be able to see all styles applied to that element and use the checkboxes on each to remove or even alter the applied styles to find the culprit.