I am pretty new to web-development and as I'm making the navbar, the positioning is off. This is a picture of what's happening. The right side of the navbar entailing the links/other pages are going under, but when I make the right-side logo smaller, they go back up. I'm not sure what is happening. My code is as follows:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speech and Debate</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<nav>
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
Thank you very much.
You can ensure the content inside navigation is adjusted to center by setting display to flex just like what #somedev said.
#green-strip{
width: 100%; height: 2.5vh;
border-style: solid;
border-color: #026f4d;
background-color: #026f4d;
}
// nav bar container
.container {
width: 100%;
margin: 0 auto;
}
// nav bar background
// header {
// width: 100%; height: 10vh;
// background: #002654;
// top: 2.5vh;
//}
// prevents container from shrinking after nav bar elements float
header::after {
content: '';
display: table;
clear: both;
}
.logo {
text-align: left;
}
nav {
display: flex;
text-align: right;
justify-content: center;
}
nav img{
position: absolute;
left: 0;
}
nav ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
right: 0;
}
nav li {
display: inline-block;
margin-left: 2vw;
margin-right: 2vw;
position: relative;
}
nav ul li a {
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-style: normal;
letter-spacing: 0.05vw;
font-smooth: 2em;
font-size: 13px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #b6b8b6;
}
nav a::before {
content: '';
display: block;
height: 0.35vh;
width: 100%;
background-color: #fff;
position: absolute;
top: -2vh;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
<div id="green-strip"></div>
<div class="container">
<nav>
<img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
<ul>
<li>Home</li>
<li>Debate</li>
<li>Speech</li>
<li>Schedule</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
Its becouse your logo element has wrong position set.
Try adding this:
.logo {
text-align: left;
position: absolute;
}
"position: absolute;" means that your logo will be ignored by other elements and will always be right there where you want it to be
Also when designing a page it is always a good idea to remove margin and padding in a very beginning of css file, like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Related
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
I have a photo of the most recent post on my page and would like to put a small portion of text onto the top left corner of the picture. I have tried code to do so from other online resources, but none of them have worked. Can someone please check why my code isn’t working or provide an alternate method of putting text on an image?
Here is my HTML + CSS:
* {
margin: 0;
padding: 0;
}
body {
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative; /* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px; /* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li{
width: 130px; /* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover img {
height: 50%;
width: 100%;
position: relative;
display: inline-block;
}
.newest-review-cover .newest-review-title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-title">
<p> The 5AM Club </p>
</div>
</section>
</body>
</html>
Thanks in advance for your help!
For starters, you are targeting your newest-review-title class wrong in your CSS, by using a period between review and title. Change that. Also, try making your container the relative element instead of your image, like so:
.newest-review-cover {
position: relative;
}
.newest-review-cover img {
display: block;
width:100%;
}
.newest-review-title {
position: absolute;
display:block;
z-index: 999;
margin:0 auto;
text-align: center;
top: 50%;
width: 60%;
left:20%
}
This method provides an alternative solution using the CSS background image property. Then you can place your text in the div using the CSS you already had in place. You can adjust the height by adjusting the height of the div. The size of the image can be adjusted using the CSS background-size property.
* {
margin: 0;
padding: 0;
}
body {}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
font-family: arial;
color: white;
font-size: 44px;
line-height: 55px;
float: left;
padding: 15px 20px;
flex: 1 0 auto;
}
nav ul {
position: absolute;
right: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
/* we can add absolute position in subcategories */
padding-right: 1em;
}
nav ul li a {
display: block;
font-family: arial;
color: white;
font-size: 20px;
padding: 34px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 5px;
/* Spacing so that hover color does not take up entire chunk */
border-radius: 0px 0px 4px 4px;
transform: translateX(1rem);
}
nav ul li:hover ul {
/* This means when li is hovered, we want the unordered list inside list item to do something. */
display: block;
}
nav ul li ul li {
width: 130px;
/* increases width so that all text can be fit */
border-radius: 4px;
}
nav ul li ul li a:hover {
background-color: #ADD8E6;
a
}
.newest-review-cover {
position: relative;
height: 383px;
width: 100%;
}
.newest-review-cover_bg {
background-image: url('https://thenovelcolumn.com/wp-content/uploads/2019/06/the-5am-club-poster.jpg');
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.newest-review-cover .newest-review.title {
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 120%;
/* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial, sans-serif;
color: #fff;
width: 60%;
/* Set the width of the positioned div */
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel="stylesheet" type="text/css" />
<link href="Homepage.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<div class="newest-review-cover_bg">
<p class="newest-review-cover_title">
The 5AM Club
</p>
</div>
</section>
</body>
</html>
I hope you guys can help me with the next thing. I've made the top of a website. When you hover the navigation, a dropdown menu will show. unfortunately this dropdown is positioned under a hr. How can i fix it to get this positioned on top of an hr? The hr is required element, so I can't remove it. Here is the example of the problem
Html code:
#import url('https://fonts.googleapis.com/css?family=Lato:300i,400,400i,700,900');
html {
box-sizing: border-box;
}
body {
font: 15px 'Lato', sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
}
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
}
header {
width: 80%;
margin-left: 10%;
}
header img {
width: 15%;
height: auto;
}
img {
width: 100%;
height: auto;
margin: -1% 0 0.5% 0;
}
h1 {
display: none;
}
nav {
float: right;
padding: 2% 0 5% 0;
}
li {
display: inline-block;
position: relative;
padding: 10px 0px 0px 0px;
margin-left: 10px;
}
header a {
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
color: black;
font-weight: 400;
}
ul ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 1% 0;
}
li:hover ul {
display: block;
background-color: gainsboro;
}
ul ul a {
color: white;
}
.selected {
border-bottom: 2px solid #49997b;
padding-bottom: 0.5%;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vakantie op de Dominicaanse Republiek</title>
<link rel="stylesheet" href="CSS/vakantie.css" type="text/css">
<link rel="stylesheet" href="CSS/normalize.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>Vakantie op de Dominicaanse republiek</h1>
<nav>
<ul>
<li class="selected">Home</li>
<li>Bezienswaardigheden</li>
<li>Over de Dominicaanse
<ul>
<li>Reisdocumenten</li>
<li>Inentingen</li>
<li>Feestdagen</li>
<li>Geld en koers</li>
</ul>
</li>
<li>Recreatie</li>
<li>Contact</li>
</ul>
</nav>
</header>
<img src="Afbeeldingen/Dominicaanse_header.jpg" alt="dominicaanse">
<hr>
</div>
</body>
</html>
You can set the menu's z-index higher than the hr and it should appear on top instead of behind it. I can't see the image to tell if this works or not but it should.
hr {
border-color: #b9b9b9;
position: absolute;
width: 100%;
margin-top: -55.5%;
z-index: 1;
}
.container {
margin: auto;
max-width: 1024px;
width: 100%;
overflow: hidden;
z-index: 2;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
I'm just getting back into Web Development and so I'm working on stretching those muscles again. What I wanted to achieve was a Header on top of my vertical menu with the Initials in the background and the full name in the middle of those initials. I was able to do that with the code in codepen, however it quickly becomes broken when resizing the window. I know that is due in part to the position absolute. Is there another way to achieve this effect and have it be scalable, but stay within the lines of the nav?
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li>Home</li>
<li>Scottish Arts</li>
<li>Bagpipes</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
Giving absolute Position to a child that does not have relative parent , will set it's position relating to BODY .
add position:relative; to nav in css , and everything will be OK ;)
http://codepen.io/anon/pen/LEEwOd