would you know why my horizontal menu is to floating to the right despite ?
You can view it live here.
<header>
<nav>
<ul>
<li>Home</li>
<li>Work
<ul>
<li>Résumé</li>
<li>Portfolio</li>
</ul>
</li>
<li>Play
<ul>
<li>Experiments</li>
<li>Utilities</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div id="news_box" style="max-width: 400px; float: right; text-align: left;"></div>
</header>
CSS:
body {
background-color: rgb(255, 255, 255);
font-family: Helvetica;
font-size: 16px;
font-weight: 400;
line-height: 1.38;
color: rgb(21, 84, 244);
margin: 0;
margin: 0;
padding: 0;
border: 0;
}
header {
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
}
h1 {
width: 100%;
margin-top: 39px;
margin-right: auto;
margin-left: auto;
font-size: 37px;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(0,0,0);
}
.blablatext {
margin-top: 16px;
margin-right: auto;
margin-left: auto;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(21, 84, 244);
}
nav {margin: 20px auto}
nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top}
nav a {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px}
nav a:hover {background: rgba(0,0,0,0.25)}
.activeNav {background: rgba(0,0,0,0.25)}
nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px}
nav ul li ul li {display: block; float: none; margin: 0; padding: 0}
nav ul li ul li a {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px}
nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)}
.hover a {display: block;}
.hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;}
nav{
text-align:right;
position:relative;
}
nav ul li {
border: 1px solid;
display: inline-block;
margin-left: 5px;
margin-right: -4px;
position: relative;
z-index: 1000;
}
Give float right property to your nav in css:
nav {
margin: 20px auto;
float: right;
}
This will keep the news div below and would float right
nav {
float: right;
margin: 20px auto;
width: 100%;
}
nav ul {
float: right;
}
Result
Try adding float:right to either your nav css rule or your nav ul css rule, just did it in the console and it worked fine for me
Related
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
I'm trying to make a dropdown menu on the right side of the screen for my users. But it keeps getting cut off and is hiding my text.
When I hover over my dropdown, it gets completely cut off and hides my welcome text on the screen.
My HTML Markup:
<header>
<div>
<?php
if (isset($_SESSION['userId'])) {
require './includes/dbh.inc.php';
/*$sql = mysqli_query($conn,"SELECT fnidUser, lnidUsers FROM users"); */
$result = mysqli_query($conn, "SELECT fnidUser FROM users");
echo "
<div class='dropdown' style='float:right;'>
<li class='login current2'><a href='#'>Welcome</a>
<div class='dropdown-content'>
<ul>
<li style='font-size:25px;'><a href='#'>My Account</a></la>
<li style='font-size:25px;'><a href='#'>My Orders</a></la>
<li style='font-size:25px;'><a href='#'>My Wishlist</a></la>
<li style='font-size:25px;'><a href='#'>My Cart</a></la>
<li style='font-size:25px;'><a href='#'>Log out</a></la>
</ul>
</div>
</li>
</div>
";
}
else{
echo "<li class='login current2'><a href='login.php'>Login / Sign up</a></li>";
}
?>
</div>
<div class="container">
<div id="branding">
<h1><img src="./Header Image/header.png"></h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Apple</li>
<li>Samsung</li>
<li>Gadgets</li>
</ul>
</nav>
</div>
</header>
My CSS Style for this page(side note, I attempted to make the text size smaller and for some reason it doesn't seem to work):
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.button_1 {
height: 49px;
width: 144px;
background: #FF3B3F;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: white;
font-size: 25px;
border-radius: 8px;
cursor: pointer;
}
.button_1:hover{
background-color: #752021;
color: #CCCCCC;
}
.button_1, .roundbutton:focus{
outline: 0;
}
img{
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body{
font: 15px/1.5 Arial;
padding: 0;
margin: 0;
background-color: #EFEFEF;
}
.footerc{
float: left;
}
.footerb{
float: right;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Login Page Stuff */
#login_page{
margin-top: 65px;
margin-right: 150px;
margin-bottom: 65px;
margin-left: 150px;
min-height: 500px;
}
#login_page h1{
text-align: center;
color: #FF3B3F;
font-size: 50px;
text-shadow: 2px 2px 12px #000000;
}
/* Header */
header{
background: #35424A;
color: #FFFFFF;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF3B3F 5px solid;
}
header ul a{
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}
header li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header nav{
float: right;
margin-top: 25px;
margin-right: 100px;
}
header .highlight, header .current a{
color: #FF3B3F;
font-weight: bold;
}
header .current2 a{
color: #FF3B3F;
}
header a:hover{
color: #CCCCCC;
}
.login a{
color: #FFFFFF;
text-decoration: none;
float: right;
}
.login {
color: #FFFFFF;
text-decoration: none;
float: right;
margin-top: -10px;
margin-right: 10px;
}
/* Login Form Style */
section #login_page td .form{
margin-bottom: 25px;
}
/*Showcase*/
#showcase{
min-height: 500px;
background:url('../img/iphone_showcase.png') no-repeat -50px -50px;
border-bottom: #FF3B3F 5px solid;
/*Scroll Parallax*/
background-attachment: fixed;
}
#showcase h1{
text-align: center;
color: #FF3B3F;
margin-top: 200px;
font-size: 50px;
text-shadow: 4px 4px 12px #000000;
}
/* Boxes */
#boxes{
margin-top: 65px;
}
#boxes .box{
float: left;
width: 30%;
padding: 25px;
}
#boxes .button_1{
align-content: center;
}
#boxes .box2{
float: left;
width: 48%;
min-height: 100px;
}
/* Footer */
footer{
padding: 20px;
margin-top: 200px;
border-top: #FF3B3F 5px solid;
background-color: #35424A;
color: white;
font-weight: bold;
}
footer .fpara, footer .logo{
margin-left: 100px;
}
footer nav{
float: right;
}
footer li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
.fbhover{
background: url('../footer image/facebook_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.fbhover:hover{
background: url('../footer image/facebook_hover_yes.png') no-repeat;
background-size: 100%;
}
.instahover{
background: url('../footer image/insta_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.instahover:hover{
background: url('../footer image/insta_hover_yes.png') no-repeat;
background-size: 100%;
}
.trhover{
background: url('../footer image/twitter_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.trhover:hover{
background: url('../footer image/twitter_hover_yes.png') no-repeat;
background-size: 100%;
}
.sphover{
background: url('../footer image/support_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.sphover:hover{
background: url('../footer image/support_hover_yes.png') no-repeat;
background-size: 100%;
}
/* Apple Store */
section #applestore{
margin-top: 65px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Store Sections */
#main {
padding:20px 0;
}
#content {
overflow: hidden;
}
#content #left, #content #right {
float: left;
margin: 0 2%;
width: 63%;
}
#content #right {
margin-left: 0;
width: 30%;
}
#content h3 {
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
border-bottom: 1px solid #E0E0E0;
color: #3C3C3C;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding: 11px 0 12px 20px;
text-transform: uppercase;
}
#content ul {
list-style:none outside none;
margin:0;
padding:0;
}
#content #left ul li {
float:left;
padding-bottom: 21px;
width: 33%;
}
#content #left ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li {
border-top: 1px solid #E7E7E7;
overflow: hidden;
}
#content #right ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li:first-child {
border-width: none;
}
#content #left ul li .img {
text-align: center;
}
#content #right ul li .img {
background-color: #FFFFFF;
float: left;
height: 94px;
text-align: center;
width: 113px;
}
#content #left ul li .img img {
height:128px;
width:128px;
}
#content #right ul li .img img {
height:70px;
margin-top: 11px;
width:70px;
}
#content #left ul li .info {
padding: 17px 20px 0 19px;
}
#content #right ul li .info {
float: left;
overflow: hidden;
padding: 17px 0 0 21px;
width: 164px;
}
#content ul li .info .title {
color: #4B4B4B;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}
#content ul li .info .title:hover {
color: #049733;
}
#content #left ul li .info p {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
#content #left ul li .info .price {
background: none repeat scroll 0 0 #F7F7F7;
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 17px 0 10px;
padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding-top: 25px;
}
#content #left ul li .info .price .st {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
color: #7F7F7F;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-right: 6px;
text-decoration: line-through;
}
#content #right ul li .info .price .special {
color: #FD7A01;
font-weight: bold;
text-decoration: none;
}
#content #left ul li .info .actions {
overflow:hidden;
}
#content #left ul li .info .actions a {
border: 1px solid #E0E0E0;
color: #fd7a01;
display: block;
float:right;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 5px;
text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
color: #009832;
float:left;
}
If you can provide me a solution it'd be much appreciated.
You missed the position attributes for your position: absolute.
By adding:
right: 0;
top: 10px;
solves the issue (of course, you can custom that for your needs)
Working example: https://codepen.io/cdtapay/pen/OdRowv
I have a website home page which has a menu (with a drop down) than an image (with text overplayed). For whatever reason the image is floating above the menu, so when you hover on the drop down it hides the menu behind the image.
HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>
Use z-index for making the dropdown above the image.An element with greater z-index will be on the top of that with lower z-index
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>
ok so i put a background and blocks in lists but now the text is hyperlinked and only the text is clickable. what am i doing wring? i need the whole box to be clickable and the text the be white until you scroll over it then it turns black. also, is there a way to make it on mobile that the boxes are closer together under each other?
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>
The text decoration is done on the anchor element I think, not the <li> tag.
Have you tried this?
ul li a,
ul li a {
text-decoration: none;
}
Full CSS/HTML:
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color: #3D5771;
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 23%;
left: 30%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 250px;
top: -1px;
left: 15px;
height: 25px;
font-family: Arial;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li:hover a,
ul li a:active {
background-color: white;
color: black;
}
ul li a {
color: white;
text-decoration: none;
height: 100%;
width: 100%;
display: inline-block;
}
<center>
<h1>A Girl With A Passion</h1>
</center>
<ul>
<li><strong>MY LIFE</strong>
</li>
<li><strong>PORTFOLIO</strong>
</li>
<li><strong>RESUME</strong>
</li>
<li><strong>ABOUT ME</strong>
</li>
</ul>
Add this to your CSS to make the whole "box" clickable
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
And change this to get color right
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
Update: Base on your request, I made some markup changes, to make it more responsive
Snippet demo
html, body {
margin: 0;
padding:0;
}
body {
background:URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: 100%;
background-color:#3D5771;
}
.wrapper {
padding-top: 10%;
}
h1 {
color: white;
font-family:Arial;
font-size: 4.6vw;
letter-spacing: 1px;
text-align: center;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
text-align: center;
margin: 0;
padding: 0;
}
ul li {
font-family:Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
background-color: rgba(5,4,2,0.1);
border: 2px solid white;
color: white;
font-size: 90%;
width: 150px;
height: 40px;
margin: 30px;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
text-decoration: none;
color: white;
}
#media screen and (max-width: 700px) {
.wrapper {
padding-top: 5%;
}
ul li {
margin: 10px;
}
}
<div class="wrapper">
<h1>A Girl With A Passion</h1>
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
that is because you haven't used text-decoration property for your a.to do that in your css use,
li a{
text-decoration:none;
}
instead of this.
li{
text-decoration:none;
}
I'm trying to let my menu stick to the bottom of my header. I've already tried getting it down, with deleting the float's, adding some, playing with padding/margin (this isn't an option seems to me?
<div id="header">
<div id="logo">
<h1>blah</h1>
<h3>Blah</h3>
</div>
<div id="menu">
<ul>
<li>qsdfqsdfqsdf</li>
<li>qsdfqdsfqsdf!</li>
<li>qdsf</li>
<li>qdsf</li>
</ul>
</div>
</div>
CSS:
/** HEADER */
#header {
height: 125px!important;
background: #000;
position: fixed;
top: 0;
width: 100%;
}
/* Logo */
#logo
{
float: left;
width: 250px;
padding: 20px 0px 0px 50px;
text-transform: uppercase;
}
#logo h3{
color: #fff;
margin-left: 1em;
font-size: 1em;
}
#logo h1
{
padding: 5px 10px 0px 0px;
}
#logo h1 span, #logo h3 span{
color: #000;
}
#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}
#logo p
{
display: block;
margin-top: -10px;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-size: 1.2em;
color: #FFFFFF;
}
#logo p a
{
color: #FFFFFF;
}
/* Menu */
#menu{
float: right;
width: 600px;
margin: 2em 2em 0 0;
}
#menu ul{
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
position: relative;
display: inline-table;
}
#menu li
{
float: left;
}
#menu a
{
display: block;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
color: #FFFFFF;
padding: 1em;
text-decoration: none;
}
#menu a:hover{
color: #000;
text-decoration: none;
background: #fff;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
}
Here an example:
http://jsfiddle.net/2wmSt/
Almost there mate, just position the menu absolute to the bottom of the header.
#menu{
position:absolute;
bottom:0;
right:0;
}
jsfiddle example