I am trying to make my horizontal menu transform to vertical when page resized or screen size is below 500 pixes but after making changes i realised my menu behaving like this only in edge and ie not in safari or chrome. At safari menu is shown vertically whatever the size is, and at chrome menu is shown horizontally whatever the size is. How can i make it behave same like in ie and edge?
Below is my index html and css file:
/* CSS Document */
body {
font-family: 'Happy Monkey', cursive;
}
.container {
position: relative;
top: 5px;
}
.top {
position: relative;
}
.banner-home {
position: absolute;
top: 0px;
height: 237px;
width: 300px;
background-image: url("../images/faruk-yeni2.png");
background-position: center;
background-size: cover;
padding-bottom: 0px;
}
.baslik-altcizgi {
position: absolute;
top: 235px;
padding-top: 0px;
width: 100%;
height: 20px;
background-color: #111111;
}
.baslik-yazi {
position: absolute;
top: 255px;
text-align: left;
font-size: 2em;
height: 30px
}
main {
position: absolute;
top: 550px;
}
nav ul li a {
text-decoration: none;
color: #F2B544;
background-color: #2C0E40;
display: block;
text-align: center;
padding: 10px 0 10px 0;
margin-bottom: 5px
}
nav ul li a:hover {
background-color: #0D0D0D;
color: #FFFFFF
}
nav ul {
position: relative;
top: 300px;
list-style: none;
padding-left: 0;
}
.image-one {
text-align: center;
padding: 0 20px;
}
.image-two {
text-align: center;
padding: 0 20px;
}
.image-three {
text-align: center;
padding: 0 20px;
}
.art-one-home-img {
width: 100%;
height: 650px;
}
.art-two-home-img {
width: 100%;
height: 650px;
}
.art-three-home-img {
width: 100%;
height: 650px;
}
#media screen and (min-width:500px) {
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ömer Faruk Durusoy</title>
<link rel="stylesheet" href="css/homepage.css">
<link href="https://fonts.googleapis.com/css?family=Happy+Monkey&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="top">
<div class="banner-home"></div>
<div class="baslik-altcizgi"></div>
<div class="baslik-yazi">
My name
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<section class="feature-images">
<div class="image-one">
<img src="images/javascript.png" alt="Javascript">
<p>Lorem ipsum </p>
</div>
<div class="image-two">
<img src="images/html5.png" alt="html5">
<p>Lorem ipsum </p>
</div>
<div class="image-three">
<img src="images/java.png" alt="Java">
<p>Lorem ipsum </p>
</div>
</section>
<article class="art-one-home">
<div class="art-one-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum</p>
</article>
<article class="art-two-home">
<div class="art-two-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum </p>
</article>
<article class="art-three-home">
<div class="art-three-home-img"></div>
<h2>This is the article one</h2>
<p>Lorem ipsum</p>
</article>
</main>
<footer>
</footer>
</div>
</body>
</html>
Try this way.
First declare classes or css properties to elements then it will do changes as per the screen size.
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
#media screen and (min-width:500px) {
nav ul {
display: flex;
}
nav ul li {
flex: 1;
margin: 0px;
}
.feature-images {
display: flex;
}
}
I'm trying to make my menu / navigationbar to center horizontally. I can't quite figure out what I've done wrong / forgotten. Also after my last li is right padding. How do I remove it?
HTML
<div class="wrapper">
<div class="header"></div>
<div class="Header"></div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
text-align: center;
border: 1px red solid;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
padding-left: 20%;
padding-right: 18%;
min-width: 80%;
max-width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content: '/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/
Well, first of all, are you sure this is how your HTML code should be?
<div class="Header">
</div>
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
instead of :
<div class="Header">
<ul class="menu">
<li>Home </li>
<li>Over mij </li>
<li>Mijn diensten </li>
<li>Contact </li>
</ul>
</div>
I'd suggest you to check this first.
Secondly, your menu is centered (the menu-items are not. Maybe that's what you meant). Just taking a look at your CSS and adding background-color to it makes it all clear.
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
float: left;
display: block;
padding-right: 5%;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
div.wrapper {
background-color: orange;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Now, onto the solutions, I am not sure what exactly you are looking for, but I can suggest you two possible solutions.
Solution 1:
Modify the .menu li class as below :
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display: block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Solution 2:
Modify the .menu and .menu li class as below :
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center; /*Add this property*/
}
.menu li {
display: block;
text-align: center;
}
See this below :
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
text-align: center;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
To remove padding from the last li item, you need to target it:
.menu li:last-child {
padding-right: 0;
}
Looking at your code, I can't really figure out what is that you need. Html is all messed up. Why do you close header div before menu?
Change the li to display inline-block, target the last of the li's with :last-child:
.menu {
text-align:center;
border: 1px red solid;
padding: 55px 0;
position: relative;
display:inline-block;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
display:inline-block;
padding-right: 5%;
}
.menu li:last-child {
padding-right: none;
}
JSFiddle Demo
Here is the best I could do. I added flexbox style to the ul, and removed some padding to get it centered.
fiddle: https://jsfiddle.net/sdzLn5hd/7/
HTML
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
</div>
<div class="Header">
<!-- menu float left indent met icoon gecentreerd opzicht v wrap. no list style -->
</div>
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS
.wrapper {
width: 100%;
}
.menudiv {
width: 80%;
border: 1px red solid;
margin: auto;
}
.menu {
border: 1px red solid;
padding: 55px 0;
position: relative;
display:flex;
transform: translateX(-50%);
left: 50%;
color: black;
width: 80%;
}
.menu li {
margin:auto;
display: block;
}
.menu li:after {
content:'/';
padding-left: 20px;
}
https://jsfiddle.net/sdzLn5hd/9/ something like this perhaps is what you're looking for
<title>Webdesign Maarten</title>
<body>
<div class="wrapper">
<div class="header">
<!-- hier image te zetten JQuery prefereerbaar Sliding !-->
<ul class="menu">
<li>Home</li>
<li>Over mij</li>
<li>Mijn diensten</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
removing some unneeded tags in your html
put in your .menu
.menu { text-align:center; }
.menu li {
display: inline-block;
padding-right: 5%;
}
Your float:left will always send the elements to their furthest left possible.
and add this line in your css (remove the last '/' and padding)
.menu li:last-child:after {
content: '';
padding-left: 0px;
}
see here: https://jsfiddle.net/sdzLn5hd/5/
To center text and inline elements, a block parent should have text-align: center applied.
Since you have this tagged as HTML5, I would like to provide you with a more semantic approach to your HTML too. There were a lot of extra styling properties left over from you trying to get this to work, so I re-wrote your CSS thus far (including a few more changes that I try to explain in comments). You can see my code in the snippet below:
* { margin: 0px; padding: 0px; } /* Simple CSS reset */
header { display: block; text-align: center; }
h1,
nav > ul {
display: inline-block;
border: 1px red solid;
padding: 20px 0px;
width: 80%;
}
nav > ul { border-top: none; }
nav > ul > li { display: inline; }
nav > ul > li:after { content: "/" }
nav > ul > li:last-child:after { content: "" } /* Remove trailing separator */
nav > ul > li > a {
padding: 15px; /* Padding here is important for touch */
color: black;
text-decoration: none;
}
nav > ul > li > a:hover { text-decoration: underline; }
<header>
<h1>Title</h1>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
This is my image-button for my website. http://puu.sh/cK7Sf/6309c39cdb.jpg When I re-size my browser it goes over here http://puu.sh/cK7VU/f17dafcc41.jpg
Here is my code
HTML
<div class="Nav">
<div id="buttons">
<div id="home_button"></div>
CSS
#home_button {
background-image: url("home.png");
background-repeat:no-repeat;
background-size: 100%;
width: 150px;
height: 60px;
position: absolute;
top: 196px;
left: 502px;
z-index: 10;
}
I am new to web developing so please don't hate :)
I've created an example to show you what a basic nav bar styling looks like.
Demo on dabblet
HTML:
<body>
<!--Navigation-Bar-Container-->
<div class="nav-container">
<!--Navigation-Bar-Item-Wrapper-->
<div class="nav">
<!--Items-->
<div id="menu-item-1" class="menu-item">Item 1</div>
<div id="menu-item-2" class="menu-item">Item 2</div>
<div id="menu-item-3" class="menu-item">Item 3</div>
<div id="menu-item-4" class="menu-item">Item 4</div>
<div id="menu-item-5" class="menu-item">Item 5</div>
<hr />
</div>
</div>
<!--Content-->
</body>
CSS:
body {
background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png) repeat black;
}
hr {
color: #777777;
}
.nav-container {
top: 20px;
position: relative;
width: 100%;
height: 40px;
text-align: center;
}
.nav {
width: 100%;
height: 40px;
maring: 0 auto;
text-align: center;
}
.menu-item {
display: inline-block;
width: 50px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: #777777;
}
.menu-item:hover {
background-color: black;
cursor: pointer;
border-radius: 2px;
}
Here is what I would do, some adjustment needed, not sure why the button is absolutely positioned, or what the background image is for, but here goes:
HTML:
<ul class='menu'>
<li>Link 1</li>
<li>Link 2</li>
</ul>
CSS:
.menu {
list-style-type: none;
}
.menu li {
display: inline-block;
border: 0.2em solid black;
border-radius: 10%;
padding: .5em;
background: linear-gradient(lightblue, blue);
}
.menu li a {
text-decoration: none;
color: black;
}
I'm wondering how to properly center my Logo having it within the top navigation. When it condenses everything gets messed up. I want it to turn into one of those 'square' drop down menus.
I want the links to be 'even' on either side.
HTML:
<div id="navigationcontainer">
<nav>
<ul>
<div class="col span_1_of_9">
<li>home</li>
</div>
<div class="col span_1_of_9">
<li>about</li>
</div>
<div class="col span_1_of_9">
<li>services</li>
</div>
<div class="col span_3_of_10">
<li><a id="logo" href="/"><img src="images/CarpetRepair_Logo.png" alt="Logo"></a></li>
</div>
<div class="col span_1_of_9">
<li>photos</li>
</div>
<div class="col span_1_of_9">
<li>contact</li>
</div>
<div class="col span_1_of_9">
<li><a id="FB" href="/"><img src="images/FB_Logo.jpg" alt="Facebook"></a></li>
</div>
</div>
</ul>
</nav>
CSS:
#logo {
width: 254px;
height: 170px;
margin: 0 auto;
margin-top: -34px;
padding-top: 0px;
}
a#logo {
float:left;
min-width: 50%;
width:100%; }
#FB {
}
#navigationcontainer {
width: 100%;
height: 74px;
border-bottom: 1px solid #000;
background: #06060C left top;
}
nav {
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
margin-top: 34px;
color: #c39a6e;
}
nav ul {
font-family: 'ostrich_sansmedium';
font-size: 1.45em;
font-weight: 500;
letter-spacing: 4px;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {
margin-top: 8px;
display: block;
padding: 7px 15px 3px 15px;
text-align: center;
}
Thank You!
Try this
#logo {
margin-top: -34px;
padding-top: 0px;
margin: auto;
left: 0;
right: 0;
}
a#logo {
float: left;
min-width: 50%;
width: 100%;
position: fixed;
}
HTML:
<li><a id="logo" href="/"><img src="/images/srpr/logo11w.png" alt="Logo" width="170px"></a></li>
jsfiddle: http://jsfiddle.net/yka0kgvz/
Here's my html. The problem I am having is that the 'box1' divs do not even display and the 'nav' bar extends itself. I have no idea why...
<div id="nav">
<ul>
<li><a class="selected" href="link1">Home</a></li>
<li>Services</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div> <!--#nav-->
<div id="content">
<div class="wrapper">
<div class="box1">
TEXT
</div> <!--#box1-->
<div class="box1">
IMAGE
</div> <!--#box1-->
</div> <!--#wrapper-->
</div> <!--#content-->
And the CSS...
#nav {
background-color: #000;
}
#nav ul {
margin: 0 auto;
width: 80%;
}
#nav li {
display: inline;
}
#content {
margin: 0 auto;
width: 80%;
min-width: 720px;
}
.box1 {
width: 40%;
height: 100px;
float: left;
position: relative;
padding-left: 6.33%;
}
Suggestions?
.box1 {
width: 40%;
height: 100px;
position: relative;
padding-left: 6.33%;
border: 1px solid #000;
margin: 0 auto;
}
Preview >> http://jsfiddle.net/XJA4T/