I currently have the following:
HTML
<body>
<h1>Web Services</h1>
<div id="wrap">
<ul id="nav">
<li>Home</li>
<li>Service A</li>
<li>Service B</li>
<li>Service C</li>
<li>Service D</li>
</ul>
</div>
<h2>Overview</h2>
<div class="textParagraph">
<p>
The Web Services listed on this site allow users to retrieve, alter and summarize information contained with a "Market Data File".
A Market Data File contains data about financial instruments.
</p>
<p>
Please click on the links above for more information about our services and have a trial run.
</p>
</div>
CSS
#CHARSET "ISO-8859-1";
body {
font-family: Verdana, Arial, sans-serif;
width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Begin Navigation Bar Styling */
#nav {
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
border-left:1px solid #ccc; }
#nav li {float: left;}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
/* End navigation bar styling. */
/* This is just styling for this specific page. */
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff; }
h1 {
text-align:center;
}
h2 {
text-align:center;
}
This is what it looks like at the moment.
The navigation bar should also be aligned in the center. I got the code for the navigation bar from some site.
Overview should be on the next line and centered with WebServices.
How can I got about achieving this? I don't understand why the <div> and <h2> are appearing on the same line..
Change #nav to something like this.
#nav {
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
border-left:1px solid #ccc;
}
#wrap needs some help to know that it has to contain it's floated children; you can easily do this by adding an overflow: auto;:
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: auto;
zoom: 1;
}
zoom is a IE-specific rule, there to help trigger hasLayout in older versions.
Because you have #nav { float: left } you will need to add a clear after the it. You may do this will a utility class of .clear on the h2.
.clear {
clear: both;
}
Or, just add clear: both to the h2 element.
Your navbar is floated; you need to apply clear: left; to the h2 element to force it to appear below the navbar. If you want everything centered, remove the float: left and add text-align: center to your code.
check the demo
#wrap {
margin-left: auto;
margin-right: auto;
background-color: #fff;
float: left;
border: 1px solid #f00;
width: 100%;
}
Demo
add this to your wrap
class="clearfix"
then in css add this
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0px;
visibility: hidden;
}
You have floated element in your wrap thus making your wrap height zero, you need clearfix to adjust the wrap height according to the floated element
change wrap css to :
#wrap {
display:inline-block;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
http://fiddle.jshell.net/utfp20sp/
Related
I'm really sorry if I didn't phrase my question correctly, I'm really new at all of this.
I want to put my menu items (I made an unordered list) within my nav block, but they are showing underneath it instead. It overlaps with my body content (not pictured), which is really problematic. Could someone help me?
The pink box is my nav block. I want to put my menu buttons inside it.
I know that the pink block is in fact the nav block?
HTML:
<header>
<h1>Header</h1><h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
<li>delta</li>
</ul>
</nav>
CSS:
header{
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav{
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1, h2{
display: inline;
}
/*Set li as buttons*/
#menu li{
float: left;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
display: block;
}
/*display anchor tags as buttons*/
#menu a{
display: block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover{
color: white;
background-color: black;
}
Thank you!
There are many errors in your CSS:
list-style-type: none; goes on the list, not on its items. It's what disables default list-behavior and makes the list stand on one line.
float: left; will make the elements float, but will also make the parent shrink as if it didn't have any content, which is why the elements sit below the nav block.
display: block; on items makes them stand on their own line. If you want multiple elements to stand side-by-side yet still have margins and paddings like blocks, you need to use inline-block instead. This is much easier to maintain than floating elements.
The margins on the list items are also way too big, I got rid of those. Honestly though, I really don't get why people use lists anymore. You could very well just put the links in the nav directly and save a lot of code.
header {
background-color: green;
border: 1px solid purple;
width: 100%;
height: auto;
}
nav {
background-color: pink;
border: 1px solid grey;
width: 100%;
height: auto;
}
h1,
h2 {
display: inline;
}
/*Set li as buttons*/
#menu {
list-style-type: none;
}
#menu li {
width: 5em;
margin: 0;
display: inline-block;
}
/*display anchor tags as buttons*/
#menu a {
display: inline-block;
background-color: white;
border: 3px solid blue;
text-align: center;
text-decoration: none;
color: black;
}
/*display setting on button hover*/
#menu a:hover {
color: white;
background-color: black;
}
<header>
<h1>Header</h1>
<h2> | chapter</h2>
</header>
<nav>
<ul id="menu">
<li>alpha
</li>
<li>beta
</li>
<li>gamma
</li>
<li>delta
</li>
</ul>
</nav>
You need to clear the container of the floated elements, as they don't properly stretch the container.
Add the clearfix CSS to your sheets:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
and then add the clearfix class to menu:
<ul id="menu" class="clearfix">
fiddle
Alternatively, pick one of the other clearfix solutions from here (where I got the solution above).
Get rid of the float left under menu li and replace it with
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-left: -2.5em; /*Removes default indentation of lists*/
margin-right: 5em;
}
and if you want to move it over to the right a bit more
#menu li{
display:inline-block;
list-style-type: none;
width: 5em;
margin-right: 5em;
}
When you move the mouse over image thumbnails, i.e. all images in ul .thumbs, you should see a small box which shows the text in the span embedded in the image link. This does not happen. Why and how do I fix it ?
http://jsfiddle.net/raj4dev/hbyg43d9/3/
html
<body>
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="img/thumb1.jpg"><span>Img 1</span></li>
<li><img src="img/thumb2.jpg"><span>Img 2</span></li>
<li><img src="img/thumb3.jpg"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="img/slide1.jpg"></li>
<li id="slide-2"><img src="img/slide2.jpg"></li>
<li id="slide-3"><img src="img/slide3.jpg"></li>
</ul>
</div>
</body>
css
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body{
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li{
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a{
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
border: #333 solid 4px;
}
ul.slide{
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a:hover span{
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
}
This is a clever approach to creating a slide show that does not require JavaScript or jQuery, rather nicely done.
There was a typo in one of your class names in the CSS and that was creating some confusion (change ul.slide to ul.slides).
I guessed that what you wanted to do was display the span on hover, which means that to begin with, the span need to be hidden using display: none, and I added a new CSS rule for ul.thumbs li a span to correspond with ul.thumbs li a:hover span. (Note, you could also use :hover on li instead and get a similar effect.)
I also altered how the floated elements are styled. If you add overflow: auto to ul.thumbs, all the floats are contained within the parent block and you can then add the bottom margin to the parent ul instead of the li, which is more advantageous in some designs, your can decide.
For the thumbnail images, see ul.thumbs img, I set the height to 100% and let the thumbnails scale to fit the inherited height (from li) and use vertical-align: top if you want to remove the whitespace below the images.
I also set the with on the li instead of the a, but the distinction really depends on the details of our design.
For the most part, your CSS is good as is. The only missing concept was the initial hiding of the span so that it can appear on hover.
Note: I did not pay much attention to the width of the span and its exact positioning. If you have a lot of text (like a caption), the width of 100% will not be enough (I set it that way to make it fit in the li container). You can change it as you see fit.
*{
margin: 0;
padding: 0;
border: none;
outline: none;
list-style: none;
}
body {
background: #465c8f url(../img/bg-image.jpg) repeat-x;
font-family: 'Arial', 'sans-serif';
}
#container{
width: 718px;
overflow: hidden;
margin: 40px auto;
}
h1{
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs {
border: 1px dotted white; /* for demo only... */
overflow: auto;
margin-bottom: 10px;
}
ul.thumbs li{
float: left;
width: 85px;
height: auto;
margin-right: 9px;
border: 1px dotted white; /* for demo only... */
}
ul.thumbs a {
display: block;
position: relative;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;/*remove underlines*/
text-shadow: 1px 1px 0px rgba(255,255,255,0.25), inset 1px 1px 0px rgba(0,0,0,0.15);
}
ul.thumbs img{
vertical-align: top; /* if you need to remove whitespace below image */
height: 100%;
border: #333 solid 4px;
}
ul.slides { /* fix typo in class name */
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a, ul.slides img{
width: 705;
height: 350px;
position: relative;
}
ul.thumbs li a span { /* Need to provide a default styling for the span... */
position: absolute;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: auto;
text-align: center;
border-radius: 3px;
background-color: white;
display: none;
}
ul.thumbs li a:hover span {
display: block;
}
<div id="container">
<h1>css slide show</h1>
<ul class="thumbs">
<li><img src="http://placehold.it/60x60"><span>Img 1</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 2</span></li>
<li><img src="http://placehold.it/60x60"><span>Img 3</span></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://placehold.it/240x120"></li>
<li id="slide-2"><img src="http://placehold.it/180x120"></li>
<li id="slide-3"><img src="http://placehold.it/120x120"></li>
</ul>
</div>
Your hover styles work fine, but you have ul.slides on top of ul.thumbs, so the :hover action isn't being passed to your anchor.
In the future, please share the relevant pieces of code in your question on StackOverflow for posterity and searchability.
Just add z-index: 2; to your ul.thumbs a css like coryward said your link is underneath something so you can't hover over it you need to bring it to the top so you can hover on it.
For the life of me I can't see why my "div" will not wrap around the header... I've closed it, the height is not specified...
I've searched other posts and no solutions so far. Is there a conflict that I'm overlooking?
Here's the html:
<div id="navcontainer">
<div id="siteLogo"> <img src="images/some image in a folder"/>
<div id="menu">
<ul>
<li>Home</li>
<li>Calendar</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
And the CSS:
#menu li a:hover {
color: #ff9900;
border-bottom: 4px solid #ff9900;
}
#siteLogo img{
height:auto;
width: 220px;
}
#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
}
#outer {
width: 960px;
margin:0 auto;
}
#wraper {
width: 900px;
margin:0 auto;
}
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: thick 1px #ffppoo;
}
#siteLogo {
float: left;
margin-top: auto;
}
#menu {
float: right;
margin-top: auto;
}
#menu ul li {
display:inline;
}
#menu ul {
margin-top: 50px;
text-align: center;
}
#menu ul li a {
padding:0 0 0 20px;
}
Slight change to your syntax and containing/clearing your floats:
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: solid 1px #000;
overflow: hidden;
}
http://jsfiddle.net/xSfrb/
The floats are probably killing you. Try adding one last
<div style="clear:both"></div>
before closing the navContainer
The child elements are floating within a non-floating parent which causes the so-called zero-height container problem and has several solutions.
You can use overflow, like David Randall suggests
You can use an empty clear:both div, like Federico Jacobi suggests
Another solution is 'Clearfix', which uses pseudo content elements. See this related thread What is a clearfix? for further information on clearfix
EDIT: more background information on the problem http://complexspiral.com/publications/containing-floats/
At some point my floating link list has ended up with an indent, causing the last link to go onto a new line (or over the side of the div if I set a width for the ul).
I literally don't know where to start looking for this problem. I'm just going to go ahead and link to the website. Here's the HTML for that section:
<div id="navigation">
<ul id="navLinks">
<li>Home</li>
<li>Alston</li>
<li>Booking</li>
<li>Photos</li>
</ul>
</div>
And here is what I believe is the only CSS affecting it:
#navigation {
position: relative;
//width: 210px;
//height: 600px;
margin: 2px 0;
font-size: 90%;
font-weight: normal;
clear:both;
overflow:hidden;
}
//NAVIGATION BAR STUFF
#navLinks {
list-style-type:none;
//display:inline;
margin-left:auto;
margin-right:auto;
width: 100%;
padding:0;
text-align:center;
text-decoration: none;
overflow:hidden;
}
ul#booking {
color:rgb(84, 154, 14);
}
ul#navlinks {
text-algin: center;
margin: 0;
padding: 0;
}
ul#navLinks li { display: inline;
list-style-type: none;
line-height: 150%;
margin-right: 10px;
margin-left: 10px;
background-color: #fff; }
ul#navLinks li a
{
float: left;
text-align:center;
background-color: #ADF16A;
color: #000000;
text-decoration: none;
border-left: 0px;
border-top: 0;
border-bottom: 0;
border-right: 1px;
border-style: solid;
border-color: #7AE015;
width:161px;
padding:3px 0px;
}
ul#navLinks a:hover
{
background-color: #CC7A00;
}
ul#navLinks .lastLink{
border:0;
}
//ul#navLinks a
//END OF NAVIGATION BAR STUFF
The entire CSS is here
Thanks!
Your #navLinks has some left padding thrown in by browser default (in my cas, -webkit-padding-start: 40px;). If you define padding-left: 0;, that will be overridden.
You did cover this base in Line 195 of your style1.css, which has ul#navlinks { but that needs to be ul#navLinks {.
Make sure you're spell-checking your text-aligns, and capitalizing classes and IDs in your CSS file when they're capitalized in your CSS file.
If you add a css reset file to your site it should fix your problem, which is related to padding/margin on your UL.
A css reset file, amonst many other things, sets the padding and margin on all elements to zero - allowing you the freedom to style everything exactly as required.
http://meyerweb.com/eric/tools/css/reset/
How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.
<div class="header">
<b>How ya doin?</b>
<ul class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
</div>
THe CSS:
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
This is what I get:
I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.
You'll need a div to clear it afterwards to fix the layout though.
Something like:
.header b {
width:50%;
float:left;
}
.header ul {
width:50%;
float:right;
}
then underneath
<div style="clear:both"></div>
to avoid messing things up.
Try
ul {
display:inline;
/* ... */
}
something like:
.header b{display:block; width: 100px; float:left}
.menu {width:150px; float:left}
Good luck
what about using absolute / relative positions?
this is really a simple and nice solution for header text, easy to add another elements as well
.header{
position: relative;
}
.header > b{
position: absolute;
left: 10px;
top: 5px;
}
.header > ul{
position: absolute;
top: 5px;
right: 10px;
}
<div class="header">
<!-- float to left -->
<b style="float: left;">How ya doin?</b>
<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
<!-- clearing float -->
<br style="clear:both;" />
</div>
I changed your CSS to this and it seemed to do the trick (additions noted):
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.
Easiest should be to set display: inline; on the ul element.
Another is to set float: left; on both the <b> and the <ul>, and give them both a width.
If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.