I'm trying to make a page, just for exercise, and I came up in a problem, so if you run the code the logo should be on top in center, than the menu centered under it.. but it falls in the background, help please
1. how to add a dropdown under every three menu list items where I can add some text, images and location
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
Its header, not #header
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
header {
height: 100px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
Related
my problem is that the heading "greeting" influences the position of my navigation bar.
I want it to stay at the top right corner of the screen but the heading moves it down a bit, which is inconvenient.
Could someone please give me some advice?
I thank you in advance
here the html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<h1 id = "greeting"> Hello </h1>
<body>
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
</body>
</html>
and the css code:
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
you can simply give your navigation bar an "absolute" position and set its top:0
#font-face {
font-family: Terminal;
src: url(Fonts/Terminal.ttf);
}
body {
background-color: #333333;
}
#greeting {
text-align:center;
font-family:Terminal;
}
.navBar {
list-style-type: none;
top: 0;
position: absolute;
margin: 0;
padding: 0;
width: 200px;
background-color: black;
height: 5000px;
z-index: 0;
}
.navLinks {
display: block;
color: lime;
padding: 8px 16px;
text-decoration: none;
font-family: Terminal;
}
.navLinks:hover {
background-color: lime;
color: black;
}
* {
padding: 0px;
margin: 0px;
}
You need to wrap the navbar and the content (contains H1) with a flex parent:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="flex-grid">
<ul class="navBar">
<li><a class="navLinks" href="about.html"> About me </a></li>
</ul>
<div class="main-content">
<h1 id="greeting">Hello</h1>
</div>
</div>
</body>
</html>
And then apply this CSS to them:
.flex-grid {
display: flex;
}
.main-content {
flex-grow: 1;
}
.main-content h1 {
text-align: center;
}
I want to have the icon for the login be clickable and over the "LOGIN" Text centered. Furthermore I want that on the navbar/sidebar all images/icons are always in a pair with the text that belongs to it, like "LOGIN" and the login icon over it or with the registration. If you find ways to fix it & find ways how to fix my code to make it more efficient, I will be very pleased. Any suggestions? I hope smb can help, thanks!
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<span>LOGIN</span>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Is this what you're looking for?
I changed the link label from <span> into <div> and added .icon class.
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}
.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
.icon {
width: 32px;
height: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
position: relative;
}
nav {
background: blue;
position: absolute;
padding: 30px 10px;
border-radius: 50px;
top: 50%;
transform: translateY(-50%);
left: 20px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li a {
display: flex;
align-items: center;
text-decoration: none;
margin: 0 0 20px 0;
}
nav ul li a img {
width: 30px;
height: 30px;
object-fit: contain;
}
nav ul li span {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 10px;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<nav>
<ul>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Here's the JsFiddle: https://jsfiddle.net/ztxmqyxg/
<!DOCTYPE html>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
Here is the CSS:
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
}
#product {
padding: 5px 20px;
height: 300px;
display: inline-block;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
Well, in the JSfiddle there's a gap between the nav bar and the 2 first divs, that doesn't happen when I run it on my computer so don't mind that.
The problem is the gap between the white and blue boxes and the gray one on the bottom, as you see there's a small gap, but I don't see why that could be.
Actually I tried setting margin to 0 (to see if that worked) but it didn't.
It is for display: inline-block in #product div that cause to unwanted 5px margin. remove it and change .productcontainer to display:flex
html,body {
padding:0;
margin:0;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
ul img {
margin-top: 7px;
margin-right:30px;
display: block;
float: left;
height: 40px;
}
li a {
font-family: 'Open Sans Condensed', sans-serif;
display: block;
color: #EDEDED;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #EEEEEE;
color:#000000;
text-decoration:none;
}
#ad {
padding: 5px 20px;
background-color: #000000;
height: 200px;
}
h1 {
font-family: 'Dosis', sans-serif;
color: #EDEDED;
}
#product-container {
margin: 0px;
padding: 0px;
display: flex;
}
#product {
padding: 5px 20px;
height: 300px;
}
.product1 {
background-color: #DAE7EB;
float: right;
width: 50%;
}
.product2 {
background-color: ;
width: 50%;
}
#product-container2 {
height: 300px;
background-color: #E9E9E9;
}
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles/main.css">
<meta charset="utf-8">
<title>Apple - iPhone</title>
</head>
<body>
<ul>
<img src="images/logo.png">
<li>iPhone</li>
<li>Mac</li>
<li>iPad</li>
<li>iPod</li>
</ul>
<div id="ad">
<h1>Think different</h1>
</div>
<div id="product-container">
<div id="product" class="product2">
</div>
<div id="product" class="product1">
</div>
</div>
<div id="product-container2">
</div>
</body>
</html>
See this fiddle
It was the line height causing the issue. Update your CSS for #product-container as follows
#product-container {
margin: 0px;
padding: 0px;
line-height: 0; //<--- Add this
}
I've finished coding my website for a 1024x768 resolution and now want to add #media queries to my code so that the sidebar disappears when the screen is at a width of 980px and then stays like that all the way down from there. I have tried adding the #media max-width 980 myself but it does not seem to be working at all. I've also tried in various places on the page but again, no luck. It's so frustrating! Code Below (Sorry if it's really long, I'm gonna leave it all in there to avoid any questions regarding code).
HTML:
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
<span style="color: #ed786a">Home</span>
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Find Us
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
display: block;
}
#nav li a:link{
color: #DADADA;
text-decoration: none;
}
#nav li a:visited{
color: #DADADA;
text-decoration: none;
}
#nav li a:hover{
color: #DADADA;
text-decoration: none;
}
#nav li a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
/*font-style: italic;*/
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
/*-------Media Styles-------*/
#media all and (max-width: 980px){
#sidebar{
float: none;
}
}
I am adding some pictures to a website I am building for a client, and for some reason some of the pictures underlap other pictures when i change the resolution, and some don't. I am adding all the pictures the same way so I am a little confused as to why some are positioned staticly.
HTML PICTURES
<!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<title>Jay Cousins</title>
<link rel="stylesheet" href="css/site.css" type="text/css">
</head>
<body>
<div id="header">
<img id="papa" src="newImages/papaPic.jpg">
<img id ="jaytext" src="newImages/jaycousins.png">
<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">
<img id ="commercialtext" src="newImages/commercialtext.png">
<img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">
<ul>
<li class="selected">
home
</li>
<li>
Opportunities
</li>
<li>
Project Management
</li>
<li>
About Jay
</li>
<li>
Community
</li>
<li>
Contact
</li>
</ul>
</div>
CSS
body {
background: url(../newImages/headerBackground.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
//font-size: 14px;
margin: 0;
padding: 0;
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
text-align: center;
display: block;
height:290px; //height for adjust picture
}
#papa {
display: block;
margin: 0 auto;
width: 430px;
margin-left:0px;
height:270px; //
}
#jaytext{
position: absolute;
top:5.5%;
left:31.7%;
}
#darkTextBackground{
width:550px;
height:73px;
position:absolute;
top:24.2%;
left:31.8%;
}
#commercialtext{
height:57px;
width:550px;
position:absolute;
top:23.5%;
left:29.0%;
}
#leftsidebackground{
width:300px;
height:523px;
position:absolute;
left:0%;
}
#text{
position:absolute;
top:0%;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
overflow: hidden;
padding: 0 0 0px 1px;
width: 970px;
position:relative;
left:5%;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
If you have fixed number of images here then wrap them in a div and set the div following properties div {-webkit-column-count: 5; /* Chrome, Safari, Opera /-moz-column-count: 5; / Firefox */column-count: 5;}