I'm just learning CSS and HTML and decided to have a go at making a mock up website. I'm having trouble with the border not meeting the end of the top bar. Other times I've had it go over.
https://jsfiddle.net/9gonuvu7/
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
You can see this in the above link. If you could explain to me why this is happening and how I can avoid it in future I would be very grateful.
Remove the padding from the parent.
That's preventing it from reaching top.
#topbar {
background-color: #2A4F6E;
width: 100%;
height: 50px;
padding: 0px 0 0px 0;
margin: 0;
}
Okay, because you said you just started with HTML and CSS I changed a bit more in your code.
At the moment your fixedwith div has no impact on the code (maybe you use it in your full website).
You applied the background on the whole topbar, that HTML-wise also contains your menu points, assuming you only want your headline to have that blue background I swapped that property to the h1-tag.
With this change the borderlines are overlapped b the headline, which should do the job.
new JSFiddle
* {
margin:0;
padding:0;
}
body {
margin: 0;
font-family: arial, helvetica, sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
#topbar {
float:left;
width:100%;
height:100%;
overflow:hidden;
}
#topbar h1 {
display: block;
width:100%;
height:100%;
background-color: #2A4F6E;
padding: 7px 50px 7px 40px;
margin: 0;
color: white;
float: left;
border-right: solid #3E6F87 1px;
}
#topnav {
float:left;
width:100%;
height:50px;
background:#ccc;
}
#topnav li {
float: left;
margin: 0;
padding: 16px 10px 10px 20px;
list-style: none;
color: white;
font-size: 1.2em;
border-right: solid #3E6F87 1px;
}
#topnav ul {
margin: 0;
padding: 0;
}
#topnav a:hover{
color: #A97437;
}
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<h1>Neil's Tech Reviews</h1>
<div id="topnav">
<ul>
<li> Home</li>
<li> Reviews</li>
<li> Forum</li>
<li> Partners</li>
<li> About</li>
</ul>
</div>
</div>
</div>
</div>
</body>
I'm relatively new to HTML (only a few weeks now), and I'm stuck. The "about" section on my page doesn't seem to be clickable and won't bring me to the linked page. The confusing thing is that the link appears to be clickable since the floating hand icon appears when hovering over the link. I can right-click and open the link in a new tab. If I delete the css and try the link without the formatting, it is also valid.
I'm confused... is the CSS somehow messing with my href tag?
here's the html:
<div id="header">
<div class="container">
<div class="row">
<div class="twelwecol last">
<div id="navigation"> <!-- Navigation Links -->
<ul>
<li>about</li>
<li>members</li>
<li>events</li>
<li>media</li>
<li>social</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and the code from the "navigation.css" page:
#header {
width: 100%;
height: 49px;
color: white;
background-color: #1b1e25;
position: fixed;
z-index: 9999;
}
#logo {
background-image: url('../images/assets/logo.png');
background-repeat: no-repeat;
height: 80px;
width: 80px;
display: block;
float: left;
}
#navigation {
padding-top: 2px;
width: 480px;
display: block;
margin: 0px auto;
}
#navigation ul {
padding:0px;
margin: auto;
text-transform: uppercase;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li a {
color: gray;
text-decoration: none;
font-family:'Scada', sans-serif;
font-size: 13px;
}
#navigation ul li a:hover {
color: white;
}
.current {
border-bottom: 1px solid #cb1c1c;
color: white;
}
#contact {
padding-top: 12px;
float: right;
position: relative;
}
#contact a {
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
color: gray;
padding: 11px;
}
#contact a:hover {
color: white;
border: #333333 1px solid;
padding: 10px;
}
Could someone please tell me what is going on here? Any help would be most appreciated!
it appears clickable because it is contained within the a tag. When you link something your href needs to have a proper extension. Are you sure youre using .htm and not html?
furthermore CSS affects Style (css= cascading style sheet) it wont affect html (or any other) functions like the href function.
try changing your href to href="about.html"
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?
Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.
If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.
<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>
float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}
Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}
Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.
DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO
Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>
Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.
I have a CSS/HTML list that is using an image as the background and a different image when the mouse is hovered over.
The only problem is that the hover image doesn't line up correctly and has a small but noticable gap.
I have placed a link to a test version to help you to see exactly what I mean.
I am also using Blueprint CSS as a CSS framework.
The source code is below.
As always, thanks in advance
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-repeat: repeat-x;
}
<div class="container" id="container">
<div class="prepend-top">
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Start HaardHout Vergikelleen</li>
<li>In Jouw Regio</li>
</ul>
</div>
</div>
</div>
Set float: left; for your li elements.
#navbar li { float:left; }