I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>
<style type="text/css">
body
{
background-image: url(img/backgroundimg.png);
background-repeat: repeat-x;
/*background-color:white;*/
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
}
#header
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 47px;
background-image: url(img/headerimg.png);
}
#headerlogo
{
position: absolute;
top: 0;
width: 201px;
height: 118px;
background-image: url(img/headerlogo_padding.png);
}
#header-nav-menu
{
position: relative;
left: 580px;
top: 0px;
width: 400px;
list-style-type: none;
}
.nav-button-header-menu-1
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 125px;
}
.nav-button-header-menu-2
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 104px;
}
.nav-button-header-menu-3
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 105px;
}
.nav-button-header-menu-1:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-2:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-3:hover
{
color: #d4d3d2;
}
#main-nav-container
{
width: 197px;
height: 500px;
float: left;
margin-top: 95px;
}
#mainnav
{
position: relative;
top: 0px;
left: 0px;
list-style-type: none;
margin: 0;
padding-left: 8px;
}
.navbutton-red-top
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black-bottom
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red-top:hover
{
background: #e91101;
}
.navbutton-red:hover
{
background: #e91101;
}
.navbutton-black:hover
{
background: #2c2b2b;
}
.navbutton-black-bottom:hover
{
background: #2c2b2b;
}
#content
{
background-color: white;
width: 1024px;
float: left;
box-shadow: 0px 3px 20px #515050;
}
#rotating-item-wrapper
{
position: relative;
margin-left: 240px;
margin-top: 20px;
padding: 150px;
}
.rotating-item
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#placeholderdiv
{
padding-left: 40px;
padding-top: 10px;
}
#slideshow
{
padding-left: 40px;
padding-top: 10px;
}
#video1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
.stats-offense
{
padding-left: 10px;
padding-top: 10px;
float: left;
}
#events1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
#rotating-item-wrapper-2
{
position: relative;
left: 455px;
top: 281px;
}
.rotating-item-2
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#rotating-item-wrapper-3
{
position: relative;
left: 240px;
top: 532px;
padding: 300px;
}
.rotating-item-3
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
.stats-defense
{
position: relative;
left: 766px;
top: -68px;
overflow: auto;
padding-bottom: 206px;
}
#rotating-item-wrapper-4
{
position: relative;
left: 240px;
top: -260px;
padding: 35px;
}
.rotating-item-4
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#footer-home
{
position: absolute;
bottom: -600px;
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#footer-nav-menu-left
{
position: absolute;
left: 0px;
list-style-type: none;
margin-left: 430px;
}
#footer-nav-menu-right
{
position: absolute;
list-style-type: none;
margin-left: 550px;
}
.nav-button-footer
{
font-family: Calibri;
color: white;
text-decoration: none;
}
.nav-button-footer:hover
{
color: #c5c5c4;
}
#SocialMedia
{
font-family: Calibri;
color: white;
}
#Facebook-icon
{
}
#Twitter-icon
{
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="headerlogo"></div>
<ul id="header-nav-menu">
<li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
<li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
<li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register
League</a></li>
</ul>
<div id="content">
<div id="main-nav-container">
<ul id="mainnav">
<li><a class="navbutton-red-top" href="#stats">STATS</a></li>
<li><a class="navbutton-red" href="#stats">EVENTS</a></li>
<li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
<li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
<li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
<li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
<li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>
</li>
</ul>
</div>
<div id="rotating-item-wrapper">
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
</div>
<div id="video1">
<img src="img/ContentArea1/Video/video1img.png" />
</div>
<div class="stats-offense">
<img src="img/ContentArea1/Stats/stats1img.png" />
</div>
<div id="events1">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-2">
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
</div>
<div id="rotating-item-wrapper-3">
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
</div>
<div class="stats-defense">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-4">
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png"
/>
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png"
/>
</div>
</div>
<div id="footer-home">
<ul id="footer-nav-menu-left">
<li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a>
</li>
</ul>
<ul id="footer-nav-menu-right">
<li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
<li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
</ul>
<div id="SocialMedia">Follow Us</div>
<div id="Facebook-icon">
<img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
<div id="Twitter-icon">
<img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
<div id="Instagram-icon">
<img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
<div id="YouTube-icon">
<img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>
</div>
</div>
</body>
</html>
Click the link below to see how it currently looks:
http://www.micre8tivegroup.com/default.html
As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:
The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.
Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).
The changes that I made:
Removed the position absolute for the header and footer (or changed to position:relative)
Restructured the page to fit a "more convenient" web page design.
Changed the CSS of some of the elements.
I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.
I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.
Just change your CSS to :
#footer-home
{
position: absolute;
bottom: 0; /* Put it back to 0 */
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
/* Add the code below */
left: 0;
right: 0;
position: absolute;
}
That way, the footer will always stay at the bottom.
Related
I don't have that much experience in HTML/CSS. As it says in the title, I have a problem with the input (where it says "What do you think about ?"). I left click on input field so I can write something inside it but when I click the submit logo it is not clickable. And the other problem is with Create account. It is not recognized as a link. The other links work but this one doesn't. It is also not clickable. After I added more CSS code those problems appeared.
Can someone help me with this problem?
P.S : This is a project for a non-programmer friend.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
bottom: 95px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
There's a lot of problems with the code. Try avoiding fixed values like px for things. Keep your website responsive - you can use flex or something for maintaining a responsive layout.
It is easier to see the problem when you inspect it using Firefox's(or any other browsers) inspecting tool.
You can fix the problems you stated by implementing suggestions told by us here but they may break something else since we don't know the whole code.
Firstly, you can see that the header element is above the search bar and hence the search bar is unfocusable. You can either change the z-index of the header element to -1 or something or you can set the search bar's z-index to a bigger value.
The Create Account link has the same problem as well. In this case,the element with the viewCart class is overlapping the link. What you need to do is in it's style change the padding-left property to margin-left and it will stop overlapping.
Again, try to keep things simple by using a more dynamic way so that elements are positioned and sized automatically instead of you having to specify the sizes yourself.
First of all, the button always have a default cursor, if you want to change the cursor to the pointer on hovering you must add this: button:hover {cursor: pointer}
Second of all, you're using positions wrongly and don't understand them. Read about positions here.
I deleted all of the position relatives and top & bottom.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
margin-left: 265px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
height: 48px;
width: 48px;
font-size: 21px;
}
/* EDITED HERE */
#searchbarBtn:hover {
cursor: pointer
}
#loginBtn {
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
both are incorrectly positioned, they are pushing to the top and some element is overlapping over them.
I recreated your code by positioning them slightly lower using position: relative; top : 100px and then input box was accepting clicks and create link was working.
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
position: relative;
top: 100px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}```
Please check the changes in #loginBtn and #input
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
i am making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
I'm almost finished with this site, and am just now trying to make it cross-browser. It works wonderfully in everything but IE6. I've fixed two of the problems it had, but am lost on the last one. The left sidebar moves right when the window is re-sized to something around 800px. The more you re-size, the more it moves, eventually covering up the content. This also seems to affect the header by shrinking it. The header is a small problem, but mostly just an annoyance.
I've tried a few fixes, but that did nothing. The only thread I could find that relates to this mentions that jQuery may be affecting it, but I have no jQuery set on that div. I'd appreciate any help that is given, as my deadline is approaching.
My HTML is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="file:///C:/resources/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../_script/textShorten.js"></script>
<script type="text/javascript" src="file:///C:/Users/Matt/Desktop/Coding/Framed/framed_over.js"></script>
<link rel="stylesheet" href="file:///C:/Users/Matt/Desktop/Coding/Framed/framed.css" type="text/css" />
<link rel="stylesheet" href="../../_script/css.css" type="text/css" />
<style type="text/css">
_#wrapper { height: 600px; }
/* Photo Styles */
#wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
</style>
</head>
<body>
<div id="header"><img src="../../_images/logo.png" alt=" " id="logo" /></div>
<div id="wrapper">
<!-- START CONTENT -->
<div id="content" class="column">
<img src="-photo-images/thumb__zimmerman-thomas_01.jpg" class="framed" alt="Glasgow Necropolis 1">
<img src="-photo-images/thumb__zimmerman-thomas_02.jpg" class="framed" alt="Glasgow Necropolis 2">
<img src="-photo-images/thumb__zimmerman-thomas_03.jpg" class="framed" alt="Mother (II)">
</div>
<!-- END CONTENT -->
<div id="sidebar" class="column">
<div id="top"><!-- EMPTY DIV --></div>
Home<br />
<a href="archives.html/" id="none" >Archives</a><br />
About Us<br />
Submit Your Work<br />
<hr />
<h2>January 2011</h2>
<h3>Poets</h3>
<ul>
<li>Valentina Cano</li>
<li>Ricky Garni</li>
<li>Kyle Hemmings</li>
<li>Paulus Kapteyn</li>
<li>Tammy Ho Lai-Ming</li>
<li>Laura LeHew</li>
<li>Rhonda Maness</li>
<li>Anita McQueen</li>
<li>Rodney Nelson</li>
<li>Lise Phillips</li>
<li>Changming Yuan</li>
<li>Desmond Kon Zhicheng-Mingdé</li>
</ul>
<br />
<h3>Photographers</h3>
<ul>
<li>Leila Fortier</li>
<li>Tammy Ho Lai-Ming</li>
<li>Allicia Strickland</li>
<li>Jump Study Photography</li>
<li>Thomas Zimmerman</li>
</ul>
</div>
<div id="infobar" class="column">
<h1 id="author">Thomas Zimmerman</h1>
<br />
<!-- Poem List -->
<h4>Poems</h4>
<ul id="submitList">
<li>Glasgow Necropolis 1</li>
<li>Glasgow Necropolis 2</li>
<li>Mother (II)</li>
</ul><br />
<!-- Issue Features -->
<h4>Featured in Issues:</h4>
<ul>
<li>March 2011</li>
</ul>
<!-- Biography Start -->
<h1 id="mark">Biography</h1>
<p id="Bio">
Thomas Zimmerman teaches English, directs the Writing Center, and edits three literary magazines at Washtenaw Community College, in Ann Arbor, MI. Photographs of his have appeared recently in the small magazines Bete Noire and Muscle & Blood.
</p>
</div>
</div>
<script type="text/javascript">$("#infobar li").ellipsis();</script> <!-- For FireFox -->
</body>
My CSS:
/* Poetry Styles */
/* #wrapper { padding-right: 301px; }
#sidebar { right: 276px; }
#infobar { margin-right: -301px; }
#content { padding: 20px 50px; }
*/
/* Photo Styles */
/* #wrapper { padding-right: 241px; }
#sidebar { right: 216px; }
#infobar { margin-right: -241px; }
#content { padding: 10px 20px; }
*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none; zoom: 1;
}
/* Layout styles */
body { min-width: 900px; }
div#wrapper { min-height: 600px; padding-left: 176px; padding-right: 301px; overflow: hidden !important; }
div.column { float: left; position: relative; padding-bottom: 20020px !important; margin-bottom: -20000px !important; }
div#content { width: 100%; min-width: 400px; }
div#sidebar { right: 276px; margin-left: -100%; _left: 201px; }
div#infobar { margin-right: -301px; }
/* Layout Styles End */
body
{ background: rgb(20, 20, 20) url("../_images/bg_main.png");
font-family: palitno linotype; color: white; font-size: 12px;
}
h1 { font-size: 20px; font-weight: normal; } h2 { font-size: 18px; font-weight: normal; } h3 { font-size: 16px; font-weight: normal; } h4 { font-size: 14px; font-weight: normal; } h5 { font-size: 12px; font-weight: normal; } h6 { font-size: 10px; font-weight: normal; }
a { color: white; position: relative; }
a:link { color: white; }
a:visited { color: rgb(205, 205, 205); }
a:hover { color: white; left: 3px; }
div#content a:hover { left: 0; }
a:active { color: white; }
a[href="index.html"], a#none, a[href="about.html"], a[href="submit.html"]
{ font-size: 14px; }
div#header
{ height: 80px;
background: rgb(27, 27, 27) url("../_images/bg_head.png") repeat-x;
border-bottom: 1px solid rgb(136, 0, 0);
overflow: hidden;
padding: 10px 40px;
} img#logo { float: left; margin-right: 100px; display: inline; }
div#content { padding: 20px 50px; text-align: center; }
h1.poemTitle { margin-bottom: 10px; text-align: left; }
p.poem { font-size: 14px; text-align: left; margin: 20px 0; line-height: 1.5; }
div#content img { margin: 10px; border: 1px solid rgb(136, 0, 0); }
div#sidebar
{ width: 150px; /* 175 - Padding-left, -right */
background: rgb(27, 27, 27);
border-right: 1px solid rgb(136, 0, 0);
padding: 10px 5px 10px 20px;
font-style: italic;
background: transparent url("../_images/bg_sidebar.png") repeat-y;
z-index: 0;
}
div#sidebar div#top
{ width: 175px; height: 200px;
position: absolute; top: 0px; left: 0; z-index: -1;
background: transparent url("../_images/bg_sidebar-top.png") no-repeat;
}
div#sidebar hr { margin: 8px -5px 8px -20px; border-top: 1px solid transparent; _border-top: 1px solid rgb(100, 0, 0); _border-bottom: 1px solid rgb(136, 0, 0); }
div#sidebar h2 { font-size: 16px; position: relative; left: -8px; }
div#sidebar h3 { font-size: 14px; }
div#sidebar li { position: relative; left: 15px; text-indent: -7px; _text-indent: 0; } /* Sets Wrap Indent. left=8+!'text-indent'; MAX 15px/-7px; */
div#sidebar ul { font-style: normal; }
div#infobar
{ width: 160px;
padding: 10px 20px;
border-left: 1px solid rgb(136, 0, 0);
background: rgb(27, 27, 27) url("../_images/bg_info.png") repeat-y;
} h1#author { position: relative; left: -10px;}
div#infobar h4 { }
div#infobar ul { position: relative; left: 10px; }
div#infobar li { white-space: normal; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; _margin-bottom: 5px; }
h1#mark { position: relative; left: -10px; margin-top: 75px; margin-bottom: 10px; }
p#Bio { max-height: 450px; white-space: normal; }
Simple; dump support for IE 6. Youtube and many other popular sites no longer support it, even Microsoft have abandoned it -- http://ie6countdown.com/