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/
Related
My page has a fixed header, I am aware that this causes content flows to begin at the top of the page. I've been searching for a workaround for this and nothing seems to be working, for example this one
Below is the code and here is a codepen - As you can see the content in my article is being displayed at the top of the page, although it is place at the bottom of my html.
I'd appreciate an explained workaround so that I can LEARN.
UPDATE - adding padding-top:{500px} successfully fixed this issue. Is this a recommended workaround? I was made aware of this fix here.
Thanks guys!
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.col-1 {
width: 100%;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
.header {
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}
.site-content {
margin-top: 100px;
}
.banner-home {
background: url("");
height: 100vh;
width: 100%;
background-size: cover;
position: absolute;
z-index: -1000;
}
#intro {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
color: #020000;
z-index: 50;
}
#intro a {
border: 3px solid #020000;
cursor: pointer;
}
#intro li a {
padding: 20px;
color: #020000;
font-weight: 800;
}
#intro li a:hover {
background-color: #ffd800;
}
<div id="page" class="rare-site">
<div class="wrapper">
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li>HOME</li>
<!--
-->
<li>
<div class="flexbox-container">
INFO
</li>
<!--
-->
<li>
<div class="flexbox-container">
NEWSLETTER
</div>
<!--
-->
<li>
<div class="flexbox-container">
CONTACT
</li>
<!--
-->
</ul>
</header>
</div>
</div>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<!-- Content Area -->
<main id="main" class="site-main" role="main">
<div class="banner large-trunk">
<div class="banner-home"></div>
<div class="banner-overlay">
<div id="intro">
<h2 class="discover"><u>The easy way to discover models.</u></h2>
<div id="button-container">
<div id="button-overlay">
<ul class="inline-block-container">
<li><a class="discover-1">I'm looking to become a model</a></li>
<li><a class="discover-2">I'm looking for a model</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<article id="newsletter">
<div class="newsletter-entry">
<section class="news-content trunk">
<div class="feature-box">
<h2>Recent News</h2>
</div>
</section>
</div>
</article>
</main>
</div>
</div>
</div>
You already have a 100px header and a margin-top applied to site-content for the content following it, as is usually done.
A position: fixed header will be taken out of the flow. So the DOM element following it will overlap.
A z-index higher that the surrounding content is given so that it comes on top (which you have done giving wrapper a z-index: 99)
The content following it is given a margin-top value. If the height of the header is fixed (as is the case here) you give it using CSS, if the height of the header is dynamic, you might have to opt for javascript to set the height dynamically.
So restrict the heights of #global-navigation and .header using height: 100% and add display: flex to the navigation ul. Also remove the absolute positioning of the banner and apply background image to site-content- see demo below:
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.col-1 {
width: 100%;
}
.inline-block-container>* {
display: -moz-inline-stack;
display: inline-block;
}
ul,
ol {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrapper {
position: fixed;
height: 100px;
width: 100%;
top: 0;
z-index: 99;
}
#global-navigation { /* ADDED */
height: 100%;
}
.header {
height: 100%; /* ADDED */
width: 100%;
top: 0;
border-bottom: 1px solid #ddd;
background-color: white;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.header .logo a img {
width: 150px;
height: 49px;
}
.site-content { /* ADDED */
background: url("http://placehold.it/50x50");
height: 100vh;
width: 100%;
background-size: cover;
}
.logo {
margin-left: 40px;
}
.menu li {
padding-right: 50px;
margin-right: 20px;
}
.header .menu ul {
display: flex; /* ADDED */
margin: 0;
padding: 0;
}
.header .menu ul li {
display: inline-block;
list-style: none;
}
.header .menu ul li a {
text-decoration: none;
display: block;
padding: 30px 20px;
}
.site-content {
margin-top: 100px;
}
.banner-home {} /* removed absolute positioning */
#intro { /* removed absolute positioning */
width: 100%;
text-align: center;
color: #020000;
z-index: 50;
}
#intro a {
border: 3px solid #020000;
cursor: pointer;
}
#intro li a {
padding: 20px;
color: #020000;
font-weight: 800;
}
#intro li a:hover {
background-color: #ffd800;
}
<div id="page" class="rare-site">
<div class="wrapper">
<div id="global-navigation">
<!-- Global Header -->
<header class="header">
<div class="logo">
<a href="">
<!--<img src="images/rare-logo.png">-->
<h1>Rare Select</h1>
</a>
</div>
<nav class="menu">
<ul>
<li>HOME</li>
<!--
-->
<li>
<div class="flexbox-container">
INFO
</div>
</li>
<!--
-->
<li>
<div class="flexbox-container">
NEWSLETTER
</div>
<!--
-->
<li>
<div class="flexbox-container">
CONTACT
</div>
</li>
<!--
-->
</ul>
</nav>
</header>
</div>
</div>
<div id="content" class="site-content">
<div id="primary" class="content-area">
<!-- Content Area -->
<main id="main" class="site-main" role="main">
<div class="banner large-trunk">
<div class="banner-home"></div>
<div class="banner-overlay">
<div id="intro">
<h2 class="discover"><u>The easy way to discover models.</u></h2>
<div id="button-container">
<div id="button-overlay">
<ul class="inline-block-container">
<li><a class="discover-1">I'm looking to become a model</a></li>
<li><a class="discover-2">I'm looking for a model</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<article id="newsletter">
<div class="newsletter-entry">
<section class="news-content trunk">
<div class="feature-box">
<h2>Recent News</h2>
</div>
</section>
</div>
</article>
</main>
</div>
</div>
</div>
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/
I have a menu and a logo on the header, and I am struggling to make the logo to be at the far edge of the left side of the website and the menu to the edge of the right side.
The problem is, when both of them are displayed as inline-block which means they are going to float to the default orientation which is left, I can't figure out a way to change this, please help.
Here's the CSS code:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
Note: in the html, the logo is in a section and the menu is in anther section and both of them are inside a divide.
HTML code:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
Menu<p id="SmartMenu-logo">LOAI Design Studio</p>
</nav>
</section>
</div>
</div>
</header>
Here I've edited your CSS code, so you can try this
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
I've used float:left; for the logo, float:right; for the header-menu, removed display:inline-block; and did some other fixes ...
Hope this will help you ...
I would float logo section left, float menu section right and then clear the wrapper using clear:both. Remove the inline-block for this to work properly.