I know this should be easy, but my css skills are rusty a bit and this starts to drive me crazy.
I want to move language text right from logo on site, but nothing works for me.
This is my HTML:
<html lang="en">
<head>
<title>SWANKY Mint Hostel</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
</head>
<body class="body">
<img src="logo_piktogrami/drustvene-mreze.png" alt="mreze" class="networks">
<div class="div-main">
<div>
<img src="logo_piktogrami/logo_swanky.png" alt="logo" class="logo">
</div>
<div class="language">UK / KR / HR</div>
<div class="dropdown">
<button class="dropbtn">HOSTEL</button>
<div class="dropdown-content">
O NAMA
POVJEST
MENZA
PARTNERI
</div>
<button class="dropbtn">REZERVACIJA</button>
<button class="dropbtn">GALERIJA</button>
<button class="dropbtn">INFO</button>
<button class="dropbtn">KAKO DO NAS</button>
</div>
</div>
</body>
</html>
And this is my CSS:
.dropbtn {
background-color: #000000;
color: white;
padding: 8px;
font-size: 10px;
width: 100px;
margin-right: 5px;
font-family: 'Istok Web', sans-serif;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
top: 10.3%;
margin-left: 5px;
}
.body {
background-color: #95e5c4;
}
.logo{
width: 130px;
height: 130px;
float: left;
margin-left: 5px;
}
.networks{
width: 32px;
height: 186px;
margin-top: 7%;
}
.div-main {
height: 735px;
width: 685px;
background-color: #e6e6e6;
top: 50%;
left: 50%;
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
top: 0%;
bottom: 0%;
position: absolute;
}
.language{
font-family: 'Istok Web', sans-serif;
font-weight: bold;
margin-right: 0px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #95e5c4;
font-family: 'Istok Web', sans-serif;
text-align: center !important;
font-size: 10px;
width: 100px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #e6e6e6}
.dropdown:hover .dropdown-content {
display: block;
}
What I have for now is this:
Need to align text to right so I have something like this instead:
Does someone see which property I am using wrongly or not using at all?
Add:
float: right;
margin: 5px;
to your .language class :)
For start, I'd add some padding, then to align this on the right side, I'd use either float:right or CSS GRID like this:
.box-container{
display:grid;
grid-template-columns:auto 25%; //Or whatever value you want
}
And simply put this text into the container. Let me know if it helps!
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
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'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 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.