Im a complete newbie with CSS and im struggling to know what's the correct way to do things. There are so many examples online, but they all seem a bit different. I have some specific questions about my markup. but generally as well is it the right way?
My CSS feels bloated to me is it?
My overflow command is causing a scrollbar, but i don't know why
My top-menu has a large padding on the left, something to do with li + li i guess, but how do i get rid of it
Is my layout of Divs the best way to achieve what im trying to do. Using margin-top 70 to force down the second menu doesn't seem the best approach to me, isn't there something that would be like float bottom or valign bottom?
Any guidance to get me starting of on the right foot would be much appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
logo
</div>
<div class="top-menu">
<ul>
<li>Lorum</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="main-menu">
<ul>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
<li>About Us</li>
<li>Countries
<li>Vacancies</li>
</ul>
</div>
</div>
</body>
</html>
.wrapper {
background-color: aqua;
width: 600px;
overflow: auto;
padding: 5px;
}
.logo {
background-color: black;
height: 100px;
width: 100px;
float: left;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.top-menu > ul {
line-style: none;
}
.top-menu > ul > li {
display: inline-block;
}
.top-menu li + li:before{
content: " | ";
padding: 0 10px;
}
.main-menu > ul {
line-style: none;
}
.main-menu > ul > li {
display: inline-block;
padding-right: 10px;
}
.wrapper {
background-color: aqua;
width:100%;
overflow: auto;
padding: 5px;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.main-menu {
font-family: arial;
font-szie: 14px;
background-color: crimson;
clear: right;
margin-top: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}
.wrapper class is duplicated with different width. Many other class is duplicated.
Pay attention to code cleanup :)
In anyway the margin of ul in main-menu flowed out from the div, creating the scrollbar.
If you want, you can find this problem using inspect element in browser like in chrome: https://developer.chrome.com/devtools/docs/dom-and-styles
.logo {
background-color: black;
height: 100px;
width: 100px;
float: left;
}
.wrapper {
background-color: aqua;
width:100%;
overflow: auto;
padding: 5px;
}
.top-menu {
background-color: blue;
float: right;
line-height: 5px;
}
.top-menu::after {
clear: both;
}
.main-menu {
font-family: arial;
font-size: 14px;
background-color: crimson;
clear: right;
margin-top: 70px;
height: 30px;
line-height: 30px;
text-align: center;
}
.top-menu > ul > li {
display: inline-block;
}
.top-menu li + li:before{
content: " | ";
padding: 0 10px;
}
.main-menu > ul {
margin: 0;
}
.main-menu > ul > li {
display: inline-block;
padding-right: 10px;
}
<div class="wrapper">
<div class="logo">
logo
</div>
<div class="top-menu">
<ul>
<li>Lorum</li>
<li>Blog</li>
<li>Contact us</li>
</ul>
</div>
<div class="main-menu">
<ul>
<li>About Us</li>
<li>Countries</li>
<li>Vacancies</li>
<li>About Us</li>
<li>Countries</li>
<li>Vacancies</li>
</ul>
</div>
</div>
http://jsfiddle.net/n3wurcpx/
Related
I am looking to have it so that when you hover over the nav bar the drop-down menu sits above/on-top of the main content, however at the moment when the menu drops down it is pushing the main image down and not sitting on top as I would expect the z-index property to do.
I have set the nav div to relative and also the main section div to relative but still with no joy!
Anyone out there able to help with this, please?
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img/main-image.png" alt="" />
</div>
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
position: relative;
z-index: 1;
}
ul {
list-style: none;
padding: 0;
float: right;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
position: relative;
}
#main-img {
width: 100%;
height: 100vh;
}
The #main-section is pushed down because the dropdown menu is positioned within the flow of the document.
When it is not hovered, it has display: none which takes it out of the DOM.
When hover, it switches to position: block which puts it back - and it occupies space, and pushes the main-content down.
You can test this by adding the desired end-result display: block by default, and see how the document would look in it's expanded state.
You need to apply position: absolute to your drop-down, in order for it to not interfere with the document flow. You could also move the z-index: 1 directly on it, if that is the content that should be on top - or you could leave it on the parent, and should work just as well. - the z-index is not the problem here.
#top-bar-container {
background-color: #ec671c;
width: 100%;
height: 75px;
}
#nav-bar {
width: 75%;
float: right;
padding-right: 50px;
}
ul {
list-style: none;
padding: 0;
float: right;
background-color: #ec671c;
}
ul li {
float: left;
width: 90px;
list-style: none;
margin-top: 10px;
text-align: center;
padding: 5px;
position:relative;
}
ul li:hover {
background-color: #ec671c;
border-radius: 5%;
}
ul li a {
text-decoration: none;
color: white;
}
ul li a:hover {
color: orange;
}
ul li ul {
line-height: 25px;
}
ul li ul li {
display: none;
font-size: 13px;
}
ul li ul li a {
color: white;
}
ul li:hover ul li {
display: block;
padding: 0px;
}
#hamburger-icon {
display: none;
color: white;
position: absolute;
right: 20px;
top: 20px;
}
#hamburger-icon:hover {
color: orange;
}
#main-section {
width: 100%;
height: 100vh;
}
#main-img {
width: 100%;
height: 100vh;
}
#top-bar-container >nav >ul > li > ul{
position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
</style>
</head>
<body>
<div id="top-bar-container">
<img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
<i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
<nav id="nav-bar">
<ul id="test">
<li>Home</li>
<li>About Us</li>
<li>
Services
<ul>
<li>Web Design</li>
<li>Branding</li>
<li>Consulting</li>
<li>SEO</li>
</ul>
</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div id="main-section">
<img id="main-img" src="img" alt="" />
</div>
</body>
</html>
hi
You can do in the section ul>li{position:relative} and Also, put in a second UL {position:absolute}
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
function ServicesMenu() {
document.getElementsByClassName("services-cont")[0].classList.toggle("showS");
}
#charset "UTF-8";
*{padding:0;margin:0;}
body{min-width:300px; margin: 0px; padding: 0px; background:#f8f8f8 }
.wrapper {
max-width: 980px;
height:2000px;
margin: 0px auto;
position: relative;
background-color: #fff;
}
header{
width:980px;
height:105px;
background: #e60000;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top:63px;
right:60px;
width: 560px;
display: block;
position: absolute;
}
ul.navbar li {
display:inline-block;
Margin-left:15px;
background: black;
}
ul.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
ul.navbar li a:hover {background-color: #660000;}
.services-cont{display: none;}
.services-cont.showS {
list-style-type: none;
display: block;
background-color: #707070 ;
}
.services-cont.showS li {
float: none;
display: inline;
height:0;
border:none;
}
.services-cont.showS li a {
display: block;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menustyle.css">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<script src="MenuFunc.js"></script>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<ul class="navbar">
<li>Home</li>
<li>Services
<ul class="services-cont">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
However, the parent <li> appears on top with the nested list below and the rest <li> of the parent list are below aligned with the end of the child list.
How do I get the parent list items Home, Services and Contact horizontally aligned in a straight line?
Explanation
The position: absolute and overflow: hidden properties were interfering and not allowing the dropdown list to display properly. I have commented them in the code so you can see.
You should refrain from using absolute positioning where you can achieve the same effect by simply nesting the tags properly. For instance, I nested your navbar inside the red header.
Code
Press the 'Run code snippet' button below to see the code output.
* {
padding: 0;
margin: 0;
}
body {
min-width: 300px;
margin: 0px;
padding: 0px;
background: #f8f8f8
}
.wrapper {
max-width: 980px;
height: 2000px;
margin: 0px auto;
/*position: relative;*/
background-color: #fff;
}
header {
padding: 20px;
width: 980px;
height: 30px;
background: #e60000;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
top: 63px;
right: 60px;
width: 560px;
display: block;
/*position: absolute;*/
}
.navbar li {
display: inline-block;
Margin-left: 15px;
background: black;
}
.navbar li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 5px 15px;
text-decoration: none;
font-size: 17px;
}
.navbar li a:hover {
background-color: #660000;
}
.navbar li ul {
position: absolute;
top: auto;
list-style-type: none;
display: none;
background-color: #707070;
}
.navbar li ul li {
float: none;
display: inline;
height: 0;
border: none;
}
.navbar li ul li a {
display: block;
text-align: left;
}
.navbar li:hover>ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Title>Menu</title>
</head>
<body>
<div class="wrapper">
<header>
<ul class="navbar">
<li>Home
</li>
<li>Services
<ul>
<li>Service 1
</li>
<li>Service 2
</li>
<li>Service 3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</header>
</div>
</body>
</html>
Explanation
You need to add the following two line of CSS code for the nested <li> tag.
ul li ul {
position: absolute;
top: auto;
}
Setting the position to absolute and top to auto will display your nested ul under the parent tag.
Code
Press the 'Run code snippet' button below to see the code output.
ul li {
background: black;
color: white;
display: inline-block;
width: 100px;
}
ul li ul {
margin: 0px;
padding: 0px;
background: grey;
/*YOU NEED THE TWO LINES BELOW*/
position: absolute;
top: auto;
}
ul li ul li {
color: white;
background: grey;
display: block;
width: 80px;
padding: 10px;
}
<html>
<body>
<ul>
<li>
Home
</li>
<li>
Services
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</body>
</html>
Ok, so this is what my site currently looks like. (I can't post an actual pic here apparently) http://imgur.com/Cqb2rf2
Is there a way to align that picture with the Home | About Me | Contact nav bar?
Also, as you can see, the borders to the right of Home and About Me are too close to the text. Can I center that between them somehow? I'm slowly building my first site as I teach myself, so i really appreciate your help!
Here's my code:
#firstpic {
margin: 0px;
padding: 0px;
}
#propic {
width: 15%;
}
#navigation {
border-bottom: 2px dotted #000000;
}
.bh {
border-right: 2px solid black;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline;
}
<html>
<head>
<title>NAV test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="navigation">
<div id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></div>
<ul class="navbar">
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
You can set the image div and the ul to display inline...
See this demo
#firstpic {
margin: 0px;
padding: 0px;
display: inline;
}
.navbar {
font-size: 50px;
text-align: center;
font-family: Courier;
display: inline;
}
Or this demo for inline-block
Set the divs to be inline-block and vertical-align:middle
#firstpic {
margin: 0px;
padding: 0px;
display: inline-block;
width: 15%;
vertical-align: middle;
background: red;
height: 50px;
}
#navigation {
border-bottom: 2px dotted #000000;
}
ul {
display: inline-block;
vertical-align: middle;
}
li {
border-right: 2px solid black;
padding-right: 1rem;
}
li:last-child {
border-right: none;
}
.navbar {
font-size: 20px; /* for demo purposes only */
text-align: center;
font-family: Courier;
}
.navbar li {
display: inline-block;
}
<div id="navigation">
<div id="firstpic">
<img src="D:\Testnavbar\Images\Profile Pic.png" id="propic" />
</div>
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
Add padding-right to push the list text away from the border.
To move the separator over, try adding "padding-right: 20px;" to .navbar li:
.navbar li {
display: inline;
padding-right: 20px;
}
https://jsfiddle.net/lemoncurry/2xat53n8/
Make the picture one of the list item elements so it displays in-line with the other navigation links.
Give .navbar a fixed height.
Set it to vertical-align middle.
Give it a line-height equal to the .navbar height.
#firstpic {
margin: 0px;
padding: 0px;
height: 150px;
}
#navigation {
border-bottom: 2px dotted #000000;
text-align: center;
height: 100px;
vertical-align: middle;
line-height: 100px;
}
.bh {
border-right: 2px solid black;
}
ul {
margin: 0;
padding: 0;
}
.navbar {
font-size: 50px;
font-family: Courier;
}
.navbar li {
display: inline;
}
<body>
<div id="navigation">
<ul class="navbar">
<li id="firstpic"><img src="D:\Testnavbar\Images\Profile Pic.png" id="propic"/></li>
<li class="bh">Home</li>
<li class="bh">About Me</li>
<li>Contact</li>
</ul>
</div></body>
I've this site:
[Removed - problem solved]
As you can see, if you look at the navigation bar, buttons don't fill it, thus making it to look ugly.
I want to know if there is a way to calculate the button's width in a manner that no matter how many buttons I'll have, they'll always fill the entire page's width, thus only allowing a small stripe below them to be seen.
This is the CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}
.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}
Just change the li width
li {
width: 20%;
float: left;
}
The solution of this problem is in your HTML, you have to put your in your navigation bar.
for the moment you have:
<header>
<h2>Liceul Teoretic Dunarea</h2>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</header>
<div class="navbg">
te
</div>
It should be like that:
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
Change your code like the following:
<!DOCTYPE html>
<!-- WEBSITE DE DUMITROV CRISTIAN -->
<head>
<title>Liceul Teoretic Dunarea</title>
<link rel="stylesheet" type="text/css" href="css/stil.css">
</head>
<body>
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
<footer>
<div class="footertxt">
<p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
</div>
</footer>
</body>
Also add the following CSS:
.navbg ul{width:100%;margin:0 auto;}
.navbg {
display: block !important;
height: auto !important;
overflow: visible !important;
padding-bottom: 0;
}
.navbg ul > li {
display: table-cell;
width: 1%;
float: none;
position: relative;
}
.navbg ul > li > a {
background-color: #E5E5E5;
color: #777777;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
display: block;
padding: 10px 15px;
position: relative;
}