I've tried this, but I still see a white background on the ul
*{
background-color: transparent;
background-image: none;
}
CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel ="stylesheet" type="text/css" href="style.css"
<meta charset="utf-8">
<h1 class="title">PARALLEX</h1>
<style>.main.img {
height: 100%;
width: 100%;
position:absolute;
z-index: 1;
}
.title{
color: white;
width: 100%;
font-size: 450%;
font-family: sans-serif;
margin-top: 12.5%;
position: absolute;
z-index: 2;
letter-spacing: 1.25em;
text-align: center;
text-indent: 1.25em;
}
li, a, button {
font-family: sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
text-decoration: none;
}
*{
background-color: transparent;
background-image: none;
}
nav {
order: 1;
}
.nav_links {
list-style: none;
margin: 0;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
body {
margin:0;
}
</style>
</head>
<body>
<nav>
<ul class="nav_links">
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
<div>
<img class="main img" src="mountains.jpg">
</div>
</body>
</html>
Can you clarify your issue? When I open your code my background is white but if I change the body elements background to red then the page turns red.
For example this is what I see when body is purple. I don't have the image file so that's why the white line is there.
Also why is your H1 element in the Head? It should be in the body
<body>
<h1 class="title">PARALLEX</h1>
<nav>
<ul class="nav_links">
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</nav>
<div>
<img class="main img" src="mountains.jpg">
</div>
</body>
Your image is not behind the ul because in the HTML the image comes after the ul so without further instruction the image renders after the list.
Add a left and top value to place your image in the top corner:
.main.img {
height: 100vh; // "viewport height" seems more appropriate than % in this case
width:100vw;
position: absolute;
left: 0px;
top: 0px;
z-index: -1; // negative puts it behind anything with the default value, so you don't need to define the z-index of every single element
}
ul does not have a background by default, so you can remove that block of css: *{...
Related
I can't seem to get the code in .wrapper{} to work. There is no change reflected on the browser. If the code in .wrapper{} works, the display on the browser should be repositioned closer to the centre.
Help needed: could someone point out the error in the code and suggest possible fixes?
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<div class= "wrapper">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
<h1>Front page</h1>
</div>
</body>
</html>
/*style.css*/
* {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
}
.wrapper {
margin: 0 auto;
width: 1000px;
}
nav {
width: 100%;
height: 100px;
background-color: #fff;
}
ul {
margin-left: 0;
}
ul li {
list-style: none;
display: inline-block; /* changes from vertical dropdown to horizontal */
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
color:indianred;
padding: 0 20px;
}
ul li a:hover {
font-family:monospace;
color: green;
}
This is because you have made the .wrapper width 1000px. Try to change it or make half the width then you will find it into center or some changes.
Note: You should put a clear visible background color like red or yellow to see your changes.
fix it by replacing with this:
.wrapper {
margin: 0 auto;
width: 50%;
}
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Should be a common and not a rare question, but still I tried everything and nothing worked. So maybe this time somebody can help and this question will be for everyone to check their mistakes.
So I am making Car Service website, I am a bit of a beginner in both HTML and CSS.
This is the normal full screen mode of my browser and it looks fine:
As soon as I resize my browser size this happens with navbar
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<img src="img/header.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<li>Registration
<li>Contact</li>
<li>Profile</li>
</ul>
</nav>
</div>
</header>
</body>
CSS CODE:
body{
margin: 0;
padding: 0;
background-color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background-color: #25DE8B;
}
header::after{
content: '';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
}
nav{
float: right;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 35px;
position: relative;
}
nav a{
color: #012b4f;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav a:hover{
color: #28AA1A;
}
nav a::before{
content: '';
display: block;
height: 8px;
width: 0%;
background-color: #012b4f;
position: absolute;
top: 0;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
I need to change code so my navbar stays on its place in any case. Thanks for any help.
you use px as your units. you should use % or something else that is relative to the size of the page.
you can see more information in this link:
https://www.w3schools.com/cssref/css_units.asp
I'm trying to make the navigation bar for my personal site. I'm using flexbox because it's the only (pure CSS) solution I've found so far where the dropdown plays nicely with the link background color.
I'm trying to position the dropdown so that it floats over the content when opened. I tried setting the main nav li elements to have position: relative, then setting position: absolute and z-index: 1 for .dropdown ul , which technically works, but it breaks the grey background color for the link. I also tried using blocks, but it still looks bad either way. Does anyone know a pure CSS solution for this?
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: flex;
flex-direction: column;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
jsfiddle: http://jsfiddle.net/eq6o3yp5/8/
When you position it as absolute, the relative element do not get 'stretched' or resized, and so, that is why the background of the relative element do not reflect on the absolute positioned element.
Position it as absolute and give it a width, perhaps a min-width... and set a desired background-color or set it background-color: inherit;
.dropdown:hover ul, .dropdown ul:hover {
...
background-color: grey;
min-width: 100%;
position: absolute;
}
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
background-color: black;
margin: 0 auto;
color: white;
}
.container {
display: flex;
flex: auto;
}
/*** NAV ***/
.navbar {
font-family: 'Zilla Slab', serif;
font-size: 16pt;
}
.navbar ul {
list-style: none;
padding: 0 0;
margin: 0 0;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar ul li {
padding: 5px;
position: relative;
}
.navbar li:hover {
background-color: grey;
transition: ease-in-out .25s;
}
.dropdown ul {
margin: 0;
display: none;
}
.dropdown ul li {
padding: 2px 0;
z-index: 1;
}
.dropdown:hover ul, .dropdown ul:hover {
display: block;
position: absolute;
background-color: grey;
left: 0;
min-width: 100%;
position: absolute;
}
/*** CONTENT ***/
.content {
display: block;
position: relative;
z-index: -1;
margin-left: 0;
background-color: orange;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="Ariel Mordoch">
<meta name="description" content="The personal website of Ariel Mordoch.">
<title>Ariel Mordoch</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar">
<nav>
<ul class="container">
<li>ariel mordoch</li>
<li>about</li>
<li>resume</li>
<li>contact</li>
<li class="dropdown">drop
<ul class="container">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="content">
<p>placeholder</p>
</div>
</main>
</body>
</html>
I have a simple site so far but have two issues. I have done everything with percentages because the site might go up on a high def tv and i want them to scale well. The scaling works with the images but id also like to scale the navbar background and text so that it doesnt end up looking small.
The second issue is When the site is squished the bottom image covers the nav bar and doesn't flow under the nav bar element. Id just like this feature because it would scale well for smartphones.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Here is the css:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
To stop the image from flowing into other elements, use clear:both on your #maincontent img
Edit : A good article can be found on it here which suggests other methods. http://quirksmode.org/css/clearing.html
Edit2: This only applys to floated elements, I have just noticed you havn't used floats atall. See my comment below