I am making a website for my family and I am stuck on how to make the menu stay at a specific place. I want it under the picture so it looks better. Also when I am resizing the browser the menu appears in a different place and the picture resizes also, I don't know how to fix that. Here is my code so far.
<!DOCTYPE html>
<head>
<title>King Buffet</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<img src="images/LOGO.png" />
</head>
<body>
<ul>Menu</ul>
<ul>Map</ul>
<ul>Contact</ul>
<ul>Order Now</ul>
</body>
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}
img {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}
ul {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;
}
Try this code
body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}
img {
width: 100%;
}
div.wrapper {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}
ul {
display: block;
position: absolute;
bottom: 0;
}
ul li {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;
list-style: none;
}
<div class="wrapper">
<img src="http://www.logoopenstock.com/media/users/379/777/raw/e6d45448a69242d3c681de28cdd9b470-logo-design-download-free-psd-file.jpg" clas="logo"/>
<ul class="menu">
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
<li>Order Now</li>
</ul>
</div>
Related
I want to Stretch this BLUE BAR, from one end of the screen to the other end. Now it is stretching 980px. Depending upon the screen size it should span itself from one end to the other end.
If I increase 980px, allignment will change. How to make the bar responsive ?
What CSS should I use ?
html {
height: 100%;
width: 100%;
}
body {
height: 980px;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 980px;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
color: white;
}
navigation {
width: 980px;
margin: 0;
padding: 0;
text-align: center;
}
navigation ul {
width: 980px;
list-style: none;
padding: 0;
margin: 0;
}
navigation ul li {
display: inline;
margin-right: 1em;
}
footer {
width: 940px;
height: 20px;
margin: 0 0 10px 0;
padding: 10px 20px;
background: #0B61A5;
color: white;
}
<html>
<body>
<header>
<h1>OEMS User Area</h1>
</header>
<navigation>
<ul>
<li>User: </li>
<li> Home </li>
<li> Logout </li>
</ul>
</navigation>
<footer> O.E.M.S </footer>
</body>
</html>
You should use width:100% to stretch the header to full width for any device size.
If you want other design for the different device sizes, use media queries. Learn more about responsive design at https://www.w3schools.com/css/css_rwd_mediaqueries.asp
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
color: white;
}
Try this, it will stretch the bars. And put the content of your page in the .wrapper section, it will be 980px and centered
html {
width: 100%;
}
body {
width: 100%;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0;
background: #0B61A5;
text-align: center;
color: white;
}
navigation {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
navigation ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
navigation ul li {
display: inline;
margin-right: 1em;
}
footer p {
padding: 10px 20px;
}
footer {
width: 100%;
height: 40px;
margin: 0 0 10px 0;
padding: 0px;
background: #0B61A5;
color: white;
}
.wrapper {
min-height: 900px;
width: 980px;
margin: auto;
display: block;
}
<html>
<body>
<header>
<h1>OEMS User Area</h1>
</header>
<navigation>
<ul>
<li>User: </li>
<li> Home </li>
<li> Logout </li>
</ul>
</navigation>
<section class='wrapper'>
THE CONTENT GOES HERE !
</section>
<footer><p> O.E.M.S </p></footer>
</body>
</html>
I have 3 main sections to the site I'm practising on: Nav, Header and Section.
My header bar contains an image with some text in the middle, I spent a long time trying to find how to allow the image to accept the text on top of it and then have it go straight in to the centre(both vertically and horizontally) of the img.
I found something that worked, but after finding that solution, my Section decided to also go on top of the image, which I'm certain it is because of the position: absolute; on the image.
The help I need; how do I get the section to go under the header, with keeping the piece of text on top of the image and in the centre of it?
* {
box-sizing: border-box
}
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: "Open Sans", arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
height: auto;
text-align: center;
display: table;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
}
#bannerImage {
height: 500px;
width: 100%;
position: absolute;
z-index: -1;
}
section {
background-color: white;
font-family: arial;
width: 100%;
border: 1px solid #e7e7e7;
text-align: center;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Codewarts</h1>
</header>
<section>
<h2>Welcome!</h2>
<div id="content">
<p>Do you have a name?.....Great!</p>
<p>Insert it in the box below!</p>
</div>
</section>
Do You want somenthing like this?
header {
position: relative;
}
header h1 {
top: 50%;
left: 50%;
transform: translate(-50%,-50% )}
here is the link to the site ( http://pavilioncreative.com/ ) hit refresh if you don't see a fullscreen gif as the background.
Im trying to get the red box to be alway centre no matter what size the screen is at. The problem is that the side menu has a position of fixed so the main content div is stretching fully 100% across the screen, under the side menu.
I think I might be going about it all wrong ?
<html lang="en">
<head>
<title>FirstPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css" >
<link rel="stylesheet" href="css/text.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wraper">
<ul>
<li class="menu" >
<div class="menu_tab_wrap">
<div class="menu_tab">
<div class="menu_off_wrap">
<div class="menu_off">
<div class="barOne"></div>
<div class="spacer"></div>
<div class="barTwo"></div>
<div class="spacer"></div>
<div class="barThree"></div>
</div>
</div>
</div>
</div>
<div class="menu_tab_wrap_on">
<div class="menu_tab_on">
<div class="menu_on_wrap">
<div class="menu_on">
<div class="cross"></div>
</div>
</div>
</div>
</div>
<div class="logo_wrap">
<div class="logo">
<img src="img/logo.svg">
</div>
</div>
</li>
<section id="menu_out">
<div class="menu_inner_wrap">
<div class="menu_list">
<ul class="menu_ul">
<li class="menu_li"> Home </li>
<span class="in_lable">Back to the home page</span>
<li class="menu_li"> About </li>
<span class="in_lable">Find out more about me</span>
<li class="menu_li"> Portfolio </li>
<span class="in_lable">Take a look at my past work</span>
<li class="menu_li"> Contact Me </li>
<span class="in_lable">Get in contact with me</span>
</ul>
</div>
</div>
</section>
<li class="content">
<div class="content_wrap">
<h1>test</h1>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
if (hoverIn)return; //if the hover is activated, it stops the function
//I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
$(".barOne").stop(true, true).animate({
"bottom": "+=5px"
}, "fast");
$(".barThree").stop(true, true).animate({
"top": "+=5px"
}, "fast");
hoverIn = true;
}, function() {
if (!hoverIn)return; //if the hover is deactivated, it stops this function
$(".barOne").stop(true, true).animate({
"bottom": "-=5px"
}, 300);
$(".barThree").stop(true, true).animate({
"top": "-=5px"
}, 300);
hoverIn = false;
});
});
$(document).ready(function () {
if($(window).width() > 700) {
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "30em"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}else{
$(".menu_tab").click(function(){
$("#menu_out").animate({"width": "100%"}, "slow");
$(".menu_tab_wrap_on").stop().fadeIn();
$(".menu_list").stop().delay( 400 ).fadeIn('slow');
});
}
});
$(document).ready(function () {
$(".menu_tab_wrap_on").click(function(){
$(".menu_tab_wrap_on").stop().hide('fast');
$("#menu_out").animate({"width": "0em"}, "slow");
$(".menu_list").stop().hide();
});
});
</script>
</body>
</html>
html{
-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}
.wraper{
width: 100%;
margin: auto;
padding: 0;
}
.wraper ul{
width: 100%;
margin: 0 auto;
padding: 0;
}
.wraper ul li{
padding: 0;
margin: 0 auto;
display: inline-block;
}
.wraper ul .menu{
width: 7%;
min-width: 7em;
max-width: 7em;
background: black;
height: 100%;
position: fixed;
z-index: 20;
float: left;
}
.wraper ul .content{
background-color: blue;
width: 93%;
height: 70em;
float: right;
}
.wraper ul .content .content_wrap{
width: 80%;
margin: auto;
text-align: center;
border: red solid 1px;
}
.menu .menu_tab_wrap{
position: relative;
}
.menu .menu_tab{
width: 100%;
background-color: #232323;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab .menu_off_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab .menu_off_wrap .menu_off{
margin-left: auto;
margin-right: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{
width: 3em;
padding: 2px;
background-color: white;
margin: auto;
position: relative;
}
.menu .menu_tab .menu_off_wrap .menu_off .spacer{
width: 5em;
height: 5px;
}
.menu .menu_tab_wrap_on{
position: relative;
display: none;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 100%;
background-color: white;
height: 6em;
display: table;
position: absolute;
width: 100%;
cursor: pointer;
}
.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.menu .menu_tab_on .menu_on_wrap .menu_on{
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
}
.menu .menu_tab_on .menu_on_wrap .menu_on .cross{
width: 3em;
height: 3em;
color: #232323;
margin: auto;
position: relative;
}
.cross:before, .cross:after {
position: absolute;
content: ' ';
height: 3em;
width: 4px;
background-color: #333;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-bottom: 2em;
}
.menu .logo_wrap .logo img{
width: 70%;
height: auto;
}
#menu_out{
background-color: #232323;
height: 100%;
width: 0em;
position: fixed;
z-index: -1;
overflow-y:scroll;
overflow-x:hidden;
border-right: 0.5em black solid;
z-index: 10;
}
#menu_out .menu_inner_wrap{
position: relative;
}
#menu_out .menu_list{
width: 70%;
height: auto;
margin: auto;
padding-top: 5em;
padding-bottom: 0em;
display: none;
position: relative;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 4em;
padding-bottom: 2em;
}
#menu_out .menu_list .menu_ul .menu_li{
display: block;
padding: 0;
margin: 0 auto;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 40px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
opacity: 0.8;
}
#menu_out .menu_list .menu_ul .menu_li a:hover{
opacity: 1;
}
#menu_out .menu_list .menu_ul .in_lable{
font-size: 15px;
color: #80E577;
font-weight: 100;
font-family: 'Open Sans', sans-serif;
position: relative;
bottom: 10px;;
}
#menu_out .menu_inner_wrap .footer{
width: 100%;
margin: auto;
position:absolute;
bottom:0;
height: 10em;
}
#media only screen and (max-width: 800px) {
.wraper ul .content{
background-color: blue;
width: 90%;
height: 70em;
float: right;
}
}
#media only screen and (max-width: 700px) {
.wraper ul .content{
background-color: blue;
width: 100%;
height: 70em;
float: none;
}
.wraper ul .menu{
width: 100%;
min-width: none;
max-width: none;
height: 5em;
}
.menu .menu_tab{
height: 100%;
display: table;
position: absolute;
width: 6em;
cursor: pointer;
right: 0;
}
.menu .logo_wrap{
width: 100%;
text-align: center;
}
.menu .logo_wrap .logo{
width: 7em;
margin: auto;
position:absolute;
bottom:0;
padding-top: 1em;
padding-bottom: 1em;
}
.menu .menu_tab_wrap_on .menu_tab_on{
width: 6em;
height: 100%;
right: 0;
}
#menu_out .menu_list{
width: 100%;
height: auto;
margin: auto;
padding-top: 8em;
text-align: center;
}
#menu_out .menu_list .menu_ul{
padding: 0;
margin: 0 auto;
width: 100%;
padding-left: 0em;
text-align: center;
}
#menu_out .menu_list .menu_ul .menu_li a{
font-size: 35px;
color: white;
text-decoration: none;
font-family: 'Lora', serif;
font-weight: 700;
}
#menu_out .menu_list .menu_ul .menu_li a .in_lable{
font-size: 10px;
color: #80E577;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
#menu_out{
width: 0;
border-right: none;
}
}
Looking at your CSS, I see this:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
margin-right: 7%;
margin-left: 13%;
}
If you remove margin left and margin right, does it accomplish what you're after?
Example:
#content_wrap .content {
max-width: 1050px;
width: 80%;
margin: auto;
height: 700em;
border: red solid 1px;
}
(When you remove margin-left and margin-right, margin: auto will then apply auto to margin top, right, bottom, and left.)
UPDATE 2/25/2016:
After following the steps above, you're most of the way there. However, if you want the content to change it's position (or re-center itself) as the menu expands out from the left side, it'll require a little more CSS and some JavaScript to add and remove a class. Note: The above CSS changes are necessary for this to work.
#content_wrap{
//This should be the exact same with as the menu when it's not expanded out
padding-left: 7em;
//Set this to the same amount of time it takes for the menu to expand
//This will animate the effect using CSS
transition: 0.5s;
}
#content_wrap.menu_showing {
//This should be the exact same with as the menu when it's expanded out
padding-left: 30em
}
Now just toggle that class on and off with JavaScript as you click the "Expand Menu" icon. Here's an example using jQuery:
$(".menu_tab").click(function(){
$("#content_wrap").toggleClass("menu_showing");
});
I have a navigation bar which I want to come down if I scroll.
That's why I gave here position: fixed;
Now if I change the size of my browser window, I can't see the links on the right side (I can't scroll the navigation bar to the right side). I think its because position: fixed;, but I don't know how to fix it.
Here my Code:
*{
margin: 0px;
padding: 0px;
font-family: 'Oswald', sans-serif;
}
body{
height: 2000px;
background-color: rgb(35, 35, 38);
}
nav{
width: 100%;
background-color: rgb(14, 14, 14);
overflow: hidden;
border-bottom: 2px solid black;
margin-bottom: 5px;
position: fixed;
top: 0;
}
.nav-top-ul{
font-size: 0px;
width: 1000px;
margin: 0px auto;
}
section{
margin: 0px auto;
width: 1000px;
margin-top: 50px;
word-wrap: break-word;
}
.nav-top-li{
display: inline-block;
}
.nav-top-a{
display: block;
font-size: 16px;
padding: 10px 20px;
color: rgb(137, 137, 137);
transition: all 0.5s;
text-decoration: none;
}
.nav-top-a:hover{
color: white;
}
.right{
float: right;
}
.left{
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Seite</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul class="nav-top-ul">
<div class="left">
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">NameDerSeite</a></li>
</div>
<div class="right">
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">Login</a></li>
<li class="nav-top-li"><a class="nav-top-a" href="index.php?content=home">Register</a></li>
</div>
</ul>
</nav>
<section>
<p>Example... Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...Example...</p>
</section>
</body>
</html>
It's nothing to do with position: fixed. You just set the width of the navigation bar to 1000px. Set it to 100% and you'll be fine.
.nav-top-ul{
font-size: 0px;
width: 1000px; // Change this to 100%
margin: 0px auto;
}
Add:
position: fixed;
right: 5px;
to the .right css.
.right {
float: right;
position: fixed;
right: 5px;
}
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}