Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
Related
I have two specific questions concerning my website for my class.
First, my floating left-side vertical nav bar is getting in the way of the different sections on my theme/genre page of my website.
Whenever I go to this page, the nav bar by default is pushing my first section ("Horror") over to the right. This is good and I want ALL of my sections to permanently move to the right so that my nav bar will not be floating over any of my sections. However, right now only this first section is moved to the right and while the nav bar "floats" down, the nav bar either floats directly over the sections or the sections just get distorted and look weird.
Here is the Theme.html page code below. I only included the first "section" for brevity's sake.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="favicon-animated%20dice.ico" rel="icon" type="image/x-icon">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<title>Rolling Solo Theme/Genre</title>
<meta charset="utf-8">
<link rel="stylesheet" href="rollingsolo.css" type="text/css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src="js/float-panel.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header">
<h1>Rolling Solo</h1>
<h2>"I Roll Solo"</h2>
</div>
</header>
<div id="headings">
<h1>Board Games Theme & Genre</h1>
</div>
<div id="nav" class="float-panel">
<nav class="navigation"><!--Added .navigation-->
<ul class="mainmenu"><!--Added .mainmenu-->
<li>Home</li>
<li>Theme/Genre>
<ul class="submenu"><!--Added .submenu-->
<li>Horror</li>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Space</li>
<li>Nuclear Apocalypse</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<section id="Horror"class="sections"><h3>Horror</h3>
<hr>
<img src="theme/Arkham%20Horror-The%20Card%20Game(Medium).jpg" height="80" width="80" alt="arkham horror pic" class="images">
<p>Arkham Horror is a great deck building game.</p>
<br>
<img src="theme/Kingdom%20Death-Monster(medium).jpg" height="80" width="80" alt="kingdom death monster pic" class="images">
<p>This game was a mega-hit during its Kickstarter campaign last year. Extremely in demand and a great buy, if you can get your hands on it.</p>
<br>
</section>
I have looked in my CSS class "sections" and tried many times to move that blue border over to the right, but still cannot do it.
Here is my CSS code below for the theme/genre's sections and navigation code:
.sections {border-style: ridge; /*adjusts the Theme/Genre Sections*/
border-width: 10px;
border-color: #1D3D94;
padding-left: 20px;
padding-right: 20%;
overflow:auto;}
.images {float: left; /*adjust the pics in the Theme/Genre Sections*/
padding-top: 10px;
padding-right: 10px;}
#nav {float: left; width: 200px; margin: 10px 0;}
/* define a fixed width for the entire menu */
.navigation {width: 190px;}
/* reset the lists to remove bullet points and padding */
.mainmenu, .submenu {list-style: none;
padding: 0;
margin: 0;}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;}
/* add hover behavior */
.mainmenu a:hover {background-color: #C5C5C5;}
/* when hovering over a .mainmenu item,
display the submenu inside it.*/
.mainmenu li:hover .submenu {display: block;
max-height: 200px;}
/*Now, overwrite the background-color for .submenu links only.
.submenu a {background-color: #999;}
/* hover behavior for links inside .submenu */
.submenu a:hover {background-color: #666;}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.*/
.submenu {overflow: auto;
max-height: 0;
-webkit-transition: all 0.5s ease-out;}
Is there any way to permanently move these sections to the right out of the way of the nav bar?
Secondly, I do not want use a scroll bar function in the nested directoires but instead show ALL of my sections together when my mouse hovers over the "Theme/Genre >" heading in my nav bar. As of now, it only shows five of the seven sub-directories before having to use a scroll bar to scroll down to see the rest.
How do I remove the scroll bar and show ALL seven sub-directories?
Thanks a lot for any and all help you may give. I do appreciate it.
You could handle your submenu items with the css :hover states.
And you could place your menu and your content like this :
<div class="site-container">
<nav class="menu"><!-- Your menu--></nav>
<main><!-- Your main content--></main>
</div>
and add display: flex; on the .site-container.
Set the width: of your menu to 200px for example
And the width of the main content to calc(100% - 200px);
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
display: flex;
flex-flow: row wrap;
}
.menu {
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu nav > ul {
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
}
.menu ul li.has-child li {
display: none;
background: #8E8E8E;
}
.menu ul li.has-child:hover li{
display: block;
}
main {
/*Total size minus the menu size*/
width: calc(100% - 200px);
padding: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
You could do an improvement by fixing your menu at the top left of the screen with position: fixed; top: 0; left: 0; z-index: 2;, so it's always visible. And set position: absolute; left:100%; top: 0; on the submenu and position: relative; on its parent li, so the submenu will appears at the right of your menu. It will prevent the menu from doing "Yo-yo".
html,
body {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
/* This is for including the padding and the borders into the width*/
*, *::before, *::after {
box-sizing: border-box;
}
.site-container {
position: relative;
}
.menu {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 200px;
}
.menu ul {
padding: 0;
background: #C5C5C5;
margin-top: 0;
list-style: none;
}
.menu ul li a {
display: block;
padding: 5px;
color: black;
font-weight: bold;
text-decoration: none;
}
.menu ul li a:hover {
color: white;
}
.menu ul li.has-child {
background: #5B5B5B;
position: relative;
}
.menu ul li.has-child ul {
display: none;
background: #8E8E8E;
position: absolute;
left: 100%;
top: 0;
}
.menu ul li.has-child:hover ul{
display: block;
}
main {
padding-left: 210px;
padding-right: 10px;
}
main h1 {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.theme-item {
border: 4px solid black;
padding: 20px;
margin-bottom: 50px;
}
.theme-title {
z-index: 1;
position: relative;
margin-bottom: 40px;
}
.theme-title:before {
position: absolute;
content: '';
display: block;
width: 80%;
height: 3px;
background: black;
top: calc(100% + 10px);
left: 0;
}
.games-list {
padding: 0;
list-style: none;
}
.games-list .game {
width: 100%;
margin-bottom: 30px;
}
/*clearfix hack https://css-tricks.com/snippets/css/clear-fix/*/
.games-list .game:after {
content: '';
display: table;
clear: both;
}
.games-list .game img {
float: left;
}
.games-list .game .description {
float: left;
padding-left: 15px;
}
<div class="site-container">
<div class="menu">
<nav>
<ul>
<li>Home</li>
<li class="has-child">
Theme/Genre
<ul>
<li>Sci-Fi</li>
<li>Survival</li>
<li>Pirate</li>
<li>RPG/Fantasy</li>
<li>Horror</li>
<li>Action</li>
<li>Aventure</li>
</ul>
</li>
<li>Top Solo Games of 2017</li>
<li>Variants</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<main>
<h1>Board Games Themes & Genre</h1>
<div class="theme-list">
<div class="theme-item">
<h2 class="theme-title">Horror</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
<div class="theme-item">
<h2 class="theme-title">Sci-Fi</h2>
<ul class="games-list">
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">A good game</p>
</li>
<li class="game">
<img src="http://via.placeholder.com/150x150" />
<p class="description">Another game</p>
</li>
</ul>
</div>
</div>
</main>
</div>
Use padding-left
Make sure the items that are listed are sitting in a 'container' so that all the children inside the container can sit wherever the parent sits. This allows you to use the following CSS rules for content (with the id of #content for example):
#content {
position: relative;
padding-left: 5em;
box-sizing: border-box;
width: 100%;
}
Explanation
position: relative - make sure the children abide by the basic rules of the parent
padding-left: 5em - Push the parent (content) to the right of the menu by 5em, all children will be relative to the parent
box-sizing: border-box - keep all the padding relative to the inside the width and height of the container (by subtracting the size) rather than appending size dynamically.
width: 100% - Let the container fill the rest of the space (1)
1) if width: 100% is over-taking the space of the menu then consider using width: calc(100% - 5em) where 5em is the width of the menu
Note It's worth putting into consideration that to do this you normally need a fixed/max-width menu and would be ideal to do so. Otherwise text, images and so on may expand the menu infinitely within a percentage of that space.
element:hover
To eliminate the scrollbar on the menu you will have to find what is taking up the space. If these are more items that you want to show/hide when the cursor is above the menu item you can use the element selector :hover which can tell the menu to hide certain items. You can then use it to set before the hover event occurs and during the hover event. For example:
body { background: white; }
body:hover {background: red;}
A more relative example would be to set the height of the main menu item so that the rest cannot be shown (with the use of overflow: hidden)
ul li ul li {display: none};
ul li:hover ul li {display: block}
I am working on styling a Twitter Feed Javascript for my layout. The issue is, when I float the date and interaction links, the border that's supposed to surround all the parts of the particular tweet ignores the date and interaction divs, causing the border to overlap with them.
Is there any way to remedy this issue. The issue can be viewed here (at the bottom of the page): http://www.noellesnotes.com
Relevent Code:
HTML
<div id="tweets">
<ul>
<li>
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS
.tweet, .tweet a, .tweet span, .interact a{
margin-bottom: 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
word-wrap:break-word;
}
.timePosted{
width:40%;
font-size: 12px;
float: left;
font-weight: bold;
text-align: left;
}
.interact{
width:60%;
font-size: 12px;
float: left;
text-align: right;
overflow: hidden;
}
.interact a{
margin-right: 3px;
text-decoration: underline;
font-family: 'Arvo', Georgia;
}
#tweets ul{
margin-left: 0;
padding-left: 0;
list-style: none;
}
#tweets ul li{
border: 3px solid rgba(255,255,255,0.4);
margin: 3px 0;
padding: 3px;
}
This is the case for a clearfix div.
HTML:
<div id="tweets">
<ul>
<li class="clearfix"> <!-- clearfix class added here -->
<p class="tweet">The tweet.</p>
<p class="timePosted">TIME</p>
<p class="interact">INTERACT LINKS</p>
</li>
</ul>
</div>
CSS:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* for IE/Mac */
display: inline-block;
}
There are a few other clearfix solutions I recommend searching to find and use the one that works best for your needs.
I have a small gap between everything in my webpage and the browser's edge. I must have added some code that has done this, but am unsure what did. What do I do to remove this? Also in my navigation bar, the last link on the right hand side, has a small gap that is not highlighted on hover on the very edge on the right side of it.
I also need help with the gap between the navigation bar + header and the side banners. How do I remove that gap?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
/* Add something here */
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Disregard the .headers_t id in the css, which I am editing right now...unless that's the cause.
The JSFiddle link is here.
You need to add margin:0px and padding:0px to your body CSS
so:
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin:0px;
padding:0px;
}
This question already has answers here:
How to remove indentation from an unordered list item?
(10 answers)
Closed 7 years ago.
For some reason in my footer there's a space to the left of my ul so it isn't lined up with the content above it (membership text etc) If I were to put text outside this ul (but still within the footer wrapper) there is no such space.
Here's what it looks like:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ozanam Club </title>
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/fonts/enigma.css" />
</head>
<body>
<div id="wrap">
<header>
<div id="logo"><img src="images/logo.png" height="157px" width="237px"></div>
<!--
<div class="social">
<ul>
<li><img src="images/icons/facebook.gif"/></li>
<li><img src="images/icons/twitter.gif"/></li>
<li><img src="images/icons/youtube.gif"/></li>
</ul>
</div>
-->
<div id="navigation">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/image1.gif" />
</li>
<li>
<img src="images/slider/image2.gif" />
</li>
<li>
<img src="images/slider/image3.gif" />
</li>
</ul>
</div>
</section>
<div class="main">
<h1>Ozanam Club</h1>
<p>The first Ozanam Club was started in May 1989 by James Lynch, a member of the
St. Vincent De Paul society who himself had two children with learning difficulties
and who was concerned at the general lack of leisure provision for them.</p>
<p>The Ozanam Club is a Special Works Conference of the St. vincent De Paul Society.
The name of the clubs are called after Blessed Frederick Ozanam who is the founder
of the S.S.V.P. At this present time we have two clubs in Viewpark, an adults club
and a seperate club for younger members. We have an adults club in Hamilton and
Paisley and also a club in Carfin for younger members. </p>
<h1>Membership</h1>
<p>Membership is open to anyone who has disablities, regardless of their race or religious belief.</p>
<p>The aim of the clubs are a fun night out for our members and some temporary respite for parents. All of the clubs are run solely by volunteers who are disclosure checked prior to working with
vulnerable adults/children.</p><p> They are also made aware of the Adults/Children Protection Procedures and encouraged to attend an information session.</p>
<p>You can find more information on our a F.A.Q page.</p>
</div>
<div class="side">
<img src="images/events.gif" alt="Events" />
View
</div>
<div class="side">
<img src="images/photos.gif" alt="Events" />
View
</div>
</div>
<footer>
<div id="footer-wrap">
<ul>
<li>Home</li>
<li>Events</li>
<li>Clubs</li>
<li>Photos</li>
<li>F.A.Q</li>
<li>Contact</li>
</ul>
</div>
</footer>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
</html>
CSS:
body {background: white; background: url('../images/grunge.png'); font-family: 'EnigmaticRegular';}
#wrap {margin: 0 auto; width: 100%; max-width: 1000px;}
header {position: relative;}
#logo {margin: 20px 0 0 0; display: block; float: left;}
.social ul { z-index: 1; list-style: none; position: absolute; top: 0; right: 0;}
.social li { float: left;}
.social img { height: 35px; width: 35px;}
#navigation { width: 100%; max-width: 1000px; height: 200px; position: relative; }
#navigation ul { padding: 0.5em; background: white; border-radius: 5px; border-bottom: solid 3px #3c88bc; display: inline-block; position: absolute; bottom: 0; right: 0;}
#navigation li { padding-left: 0.5em; padding-right: 0.5em; list-style: none; font-style: none; font-family: 'EnigmaticBold'; border-right: solid 1px black;}
#navigation li:last-child { border: 0;}
#navigation ul,
#navigation li {float: left;}
#navigation a { color: #195c8a; text-decoration: none; font-weight: bold;}
#navigation a:hover { color: #13405f;}
.main { float: left; margin-top: 20px; width: 625px;}
.main h1 {font-family: 'EnigmaticBold'; color: #13405f; }
.main p {color: #13405f;}
.main a {color: inherit; }
.side {float: right; margin-top: 20px; border-radius: 10px; margin-bottom: 10%; }
.side a { text-decoration: none; color: #3c88bc;}
.button { font-size: 14px;font-family: 'EnigmaticBold'; display: block; width: 100px; margin: 0 auto; text-align: center; background: #fff; padding: 5px; border-radius: 10px; border-bottom: solid 3px #3c88bc;}
footer { height: 100px; background: #195c8a; clear: both; }
#footer-wrap {margin: 0 auto; padding: 0; width: 100%; max-width: 1000px; }
#footer-wrap li { float: left; list-style: none; padding-right: 3em;}
#footer-wrap a {color: white ;text-decoration: none;}
The <ul> element has browser inherent padding & margin by default. In your case, Use
#footer ul {
margin: 0; /* To remove default bottom margin */
padding: 0; /* To remove default left padding */
}
or a CSS browser reset ( https://cssreset.com/ ) to deal with this.
I don't see any margin or margin-left declarations for #footer-wrap li.
This ought to do the trick:
#footer-wrap ul,
#footer-wrap li {
margin-left: 0;
list-style-type: none;
}
by default <UL/> contains default padding
therefore try adding style to padding:0px in css class or inline css
I have a div which in 1000px; and a navigation bar which is also 1000px; but it doesn't extend as much as the div.
Please help...
[index.html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
fun stuff
<ul>
<li>jokes</li>
<li>riddles</li>
<li>facts</li>
</ul><!-- end of Second List -->
<li>
my work
</li>
<li>
my favourite songs
</li>
<li>
my favourite links
</li>
<li>
about me
</li>
<li>
contact me
<ul>
<li>phone</li>
<li>e-mail</li>
<li>mail</li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>
[style.css]
body {
background: SILVER;
margin: 0;
padding: 0 auto;
}
.banner {
background: blue;
width: 1000px;
height: 70px;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#navMenu {
margin: 0;
padding: 0;
line-height: 30px;
width: 1000px;
}
#navMenu ul {
margin: 0;
padding: 0;
border: 1px white;
}
#navMenu li:hover {
font-weight:normal;
text-transform: capitalize;
background:silver;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
}
#navMenu ul: hover {
text-transform: capitalize;
}
#navMenu ul li a {
text-align: center;
font-family: "Arial";
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: white;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top:30px;
border: 1px white;
}
#navMenu ul li:hover ul {
visibility: visible;
}
I have added the code for the style and index.. As you can see both the banner and navmenu have 1000px;
Just change you CSS like this: Live Demo
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
width:165.6px;
}
165.6 is (1000 - 5)/6 (approx)
Using Chrome, right-click each element and choose "Inspect Element". Scroll down to "Metrics". This will show you what other properties are affecting the apparent width of each element (margin, border, padding, box-model, and positioning).
The navigation is not 1000px because each item is set to fixed width
You should change the width of each item using percentage, so the width of each item is relative to 1000px and the number of items
however, if it's still not working, you should add <div style="clear:both;"></div> at the bottom of <ul></ul>
The length of the navigation bar is decided by each individual bullet point in the list. Where you have width: 150px; shows the length of each individual li. The length of all of them together gives you the length of the navigation bar. You add display: inline-block; under the #navMenu ul li to make it depend on the original width.