The situation is: I'm learning on my own how to make websites. I already know some stuff and now I decided to create one website.
But I have some struggle... I'm trying to make it responsive, ant it kinda works, but footer overlaps content in body when you resize the page...
The idea is to scroll down for the tags when they start to overlap..
I've googled for similar issue and checked threads, tried a lot of things, but still got nowhere :|
Help?...
body{
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
position: fixed;
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name"viewport" content="width=device-width, initial scale=1">
<meta charset="utf-8">
<link rel="shortcut icon" href="/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="/arturnmk/style.css">
</head>
<body>
<div class="main">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Menu</li>
</ul>
</nav>
<div class="homecontainer">
<div class="hometitle">
<span>
<h1>Firtname Lastname</h1>
</span>
<span>
<h2>Thing to say/state</h2>
</span>
</div>
</div>
</div>
</body>
<footer>
<div class="tags">
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTag</div>
<div class="item">Tag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">TagTagTagTag</div>
<div class="item">TagTag</div>
<div class="item">TagTag</div>
<div class="item">PTagTagTag</div>
<div class="item">TagTagTagTagTagTag</div>
<div class="item">TagTagTag</div>
<div class="item">Tag16 Tag16 Tag16Tag16</div>
<div class="item">Tag15Tag15</div>
<div class="item">Tag14Tag14Tag14</div>
<div class="item">Tag13</div>
<div class="item">Tag12</div>
<div class="item">Tag11</div>
<div class="item">Tag10</div>
<div class="item">Tag9</div>
<div class="item">Tag8</div>
<div class="item">Tag7</div>
<div class="item">Tag6</div>
<div class="item">Tag5</div>
<div class="item">Tag4</div>
<div class="item">Tag3</div>
<div class="item">Tag2</div>
<div class="item">Tag1</div>
</div>
</footer>
</html>
To achieve responsive web design, use CSS3 media queries
Issue for overlap is due to min-height of homecontainer class and fixed position for tags class
Please check the below option using CSS3 media queries
https://codepen.io/nagasai/pen/vJbqeE
CSS:
html{
height:100%;
}
body{
height:100%;
margin: 0px;
font-family: 'Open Sans', sans-serif;
background-image: url(https://umad.com/img/2015/1/dark-geometric-wallpaper-176-205-hd-wallpapers.jpg);
}
/*+++NAVBAR*/
#primary_nav_wrap{
width: 100%;
background:#333;
margin: 0;
float:left;
}
#primary_nav_wrap ul
{
background-color: #333;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul a
{
display:block;
color:#fff;
text-decoration:none;
font-weight:500;
line-height:50px;
padding:0 20px;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#4CAF50
}
#primary_nav_wrap ul li:hover
{
background:#282828
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#333;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/*---NAVBAR*/
.hometitle span{
width: 100%;
}
.hometitle h1{
font-size: 80px;
color:#fff;
text-align: center;
clear: both;
padding-top: 10%;
}
.hometitle h2{
font-size: 36px;
color:#fff;
text-align: center;
clear: both;
margin-top: -60px;
}
/*+++TAGS*/
.tags {
bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
-webkit-flex: 1 auto;
flex: 1 auto;
padding: 0.5rem;
text-align: center;
}
.item a {
display: block;
background-color: #4CAF50;
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 3px;
color: #fff;
}
/*---TAGS*/
.homecontainer {
width: 100%;
height: 20%;
min-height: 400px;
}
#footer{
position: relative;
bottom: 0;
width: 100%;
height: 20%;
}
#media only screen and (max-width: 550px) {
.homecontainer {
width: 100%;
height: 20%;
min-height: 100px;
}
footer{
position: absolute;
top: 400px;
width: 100%;
height: 20%;
}
}
1) You shouldn't have HTML code outside of the <body> tag for elements that are meant to be displayed on the page. Your footer should be contained inside the <body> tag. You can create a <div> to contain the elements which you now have in the body of the document.
2) To avoid the overlapping (considering that you want to keep your existing code structure and CSS) you can set a margin-bottom equal to the height of your footer to the container of your main content. This approach will work if your footer always has the same height.
3) If your footer needs to change in height, another simple solution (but with drawbacks) is to let the footer stick to the normal page flow, instead of absolutely positioning it to the bottom of the document, and to set a min-height to the container of your main content. The min-height should be set to ensure that your footer won't be positioned in the middle of the user's screen on pages that are short (that don't have a lot of content in them). The min-height on the main content's container will in this case create whitespace below the main content that will push the footer down.
I may be mistaken, but is the only issue you have the footer getting in the way?
If I want the footer to stay at the bottom of the screen, I usually do as follows:
#footer{
position: absolute;
top: 100%;
height: however high you want it to be;
transform: translateY(-100%) ;
}
That pushes the footer all the way off your screen on the bottom, but the transform: translate pulls it back up exactly the height of the footer.
Related
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Nightfall Gaming</title>
<link href="C:\Users\Cam\Desktop\NightfallGaming\CSS\Stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body bgcolor="#FFFFFF">
<div id="navbar">
<nav>
<ul>
<li>Home</li>
<li>Game News</li>
<li>Game Reviews
<ul>
<li>Xbox 360</li>
<li>Xbox One</li>
<li>PS3</li>
<li>PS4</li>
<li>PC</li>
<li>Wii</li>
</ul>
</li>
<li>Contact Us/About Us</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="C:\Users\Cam\Desktop\NightfallGaming\Images\Logo.png" alt="Home">
</div>
<div id="mainbody"></div>
</body>
</html>
CSS:
body {
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
#relatedContent {
max-width: 800px;
margin: 200px auto;
}
#relatedContent .item {
max-width: 44%;
padding: 3%;
float: left;
text-align: center;
}
#relatedContent .item a img {
max-width: 100%;
}
#navbar {
margin: 70px 350px;
background-color: #E64A19;
position: absolute;
border: 3px solid black;
text-align: center;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
right: 86px;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
border: 1px solid black;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
#logo {
position: absolute;
top: 30px;
left: 70px;
}
#mainbody {
background: #141414;
width: 1500px;
height: 800px;
position: absolute;
bottom: 0px;
left: 50px;
}
I'm basically trying to get the navbar and site logo to show up on top of the 'mainbody'/background div; as of right now both of the other divs are hidden behind the 'mainbody' one.
I've seen some others posts on it but most just suggest to use float: left and clear: both as a solution, which hasn't worked in my case. Others have said it might be a positioning problem.
You need to use z-index. z-index specifies the stack order of the elements. The higher the number, the closer to the front the element will be.
Here's a simplified JSFiddle to show it in action. I took out HTML and CSS not necessary to the example, and changed the colours of the divs in order to see it more clearly.
I added 'z-index' of 0 on #mainbody, and z-index of 10 on #logo and #navbar.
i've been trying for 2 hours to align the navigation bar nicely under the header image, but it just won't do it.The first 4 list items align in a row, but the last one goes under them, + the nav bar is not centered like i want it to be. I have searched for answers everywhere, and nothing works. Help will be greatly appreciated.
p.s. i am new to css and html so be gentle.
<html>
<head>
<style>
body {
background-image: url("http://i.imgur.com/SwKXk23.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
body {
margin: 0;
}
.header {
width: 100%;
height: auto;
background-color: none;
padding-top: 24px;
}
.headerContent {
width: 1024px;
height: auto;
margin: 0 auto;
}
.headerContent a img {
width: 659px;
height: 144px;
margin: 0px auto;
display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
.nav ul li{
height: 40 px;
background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}
</style>
</head>
<body>
<div class="background">
<div class="header">
<div class="headerContent">
<a href="#">
<img style="border:0;width:900px;height:250px;" alt=""
title="" src="http://i.imgur.com/5NhCbxu.png">
</a>
</div>
<div class="nav">
<ul id="nav">
<li>Pagina principala</li>
<li>Despre noi</li>
<li>Clientii nostri</li>
<li>Produse</li>
<li>Contacte</li>
</ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>
You haven't given the nav bar enough width. Change the .nav rule:
.nav {
width:750px; <------- adjust this
margin:0 auto;
list-style:none;
}
I changed your width to 800px instead of 750px and now the menu fits on one line and is centred.
Here's a fiddle: https://jsfiddle.net/macg14fs/
Your .nav is too narrow for the content so it has wrapped. Press F12 on your browser to discover the interactive debug tools. After that, invest some time in learning about bootstrap.
With a Fiddle it would be much easier to know whats the problem, but try this:
#nav {
width: 100%;
}
#nav > li {
display: inline-block;
margin: 5px 5px 5px 5px;
text-align: center;
}
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.
What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.
hTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
css
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }
Is this what you are looking for?
I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!
HTML
<nav id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</nav>
CSS
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
width: 100%;
}
#top_nav ul {
margin: 0 auto;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?
For example: margin:0 34px 0 34px;
It could be a quick solution.
Check this DEMO:
http://jsfiddle.net/4n9hq/1/
Here is the answer in simplest form
<nav>
<ul>
<li>Home<li>
<li>Digital</li>
</ul>
</nav>
CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
In conclusion: set the "ul" tag to display:block and then center text
I'm attempting to center my CSS menu but I'm having issues, basically I'd like it to be in the center of my content div. Currently it's displaying from the left. Does anyone know what I would have to add to achieve what I want? Below is my code.
My index.html
<head>
<meta content="en-ie" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="header">
<p><img alt="" height="67" src="header.png" width="431" /><br />
</p>
</div>
<div id="tabs">
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer" style="width: 93px; height: 12px">
</div>
</body>
</html>
My style.css
body{
background-color: #292929;
}
p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
}
h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
}
a:link {
COLOR: #00CCFF;
}
a:visited {
COLOR: #00CCFF;
}
a:hover {
COLOR: #00CCFF;
}
a:active {
COLOR: #00CCFF;
}
/* DIV's */
#contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
}
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#content {
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;
}
#tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #292929;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
you can set a fixed width for the #tabs ul (for example width:200px; ) and then you change the margin:0; to margin:0 auto; for #tabs ul
If I got it right, you need horizontal centering of block of unknown width. I see two approaches:
Simple one: you will omit all the fancy markup of your tabs and preserve just inline links in inline LIs and add display: block; to your #tabs ul rule. No floating, no blocks within menu, just plain inline text. This will work, but will no be much 'styllable'. pastebin.me/58fe73dd82496444fd7e129fc5830b4b
Complex one: add extra wrap around your ul, so you'll got #tabs #tabs-in ul li …
#tabs {
float:left;
width:100%;
position: relative;
}
#tabs-in {
position: relative;
float: left;
left: 50%;
}
#tabs ul {
margin:0;
padding:0;
list-style:none;
text-align: center;
display: block;
overflow: hidden;
float: left;
position: relative;
left: -50%;
}
#tabs li {
display:block;
float: left;
margin:0;
padding:0;
}
http://pastebin.me/23c1b8a60657962f1d8c8baef2700473 This old "move it half parents width right and then it move half its own width left" trick works quite well. But good luck styling it further and keeping it cross-browser compatible :]