i'm working on a project for school and we have to make a webpage. Since this is my first time working on something like this i have a little problem. The problem is when i make my screen smaller in width, my menu bar moves out of my background image. You can see it here: https://r0590903.webontwerp.khleuven.be/website/html/
My html:
nav {
background: url(Images/HeaderDepot.jpg);
height: 469px;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
margin-top: -50px;
display: inline-block;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 7px;
text-decoration: none;
white-space: nowrap;
color: #000;
background-color: #FFF;
opacity: 0.75;
margin-right: 10px;
margin-top: 430px;
}
<div class="header-container">
<header class="wrapper clearfix">
<nav class="nav">
EN
NL
<ul class="ul">
<li class="active">Home</li>
<li>Reserveren</li>
<li>Galerij</li>
</ul>
</nav>
</header>
</div>
I know my aside isn't right yet when you make the page smaller, but my main problem now is the menu bar.
Any ideas to fix this? Thanks in advance!
Remove background-size:100% from your nav tag.
Related
I'm really new to this whole CSS and HTML and i'm trying to make a simple navbar with what I have learned.
The problem is, I have the navbar items centered and I was happy with it. Then I decided to add this hover option so the background color of each item would change when hovering on it.
The issue is I cannot change the height or alignment of the boxes.
weird box
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav ul:hover {
background: blue;
height: 20px important;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
}
<nav id="header">
<ul>
<li>Home</li>
</ul>
<ul>
<li>Contact Info</li>
</ul>
<ul>
<li>NUKE</li>
</ul>
</nav>
The hover effect should be added to the list-items (<li>). To get more space, you can add padding instead of changing the height.
Also, only add one <ul> instead of 3.
#header {
background: #9842f5;
position: fixed;
width: 100%;
padding: 20px 0;
text-align: center;
}
nav ul {
font-family: Arial;
display: inline;
text-align: center;
margin: 0 20px;
}
nav li:hover{
background: blue;
}
nav li {
display: inline;
opacity: 0.78;
text-align: center;
padding: 20px;
}
<nav id="header">
<ul>
<li>Home</li>
<li>Contact Info</li>
<li>NUKE</li>
</ul>
</nav>
I'm having a hard time practicing and can't figure this out to save my life. 7 hours trying to find solutions to no avail! Nothing will budge.
I simply want the text to be in the middle like this site or this site a link. Instead of all white I want an opaque black box with text over it. My text is just all over the place. And the logo on the left and the nav bar/ menu to the right of it.
https://imgur.com/a/1oCKaco
Link to the code.
https://codepen.io/admitdefeat/pen/BEyMzK
HTML
<div class="post-body">
<p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
its look and how you feel when you see it!</p>
</div>
CSS
post-body{
padding-top: 3rem;
position: relative;
box-sizing: inherit;
}
div {
display: block;
}
Thank you.
I've watched videos on how positioning, divs, containers and tried putting information together.However, there is something I'm not understanding.
I want the page to be aligned and positioned.
Just don't get stressed out, if you want the menu to be always on top right just give it the rules:
`#menu{
position: fixed;
right: 5px; /* or the amount you want */
top: 5px; /* or the amount you want */
}`
apply the same logic on the logo, and finally add text-align: center; for your text to be centered in the page, and voila !
In your .post-body class, remove the padding-top: 3rem and position: relative as they are messing up your formatting. Then add text-align: center to center the text on the page, and add margin: 100px 20% to restrict the positioning of the text. You can change both of these values to whatever you desire, depending on the positioning you are aiming for. The first value (100px) is how far from the top you want the text to begin (y-axis), and the second value (20%) is how far from the left and right edge you want the text to be (x-axis).
Note that using a % value for the second value will dynamically resize the text for you depending on the screen size. In this case, it will always be 20% of the screen size from the left and right edge of whatever device you are using.
body {
font-family: "Basier";
font-size: 20px;
}
html {
background: url(summer.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.post-body {
box-sizing: inherit;
text-align: center;
margin: 100px 20%;
}
div {
display: block;
}
#font-face {
font-family: "Basier";
src: url("basiersquare-regular-webfont.ttf");
}
.logo {
width: 150px;
height: 140 px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
margin-right: 0 px;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Basier";
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #F4D03F;
}
/*Style for dropdown links*/
li:hover ul a {
background: #F4D03F;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: f1c40f;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Basier";
text-decoration: none;
color: #F4D03F;
background: #F4D03F;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CLT Designs</title>
<link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<link href="designs.css" rel="stylesheet">
</head>
<body>
<img class="logo" src="clt.png" alt="logoclt">
<h2> RENOVATION PROJECT</h2>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="hidden">
<li>What is Design + Build?</li>
<li>Our Process</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="post-body">
<p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
its look and how you feel when you see it!</p>
</div>
</body>
</html>
I tried doing it with absolute and relative positioning, hope this solves your question. i modified your code just a little bit.
Check this codepen
https://codepen.io/jls314/pen/oOgVGz
You wanted the logo to the left and the navbar to the right so I put them together in a header tag and position them.
<header>
<img class="logo" src="clt.png" alt="logoclt">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="hidden">
<li>What is Design + Build?</li>
<li>Our Process</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
this is the CSS:
header {
position: relative;
}
.logo {
position: absolute;
left: 10px;
width: 150px;
height: 140px;
float: left;
}
#menu {
position: absolute;
right: 10px;
}
.post-body{
position: relative;
top: 200px;
box-sizing: inherit;
width: 50%;
margin: 0px auto;
background: rgba(0,0,0,.7);
color: white;
}
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
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
I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.