I have a menu bar and i want to drop the profile tag so I put an <ul>
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<div class="centrado-fluid">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="menuleft">Home</p>
<p class="menuleft">Películas</p>
<p class="menuleft">Series</p>
<input class="buscador" type="text" placeholder="Busca">
<p class="menuright">Añadir Serie</p>
<p class="menuright">Añadir Película</p>
<ul><p class="menuright">Profile</p></ul>
</div>
<hr class="linea">
</div>
</head>
<body>
When I put the <ul> the <p> profile comes down
This is the css
.centrado-fluid {
height: 100%;
width: 80%;
background-color: #ffffff;
margin: 0 auto;
}
.menu {
height: 44px;
width: auto;
/*background-color: blue;*/
background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(99, 99, 130);
border-radius: 15px;
padding-top: 10px;
}
.espacio {
height: 10px;
}
.menuleft {
width: 100px;
height: auto;
margin-top: -2px;
margin-left: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.buscador {
height: auto;
margin-top: -2px;
margin-left: 7%;
text-align: center;
background-color: whitesmoke;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
.menuright {
height: auto;
margin-top: -2px;
float: right;
margin-right: 15px;
text-align: center;
background-color: yellow;
border-radius: 10px;
font-family: hasa;
font-size: 20px;
padding-top: 5px;
display: inline;
}
How I can return it up?
To markup your menu, you can do something like this - JSFiddle Demo
HTML
<ul class="menu">
<li>link</li>
<li>link</li>
<li>link</li>
<li class="right">link</li>
<li class="right">link</li>
</ul>
CSS
* { margin:0; padding:0; }
ul.menu { float:left; width:100%; }
ul.menu li { float:left; margin:0 10px; list-style: none;}
ul.menu a { display:inline-block; padding:5px 10px; background:yellow; }
ul.menu .right { float:right;}
<ul> tag has default margin and space like paragraph. So don't use UL tag. Simple use <p> tag
Your HTML has some problems with validity. Try using http://validator.w3.org/#validate_by_input for checking your code:
You are closing <head> too late; starting from <div class="centrado-fluid"> you have to wrap everything inside a <body>
<p> is not allowed inside of <a>, but the other way round.
The only element allowed as children of <ul> is <li>
The best way to fix your problem would be to fix your HTML before going for the original problem.
Related
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
I'm currently learning HTML and CSS and I tried making my very first webpage but got stuck when I realized my h2 is not appearing anywhere on the page. Sorry Im a noob and have no idea what I did wrong. Please help! Thank you!
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
Your header is fixed ... You need to move your div down with margin ..FIDDLE
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="DIV">
<h2>Hello!</h2>
</div>
--
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: fixed;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: red;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
#DIV{
position:absolute;
margin-top: 125px;
}
The issue here is related to your use of a fixed header.
Take a look at this:
http://codepen.io/anon/pen/XXpggN
All I did was put some padding on the top of the div with the h2 in it, which brought it out from underneath the header. For future reference, a fixed position header will float above the rest of the contents, so the next elements that you add are going to begin appearing right at the very top of the body because the header div floating up top there is not occupying any space on the main body page.
If you ever want to organize your divs in a manner such as this, you just need to specify the z-index values of the divs. In this case though, all you needed was to push the first element (h2 div) down a bit.
position:inherit; padding-top:110px;
your header overwrite other tag.
*{
margin: 0;
padding: 0;
border: 0;
}
header{
position: relative;
padding-bottom: 50px;
background-color: black;
width: 100%;
}
ul{
float: right;
padding-right: 15px;
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
padding: 15px;
padding-bottom: 20px;
}
ul li a{
text-decoration: none;
color:white
}
a:hover{
font-size: 20px;
color: green;
}
header h1{
color: red;
text-align: center;
padding-top: 20px;
}
body{
background-color: back;
}
nav{
margin-right: 38%;
}
h2{
color: blue;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TryOne</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div>
<h2>Hello!</h2>
</div>
</body>
</html>
CSS:
h2 {
color: blue;
background-color: white;
text-align: center;
}
header {
background-color: black;
width: 100%;
height: 100px;
}
Hope this work :)
I've begun making a basic porfolio page and I'm starting with a simple header that I want at the top center of the white space of the page, and it seems to be hidden or just not there at all. Can anybody see what I'm doing wrong? Link to site: http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
Here is the HTML bit i'm focusing on:
<div class="header"><h1>Portfolio</h1></div>
and the entire CSS for the whole site is:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
in your css you have 'header' as id and not a class, use the dot notation for a class
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
adding margin:auto; will center the div in the middle. It automatically gives even spacing either side.
Well.. your defining a class but styling a id selector.
1.) remove the below.
#header { ... }
2.) replace with.
.header { ... }
3.) You need to define a height, you can keep your existing style you had associated with misplaced #header but a few additional suggestions below:
.header {
height: 100px; // define height
margin: 0 auto; // center if you want
}
You have multiple closed head tags and you haven't defined a class for your header.
<!doctype html>
<html>
<head>
<style>
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One' rel='stylesheet' type='text/css'>
<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>
<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>
<body>
<div id="sidebar">
<h2><ul>
<li>Home</li>
<li class="current">Portfolio
<ul>
<li>Design</li>
<li><a href="photo.html">Photo</li>
<li><a href="motion.html">Motion</li>
<li><a href="web.html">Web</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul></h2>
</div>
<div class="header"><h1>Portfolio</h1></div>
<div class="social-sidebar-buttons">
<img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/>
<img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" />
<img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" />
<img src="mailto2.png" target="_blank" alt="Email Chloe" />
</div>
</div>
</body>
</html>
I know this question has been asked on this forum before but none of the answers helped, so I'm here to ask again, my html5 and css website has a wrapper (as most do), but its not resizing with the contents, I've checked everything that I think that could have gone wrong, here's the code for all who want to try to see what's up, thanks!
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>Home</li>
<li> | </li>
<li>Blog</li>
<li> | </li>
<li>Videos</li>
<li> | </li>
<li>Contact-Me</li>
</ul>
<h1>Zormion's Blog</h1>
</div>
<div id="content">
<h2>Latest Blog Post:</h2>
</div>
<div id="sidebar">
<h3>Tweets:</h3>
<a class="twitter-timeline" href="https://twitter.com/Zormion" data-widget-id="537398875540455424">Tweets by #Zormion</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #DFC1B0
}
#wrapper {
margin: 20px auto;
width: 1000px;
text-align: left;
background-color: #CCCCCC;
}
#header {
width: 100%;
height: 40px;
background-color: #000;
}
#header h1 {
margin-left: 10px;
color: white;
}
#header ul {
padding-top: 10px;
float: right;
margin-right: 20px;
}
#header ul li {
display: inline-block;
list-style: none;
color: #fff;
font-size: 16px;
}
#content {
width: 63%;
height: 150px;
background-color: grey;
float: left;
margin: 10px;
padding: 20px;
}
#content h2 {
text-align: center;
font-size: 32px;
}
#sidebar {
width: 25%;
float: left;
background-color: grey;
margin: 10px;
padding: 20px;
border: 1px black;
}
#sidebar h3 {
text-align: center;
color: black;
font-size: 32px;
margin-bottom: 10px;
margin-top: -10px;
}
.twitter-timeline {
height: 500px;
}
Use like this:
#wrapper {
margin: 20px auto;
width: 100%;
max-width: 1000px;
text-align: left;
background-color: #CCCCCC;
}
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.