I've found some places where people asked questions like this, but none of the answers in those places have helped me. Hoping I'll have more luck asking my own question.
I'm trying to design a base/prototype website for the company I work for. On our Services page, I wanted s sidebar navigation menu for our different services on the left, while the content is on the right. It was working great until I began adding content to the page and the paragraph wrapped to a second line. Once that happened, the content div dropped below the sidebar navigation. I've tried displaying them as inline-blocks like someone in another question suggested, but that didn't work. I'm trying to practice with responsive content also, so I don't want to give a bunch of absolute widths or anything to make them stay beside each other. Can anybody help me figure this out?
See working example: https://jsfiddle.net/joshuahuff/qcckdqju/1/
* The content background was set to yellow just so it's visible while figuring out this issue. The background will be removed once the problem is solved.
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tab Title</title>
<meta name="description" content="Description of Site">
<meta name="author" content="Name of Author">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1>Atlas Land Office</h1>
<nav class="MainNavbar">
<div class="MainNavbarDropdown">
<ul>
<li>Home</li>
<li class="selected">Services</li>
<li>Highlight Projects</li>
<li>News</li>
<li id="contact-us" class="contact-us contact-us-selected">Contact Us</li>
</ul>
</div>
</nav>
</header>
<div class="PageContent">
<div class="PageContentNav">
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</div>
<div class="Content">
<h2>Overview</h2>
<p class="PageContentP"><i>Atlas Land Office</i> is a full-service land surveying company which strives to provide nothing but top-notch service to our clients, both in-field <em>and</em> in-office. We do everything from ALTA/ACSM Land Title Surveys to Mortgage Inspection
Reports.</p>
<br />
<p><b>Our services include:</b>
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</p>
</div>
</div>
</body>
</html>
My CSS:
/* General */
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oswald:700|PT+Sans');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
}
/* Smartphones */
#media screen and (max-width:320px) {
/* put your css here */
}
/* Tablets */
#media screen and (min-width:321px) {
/* put your css here */
}
/* Desktops */
#media screen and (min-width:800px) {
/* Main Navigation */
/* Styling the header */
header {
height: 60px;
width: 100%;
padding: 0;
margin: 0;
background: /*#ecf0f1*/
#222;
color: #E54D0B;
}
/* Styling the header h1 */
header h1 {
padding-left: 10%;
line-height: 60px;
font-size: 3em;
}
header h1 a {
text-decoration: none;
color: #E54D0B;
}
/* Applying same CSS to header h1 */
header h1 {
margin: 0;
font-family: Oswald, "Arial Black", Gadget, sans-serif;
}
/* Styling the nav container */
.MainNavbar {
height: 30px;
margin: 0;
line-height: 30px;
font-size: 1.4em;
box-shadow: 5px 0 3px #333;
}
.MainNavbar .MainNavbarDropdown {
background: #E54D0B;
}
.MainNavbar ul {
padding-left: 10%;
margin: 0;
list-style: none;
font-family: "PT Sans", sans-serif;
}
.MainNavbar ul li {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
}
.MainNavbar ul li a {
padding: 0 30px;
display: block;
text-decoration: none;
color: #000;
}
.PageContentNav ul li a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #000;
}
.MainNavbar ul li:hover a {
height: 30px;
background: #F56527;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
transition: all 0.1s linear;
}
.selected {
height: 30px;
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
}
.contact-us {
background: #222;
}
#contact-us a {
color: #FF7133;
}
.MainNavbar ul li.contact-us:hover a {
height: 30px;
background: #222;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #FF7133;
transition: all 0.1s linear;
}
/* Website Content */
.PageContent {
padding: 3% 15% 20px;
margin: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: 1.4em;
}
.PageContentNav {
padding-top: 2%;
margin: 0;
float: left;
font-family: "PT Sans", sans-serif;
}
.PageContentNav ul {
padding: 0;
margin: 0;
list-style: none;
background: #E54D0B;
}
.PageContentNav ul li {
height: 50px;
padding: 0;
margin: 0;
line-height: 50px;
}
.PageContentNav ul li:hover a {
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s linear;
}
.Content {
margin-left: 4%;
float: left;
background: yellow;
}
.Content h2 {
font-family: "Arial Black", Gadget, sans-serif;
}
.Content p {
font-family: "PT Sans", sans-serif;
}
}
You must have the elements adjacent, in a parent, or child of, the other element for CSS to properly find it and execute it the way you want (Such in the case, a drop-down menu). Otherwise you will need jQuery or javascript to "find" the other element that needs to appear/disappear and have that language change the CSS of the element. CSS cannot "detect" another "remote" element this way.
Most of the time you need to have something like...
<ul> //Links
<li>First Main Link
<ul> //This is the menu that appears and disappears
<li>Link to appear #1</li>
<li>Link to appear #2</li>
</ul>
</li>
<li>Second Main Link</li>
</ul>
Then have something similar to for CSS...
//CSS
ul{
width: 900px;
height: 20px;
background: rgba(0,0,0,0.2);
}
ul li{
padding: 10px;
}
ul li > ul{
display: none;
}
ul li:hover > ul{
display: block;
position: absolute; //makes the element appear wherever you want it, starting from where it is located in the parent element
z-index: 10; //this makes the menu hover over other things, similar to layers; higher the number, higher it is
}
This isn't perfect, but might help get the point across. When you hover over ul li, then ul li > ul changes from display: none; to display: block; and "appears" upon hover if the element ul is inside the element li.
Most of the time I personally use div's for the sub-menu that will drop down when you hover over the link, not ul elements, but the choice is yours. Execution is relatively the same. You'll need to add margins or something similar to ul li > ul to "move" the element where you need it to be on the page according to the menu and such.
Good luck!
Related
I'm trying to get my header with ul in the center. Another page suggested having overflow:hidden but when I shrink the window, a second scroll bar still appears.
Every time I try something, the li isn't in line with my logo.
Also tried to have the class 'container' margin: auto but nothing happens.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 10px 0;
float: left;
}
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
/* half the logo width */
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
/* half the logo width */
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<div class="container">
<nav>
<ul>
<span>
<li class="current"> Home</li>
<li> Photography</li>
</span>
<div class="center-logo">
<li><img src="https://placehold.it/100x50"></li>
</div>
<span>
<li> Biography</li>
<li> Contact Us</li>
</span>
</ul>
</nav>
</div>
</header>
The Issue
float rules declared on the list-items (li)
Consider removing the float rules declared on list-items, this will negate any attempt at horizontally center aligning your menu items using typical methods other than flex-box.
The Fix
text-align: center (on containing element)
display: inline-block (on nested elements to center)
Since there is text-align: center rule already declared on a containing parent element (header in this case), and the list-items have already been declared as inline-block items, the list-item elements will center after removing the float rules declared on them.
Further Concerns:
The only direct descendant elements of an unordered (ul) or ordered (ol) list should be list-items (li) - any element other than this would be considered invalid markup.
Code Snippet Demonstration: (view "Full Page")
Summary:
Markup cleaned/simplified
Invalid list elements removed (direct descendants)
Styles improved (omitting redundant rules, vertically centering
navigation)
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global styling */
.container {
width: 100%;
overflow: visible;
}
ul {
margin: 0;
padding: 0;
}
/*Header*/
header {
background: #100806;
color: #f2f2f2;
min-height: 75px;
border-bottom: #ffffff 3px solid;
text-align: center;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
display: inline-block;
padding: 0 30px 0 0; /* remove the bottom padding */
/* float removed */
vertical-align: middle; /* additional */
}
/* Additional */
li.logo {
padding-left: 50px;
padding-right: 50px;
}
header nav > ul { /* using the "child combinator" here (>) so that this rule doesn't apply to any dropdown or sub-menus */
padding: 10px 0 10px 0;
}
/*
header .center-logo img {
width: 100px;
padding-left: 30px;
padding-right: 30px;
}
header nav span {
float: left;
}
header nav span:first-child {
padding-right: 50px;
padding-top: 20px;
}
header nav span:last-child {
padding-left: 50px;
padding-top: 20px;
}
*/
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #666666;
font-weight: bold;
}
<header>
<nav>
<ul>
<li class="current"> Home</li>
<li> Photography</li>
<li class="logo"><img src="https://placehold.it/100x50"></li>
<li> Biography</li>
<li> Contact Us</li>
</ul>
</nav>
</header>
<!--
Change Log:
1) Invalid nested elements removed from list (span & div)
2) Superfluous ".container" containing element removed (as providing no tangible benefits)
-->
Practical Demonstrations for Further Reference:
Horizontal Alignment (Text Elements)
Horizontal Alignment (Arbitrary Elements)
You could use Flexbox.
header ul {
display:flex
}
header li {
flex: 1
}
Powerful tool flex.
See fiddle: https://jsfiddle.net/fo7v1253/1/
This question already has answers here:
CSS Margin: 0 is not setting to 0
(12 answers)
Closed 6 years ago.
I want to remove the white spaces around (as you can see in the image there's a thick white spaces on every corner), how can I do that? It seems that it is created by default and needs something to do to remove that. I've tried to add margin: -10px but it looks like not the right way to do as it messes up the view on the below content.
Here's my code:
header, footer {
padding: 1em;
color: white;
font-family: "Calibri";
background-color: #000000;
clear: left;
text-align: center;
}
/* Navbar start */
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family: "Calibri";
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #009933;
}
/* Navbar end */
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav li {
float: none;
}
nav ul {
list-style-type: disc;
padding: 0;
margin: 10px;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<ul class="navbar">
<li>Home</li>
<li>Peripherals</li>
<li>Gallery</li>
<li>About</li>
</ul>
<nav>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</nav>
<article>
<h1>Item1</h1>
<p>Description for item1 here.</p>
</article>
<footer>Copyright (c) KPA</footer>
</body>
</html>
the problem is margin of your body element. set like this
body {margin: 0;}
css reset
This css reset by eric meyer is simply amazing. It will remove those spaces.
The other way around is to set
margin: 0;
padding: 0;
You have to add a line style css at top of page.
html,body{ margin:0}
You can use the CSSReset library or:
body {
margin: 0;
padding: 0;
}
Try
.article{
padding: 0em;
}
Similar with .nav{padding: 0em;}
i want to make my navigation bar look like this http://www.templatemonster.com/demo/51347.html
what i achieved is this
please while correcting the code , do state the reason behind it. it will of great help. thanks
also the social networking icons shown are in black and the hover effect gives it a red color. is it an image or that can be achieved solely with help of css ?
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
display: inline;
padding-left: 20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left;
}
.navbar ul {
list-style: none;
margin: 0;
float: left;
padding: 30px 15px;
}
.navbar ul li {
display: inline;
padding: 15px;
border-right: 2px solid black;
color: white;
font-weight: bold;
font-family: sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"</li>
<li><img src="twitter.png"</li>
<li><img src="feed.png"</li>
<li><img src="google.png"</li>
</ul>
</div>
<nav class="navbar">
<ul>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
</body>
</html>
Floats and percentages of the container width is a good way to go, especially, if you can't afford to have a fixed width container. Don't forget to adjust font-size, to make sure text doesn't bloat it's container's size and remains on a single line.
Also, for this to work you only need floats on "li" elements themselves. And never forget to clear the floats (clearfix class provided).
P.S. It would be much harder to achieve without use of "box-sizing: border-box;", here's a good article about box-sizing css property
The code:
<header class="headwrap">
<nav class="navbar">
<ul class="clearfix">
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
* {
/* Very important part, set on all elements for simplicity. */
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 15px;
}
.navbar ul li {
/* float it to have no issues with whitespace between inline-blocks */
float: left;
padding: 15px;
/* borders from both sides */
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
/* total width 100% / 5 elements */
width: 20%;
}
/* No left border for the first one */
.navbar ul li:first-child {
border-left: none;
}
/* No right border for the last one */
.navbar ul li:last-child {
border-right: none;
}
/* Helps with floats inside */
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
About clearfix
And here's the fiddle
Assign a fixed width to .navbar ul li, like
.navbar ul li {
width: 120px;
}
(try with different values)
Hi this is my first reply. I created this JS Fiddle to show you how to do it. Just click on the link for a working example with all source and drag the demo portion of the screen wider to fit it all on - this template will be easy to make mobile friendly but as a guide you should always start designing for 320px not 1024+
Hope this helps - please accept my answer if you like my response... its my first post too :-)
Note the follow css is to ensure ALL elements have padding and border included in their specified width and height so using padding/borders does NOT increase their total size. Google 'css box sizing' for more info on this
body {
background-color: #ccc;
margin: 0;
padding: 30px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
*, *:before, *:after{
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;}
Hover effect can be done with CSS only. try this
.socialbuttons ul li:hover {
background: #cb3529;
}
and transitions effects
.socialbuttons li img {
transition: all 0.3s ease 0s;
}
Upon resizing the browser window the last <li> element in the navigation bar of this site always jumps down to a new line as the browser gets to its smallest size, rather than all the elements remaining in line. I've tried minimizing margins and padding but it hasn't resolved the issue.
I'm in the CSS portion of a web development class, and we're being asked to use max-width and mid-width properties along with percentages to size the main sections of our practice sites (to get us used to working with percentages and such), and I feel like that must be part of the issue.
Any thoughts much appreciated. I've also tried adjusting white-space property, wrapping the <nav> in another div, etc. Not sure what's gone wrong.
<!DOCTYPE html>
<html>
<head>
<!-- font-family: 'Open Sans', sans-serif; -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
* {
font-family: 'Open Sans', sans-serif;
}
* {
list-style-type: none;
}
/* Section Sizes */
body {
background-color: #ffffff;
margin: 0;
padding: 0;
width: 100%;
min-width: 480px;
}
header {
width: 100% min-width: 480px;
height: 4rem;
}
.width,
#container {
min-width: 480px;
max-width: 1080px;
margin: 0 auto;
width: 100%;
}
.width:after,
#container:after,
header:after,
ul:after,
li:after,
#articles:after {
display: table;
content: "";
clear: both;
}
/* Header Styles */
header {
border-bottom: 1px solid #0099cc;
margin-bottom: 4rem;
}
header .width h1 {
float: left;
margin: 0;
margin-right: 5rem;
margin-top: 0.7rem;
color: #ce6d0b;
font-size: 1.4rem;
font-weight: 400;
padding: 0;
}
header .width ul {
bottom: 0;
padding: 0;
}
header .width ul li {
float: left;
}
header .width ul li:last-child {
padding-right: 0;
}
header .width ul li a {
color: #8c8c8c;
text-decoration: none;
border-bottom: 10px solid transparent;
font-size: 1.1rem;
display: block;
text-align: center;
padding: 0.95rem 1.5rem;
}
header .width ul li a:hover {
border-bottom: 10px solid #0099cc;
color: #404040;
}
header .width ul .active a {
color: #404040;
border-bottom: 10px solid #0099cc;
}
</style>
</head>
<body>
<!-- global site header -->
<header>
<div class="width">
<h1>Mockup 2</h1>
<nav>
<ul>
<li class="active">Dashboard
</li>
<li>Section 2
</li>
<li>Section 3
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
http://jsbin.com/vahemoy/edit?html,output
Thank you.
Elements with float: left will wrap like text does if there isn't enough room. What you have to do is make sure there's always enough room for all your elements inside their container. In this case, the last li wraps at 572px for me, but you have min-width set to 480px.
Try increasing your min-width. Then when the window shrinks, you'll get a scroll bar to see the rest of your content, rather than having it wrap.
I'm playing around with some HTML5 and CSS3 and trying to build a single static page for now.
Currently working on the navigation menu with one of the items being a drop down menu.
When I hover above the drop down item, the item is pushing the items on its left and right away.
Could someone explain to me why this is happening? I have very little HTML or CSS experience, I just started putting something together.
The CSS is based on many tutorials on the internet for making drop down navigation menu's. I've stripped most of the code down to the "very basic" to get this working.
Edit: Any tips to make the CSS cleaner are welcome as well.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav role="navigation" class="nav-menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>User Experience</li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="content">
Content
</div>
<footer>
Footer
</footer>
</body>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 1em !important;
color: #000 !important;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
body {
background-color: #646464;
}
header {
background-color: #444;
margin: 0px;
border: 0px;
height: 2.55556em;
width: 100%;
}
#content {
margin: 0px;
border: 0px;
padding: 0px;
height: 70%;
}
footer {
margin: 0px;
border: 0px;
padding: 0px;
height: 30%;
background-color: white;
}
nav {
margin:0;
padding:0;
text-align:center;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px;
}
nav ul li a {
display: block;
margin: 10px 20px;
background: #444;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 10px 20px;
margin: 0 20px;
}
I think the issue is that your secondary menu UL is wider than your primary menu LI containing it. When the embedded UL switches from display:none to display:block it increases the width of the parent LI.
A couple possible solutions:
specify a width for your main menu LIs, e.g.:
nav ul li {
float: left;
margin: 0 20px;
width: 200px;
}
Use position: absolute to take the embedded UL out of the layout flow, e.g.:
nav ul ul {
display: none;
position: absolute;
}
Both of these options have some issues with your current layout, though, and would required you to rework things a bit. Hopefully this is helpful in terms of pointing you in the right direction.
Try by like bellow:
nav>ul { display: inline-block; list-style: none; }