<!DOCTYPE html>
<html>
<head></head>
<body>
<header class="header">
<h1 class="logo">Our Wedding</h1>
<ul class="main-nav">
<li>Our Story</li>
<li>Annoncements</li>
<li>Travel & Stay</li>
</ul>
</header>
</body>
</html>
body {
font-family: Arizonia;
line-height: 1.6;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #34495e;
text-decoration: none;
}
.logo {
margin: 0;
font-size: 1.45em;
text-align: center;
}
.main-nav {
margin-top: 5px;
}
.logo a,
.main-nav a {
padding: 10px 15px;
text-transform: uppercase;
display: block;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
.header {
padding-top: .5em;
padding-bottom: .5em;
border: 1px solid #a2a2a2;
background-color: #f4f4f4;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
how do I make the menu bar on the left side a drop down menu, so that with a click of a button the menu bar on the left side of the website will drop down how it displays now and clicking it a second time would suck up the tabs that are displaying now? Im not sure if that makes sense but I can try and re word what I want if people don't understand.
Do you want something like this?
HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<header class="header">
<h1 class="logo">Our Wedding</h1>
<ul class="main-nav">
<li>Our Story</li>
<li>Annoncements</li>
<li>Travel & Stay</li>
</ul>
</header>
<script>
$(document).ready(function() {
$(".logo").click(function () {
$(".main-nav").toggle();
})
});
</script>
</body>
</html>
CSS:
.main-nav {
margin-top: 5px;
display: none;
}
Related
Alright, so I'm doing a web development class and I'm currently working on the last project for the course. I decided that I want a dropdown menu in the navbar so i followed the w3schools tutorial for it, but there is a slight problem. The dropdown, while it looks good, seems to have decided that it's background spanning the entire navbar sounds like a grand idea. Here's how it looks
Any of y'all got any idea how to fix this? this is my code
.menu{
overflow: hidden;
background-color: #000;
max-width: 100%;
position:relative;
top: -120px;
font-size: 16px;
}
.menu a{
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.menu a:link
.menu a:visited{
text-decoration: none;
}
.active{
background-color: #C00;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dopbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.menu a:hover, .dropdown:hover .dropbtn{
background-color: #9B0000;
}
.dropdown-content{
display: none;
position: static;
background-color: black;
max-width: 160px;
box-shadow: 0px 8px 16px 0px grey;
z-index: 1;
}
.dropdown-content a{
float: left;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover{
background-color: #7B0002;
}
.dropdown:hover .dropdown-content{
display: block;
}
<Html xmlns="http://www.w3.org/1999/xhtml">
<Head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="CSS/Candlekeep.css" />
<title>Home-Candlekeep</title>
</Head>
<Body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
<h1 class="logtxt">Candlekeep</h1>
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
</body>
</html>
There were few modifications required but I was able to fix the issue which you mentioned above, hope it helps.
body {
background-color: gray;
padding: 0;
margin: 0;
}
.menu {
background-color: #000;
position: relative;
font-size: 16px;
height: 32px;
}
.menu a {
color: white;
text-align: center;
text-decoration: none;
padding: 14px 20px;
}
.menu a:link .menu a:visited {
text-decoration: none;
}
.active {
background-color: #C00;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu a:hover,
.dropdown:hover .dropbtn {
background-color: #9B0000;
}
.dropdown-content a:hover {
display: block;
background-color: #7B0002;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body class="homepage">
<header>
<link href="https://fonts.googleapis.com/css?family=MedievalSharp&display=swap" rel="stylesheet">
</header>
<nav>
<div class="menu">
Home
<div class="dropdown">
<a href="DMs.html" class="dropbtn">Dungeon Masters
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Plot Hooks
Maps
Traps & Puzzles
Names & Locations
Campaign Management
Encounters
Character Sheets
</div>
</div>
Players
General Resources
</div>
</nav>
<h1 class="logtxt">Candlekeep</h1>
<div class="hwrap">
<img src="IMG/Logo.png" alt="Homepage" class="logo">
</div>
</body>
I have the following code to display a banner in my CSS stylesheet.
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
The banner is not displaying. Instead I get a small white cube in the top left hand corner.
The full CSS style sheet is:
body {
font-family: lucida grande,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: #fff;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
clear: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/banner.jpg);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/footer.jpg);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<div id=banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Books</li>
<li>Publications</li>
<li>About Us</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar"></div>
<footer>
<p>All rights reserved</p>
</footer>
</body>
</html>
Looks like a double quotation marks error in the id attribute value
<div id=banner">
This is what I would do:
1. Try doing background-repeat: repeat; ... see what happens.
2. right click on the small image and click view image to confirm that the image is the right one.
3. post the html for better understanding.
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}
I am trying to put a header onto my website. I've tried numerous times I just cant jot down the correct way. When I put an image it wont fit into the size of the header(the rectangle where it says Younani Flower's). Why is this issue occuring? I have no left the area empty, because the image usually covers the page.
Website: http://younani.com/finalsite/finalindex.html
CSS:
#header {text-align: center;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-image:url('backgroundflower5.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
width: 960px;
margin: 0 auto;
}
#container div {
border: 1px solid;
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; }
#left,
#center,
#right {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; }
Homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="container" class="clearfix"><!-- Header -->
<div id="header">
<h1>Younani Flowers</h1>
</div>
<!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p></p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
If you add the header background as follows it should work:
#header {
background-image: url(image_path);
}
If you remove the text inside, you will have to specify the dimensions of the header. Since the width is implicitly 100% for a block element, you'll only need to specify the height. In my browser the height with text is 81px.
Please check out this link quickly:
http://jsfiddle.net/8grSk/
As you can see the text as the bottom is aligned to the left side of the page
I want to add text to the right side of the page inline with the text already present.
How is this done?
I am finding it difficult to align all these divs!
Thanks guys!
James
You can easily rewrite everything to accommodate two regions (left and right) inside of your footer id like so:
HTML
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="footer" style="position:absolute;bottom:0;">
<div class="left">
About Us
Accessibility
Recruiters
Contact Us
</div>
<div class="right">
About Us
Accessibility
Recruiters
Contact Us
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
#footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 960px;
position:absolute;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer a {
font: 13px helvetica;
color: #0040FF;
padding: 8px 12px 3px 3px;
}
#footer a:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
.right {
float:right;
}
.left {
float:left;
}
demo
http://jsfiddle.net/8grSk/8/
-- edit
changed the fiddle to accommodate for your hover state better.
You should refactor the HTML. Instead if using divs, use an unordered list <ul>, then you can list your four links and float the <ul> left within the footer.
Then use another <ul> but this time float it right and voila, lined up links as you want them (I hope.)
<div class="footer1">
<ul id="footer-left">
<li id="footer1text">About Us</li>
<li id="footer1text">Accessibility</li>
<li id="footer1text">Recruiters</li>
<li id="footer1text">Contact Us</li>
</ul>
<ul id="footer-right">
<li id="footer1text">New Text</li>
</ul>
</div>
CSS
.footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 100%;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
display: table;
}
.footer1 {
background: #FFFFFF;
height: 30px;
width: 350px;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer1text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
}
#footer1text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
#footer-left li
{
float: left;
}
#footer-right li
{
float: right;
}
Working demo here :)