On some of my pages, the section is longer than my aside. I don't want to alter the length of my aside because that would make some pages unnecessarily long for the short content on the page.
My issue is that once my section gets past the length of my aside, the text goes all the way to the left below my aside. I want to keep it going straight down so it is all in line. Make sense?
I can't seem to find the right CSS to make this happen. Can anyone help?
aside {
float: left;
width: 155px;
height: 200px;
padding-right: 25px;
margin-top: 25px;
}
aside ul {
padding-left: 5px;
list-style: none;
/* Removes bullets from list items */
}
aside li {
margin-bottom: 0.50em;
border: 3px solid black;
border-radius: 20px;
background-color: yellow;
}
aside li a {
display: block;
/* Makes whole box clickable */
padding: .5em 1em;
/* Space around text */
text-decoration: none;
/* Removes underlines */
color: black;
}
aside a.current {
color: green;
}
/* Section */
#learnin {
color: purple;
font-variant: small-caps;
font-family: "Courier", monospace;
width: 700px;
}
section img {
float: right;
padding: 10px;
}
section li img {
float: right;
padding: 10px;
}
section {padding: 5px 20px;/* top right bottom left */}
section ul {padding-left: 0px;}
section p {padding-right: 10px;}
section h3 {
clear;
both;
}
section li {
margin-left: 12em;
}
section a {
font-weight: normal;
color: blue !important;
}
img.smiles {
clear: all;
float: none;
padding: 0px;
}
ul.nested {
clear: all;
margin-left: 3em;
}
<aside>
<nav>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</nav>
</aside>
<section>
<p>[text] ...
</p>
</section>
Related
So while my nav displays perfectly in the mobile and tablet viewports, it's been a struggle with the desktop viewport. I just can't seem to get things to display correctly, I don't know what the problem could be, I've managed to get the logo and links parallel to each other, but every time there's an odd open block below the logo that I can't seem to fill. I've tried playing around with the main element's CSS but the block was still there. I also have a CSS Reset.
Example:
2nd Example:
CSS code:
body, img, div, label, figure, figcaption, fieldset, textarea, input,
select, form, p, main, h1, h2, h3, h4, footer, header, nav, table, th, td, ul, li, a {
margin: 0;
padding: 0;
border: 0;
}
/* Desktop: Navigation Menu */
.mobile-tablet-nav {
display: none;
}
.desktop-nav {
display: block;
}
/*
nav li:hover {
background-color: white;
border: 1px black solid;
color: black;
} */
nav {
background-color: #191779;
width: 80%;
float: right;
}
nav li a {
text-decoration: none;
color: white;
}
header {
background-color: #191779;
float: left;
width: 20%;
}
#logo {
padding: 0.5em;
max-width: 90%;
}
nav ul {
text-align: right;
position: relative;
right: 0;
top: 0;
height: auto;
}
nav li {
padding: 0.3em 0;
list-style-type: none;
display: inline-block;
border: none;
}
#logo {
max-width: 52%;
padding: 0.5em;
}
/* Mobile: Navigation */
.desktop-nav {
display:none;
}
/*
nav li:hover {
background-color: white;
border: 1px black solid;
color: black;
} */
#menu-links {
display: none;
}
nav {
background-color: #191779;
position: sticky;
}
nav li a {
text-decoration: none;
text-align: center;
color: white;
padding: 0.1em;
margin: 0 auto;
left: 0;
}
#hamburger {
color: white;
font-size: 1.8em;
margin: 0 auto;
padding: 0.35em;
}
header {
background-color: #191779;
}
nav li {
border-bottom: 1px white solid;
padding: 0.1em;
list-style-type: none;
}
HTML code:
<header>
<img src="images/logo.JPG" id="logo" alt="logo">
</header>
<nav class="desktop-nav">
<!-- Navigation menu for tablet and desktop viewports-->
<ul>
<li><p>Home</p></li>
<li><p>About Us</p></li>
<li><p>Contact Info</p></li>
<li><p>Services</p></li>
<li><p>Contact Us</p></li>
</ul>
</nav>
<nav class="mobile-tablet-nav">
<!-- Hamburger button for interacting with mobile viewport navigation menu-->
<div id="hamburger">
☰
</div>
<!-- Navigation menu for the mobile viewport-->
<div id="menu-links">
<ul>
<li><p>Home</p></li>
<li><p>About Us</p></li>
<li><p>Contact Info</p></li>
<li><p>Services</p></li>
<li><p>Contact Us</p></li>
</ul>
</div>
</nav>
So I don't know what to do anymore. Thank you in advance for the help!
Kind Regards
PrimeBeat
Move header closing tag to after the nav tags.
I am working on a horizontal navigation bar with a dropdown menu. I'm quite new to making codes so this is maybe a stupid question. My navigation is sticking to the left of my website, but I need it to stay in line with the text and I can't get the navigation bar threw my whole webpage how do I fix this?
photo of my website with the 2 problems:
enter image description here
nav {
position: absolute;
}
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
width: 70px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
h1 {
margin-top: 80px;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Two things in your css are giving you trouble.
nav{ position: absolute; } means this div will not fill the width.
horizontal{ margin: 40 auto;} 40 is not valid.
You MUST specify a measurement unit in CSS, so it should be 40px if I'm guessing your intention, but other units are available.
Here is amended css you can try.
nav {
width: 100%;
background-color: #006600;
}
.horizontal {
list-style-type: none;
margin: 40px auto;
width: 640px;
padding: 0;
overflow: hidden;
}
Step 1) Add HTML:
Example
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
Planning
Takken
Kleding
Contact
Inschrijven
</div>
And CSS:
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 15%;; /* Four links of equal widths */
text-align: center;
}
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/
As far as I can tell my CSS is fine, but it just keeps appearing below the header. Any ideas? Sorry for the newb question.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
<header>
<div class "container">
<div id "branding">
<h1><span>Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
So did I go wrong in the HTML or the CSS, or both? I just can't for the life of me figure out why it's not going in the header, and it's literally driving me crazy.
This is because your header h1 element is display:block it will take the full width of its parent try adding this to your css code:
header h1
{
display:inline-block;
float:left
}
I am trying to center the navigation bar in the middle of the div body. I want the navigation bar to go from one side of the div to the other but have the list in the ul to be center in the middle of the div if that makes sense. I can't seem to figure it out even after trying online examples. Thanks
body {
margin: 0px;
padding: 0px;
background-color: #505050 ;
}
#body {
width: 75%;
margin: 0 auto;
position: center;
background-color: #C0C0C0;
height: 100%;
}
.nav {
}
.nav ul {
background-color: #CCCCCC;
width: 100%;
padding: 0;
text-align: center;
}
.nav li {
list-style: none;
font-family: Arial Black;
padding: 0px;
height:40px;
width: 120px;
line-height: 40px;
border: none;
float: left;
font-size: 1.3em;
background-color: #CCCCCC;
display:inline;
}
.nav a {
display: block;
color: black;
text-decoration: none;
width: 60px;
}
<div id="body">
<h2>Hello World!</h2>
<div class="nav">
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li><a href="#">News<a></li>
<li><a href="#">Contact<a></li>
</ul>
</div>
</div>
i attach fix here http://jsfiddle.net/o4716uo9/
use inline-block for li
background property should be setted in ul element, not li, in your case. Delete the float in nav li. Also, the a element it isn't closed correctly. Main changes:
.nav ul {
background-color: #cccccc;
text-align: center;
}
.nav ul li {
display: inline-block;
min-width: 120px;
[...]
}
I'll recommend you to take a look at the bootstrap framework. It could be interesting for you.
There are a couple things you can change to correct the issue:
1) Your <a> elements have a width of 60px. You can remove this.
2) You .nav li has a width of 120px. I would change this to 25% (If there are only going to be four navigational items).
http://jsfiddle.net/xLnz90ek/
Is that any closer to the desired effect.
Is this what you’re trying to do?
* { margin:0; padding:0 }
html {
background-color: #505050;
font-size: 4vw;
}
header {
width: 75%;
margin: 0 auto;
background-color: #C0C0C0;
}
nav {
background-color: #CCCCCC;
display: flex;
padding: 0.2rem 0;
}
nav a {
flex: 1 0 auto;
font-family: Arial Black;
font-size: 1rem;
background-color: #CCCCCC;
color: black;
text-decoration: none;
text-align: center;
margin: 0 0.3rem;
}
<header>
<h2>Hello World!</h2>
<nav>
Home
About
News
Contact
</nav>
</header>