I have placed a menu using <ul> <li> format in the div tag. inside the div i have one <ul> tag and the four <li> tags. Among the all <li>'s in one ![<li>][1] i have placed the search text box. The issue here is the menu works fine in firefox but in other browsers like chrome, IE, Safari etc the text box comes below the menu. My code as follows...
<!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>Untitled Document</title>
<style>
#cfnavbar {
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
height: 40px;
width: 990px;
}
#cfnavbar {
margin: 0;
padding: 0;
}
#cfnavbar:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#cfnavbar ul{
padding: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
font-size:18px;
}
#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 8px 13px 5px 6px;
text-decoration: none;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
#cfnavbar ul li span{
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
}
#cfnavbar ul li a:hover{
text-decoration: none;
color:#FFFFFF;
}
.wrapper {
width:990px;
background-color:#c6c6c6;
margin:0 auto;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="cfnavbar">
<ul>
<li><span>Home Page | </span></li>
<li>Top Rated Games | </li>
<li>Top Played Games</li>
<li>
<div class="searchform">
<form action="#" method="get" onsubmit="#">
<input name="task" type="hidden" value="search" />
<input name="q" type="text" size="20" id="search_textbox" value="<?php echo $search_val;?>" onclick="clickclear(this, '#" onblur="clickrecall(this,'#')" class="search_box"/>
<input id="box" type="image" name="submit" src="images/search.png" class="search_button" />
</form>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Instead of using display: inline on your <li>s, try floating them, like this:
#cfnavbar ul li { float: left; }
You shouldn't nest block-level elements (like your search form div) within inline elements, as it can cause unexpected effects (and isn't valid), and floating each <li> will still keep them all horizontally in the same "row," which is the effect you were probably looking for.
This fixed the issue for me in Chrome. You may have to adjust a couple other things to account for the float effect, but overall it should be an improvement.
Try inserting this css: .searchform{float:right;}
In fact .searchform{float:left;} is good too
From what I can tell by going to the actual site, there are two things amiss. How and why, I do not know. First, you need to add width:100% to the containing <ul>. This will enlarge it enough to hold the search box. Second, you need to change the padding attribute of the .searchform from padding: 0 210px; to padding: 0 0 0 210px;.
Those two fixes should fix it.
Related
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
Ok so obviously I'm doing something wrong. Basically I'm trying to create a vertical navigation bar at the top of my page, to the right of a picture.
It should look like this:
Home Resume Contact Me
Somehow it keeps ending up like this:
Home Resume
Contact Me
Can you guys take a look and help me out? This is my first website. Thanks!
Here's my code:
HTML
html {
background-color: #ffffff;
}
img {
width: 20%;
float: left;
}
#menu {
width: 550px;
height: 35px;
font-size: 55px;
font-family: Courier, Serif;
text-align: center;
float: right;
margin-right: 300px;
margin-top: 50px;
}
#menu ul {
height: auto;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000000;
}
#menu a:hover {
color: #224466;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Tyler Tilton</title>
</head>
<body>
<div id="menu">
<ul>
<li>Home
</li>
<li>Bio
</li>
<li>Contact Me
</li>
</ul>
</div>
<img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" />
</body>
</html>
Your code is a bit messy. The issue lies mostly in your #menu class. Your width is too small, you're text is too big, you have unnecessary margins and floats added. Remove all of that or adjust it and your list will align horizontally:
#menu {
/*width: 550px;*/ //too small for text size
height: 35px;
/*font-size: 55px;*/ //to big for width size
font-family: Courier, Serif;
text-align: center;
/*float: right;*/ //not necessary, at least in your demo, pushing text off screen
/*margin-right: 300px;*/ //not necessary, at least in your demo
}
FIDDLE
I think it is the font-size in #menu. Try reducing the font-size to 40px in #menu. It should bring them in one line.
Hope it helps!
I am learning html/css and have the following issue when aligning the "navigation menu" to the left. There's a small gap (see the pic below with a question mark)
can someone tell me how to remove the gap on the left side?
Here is my html/css code
<!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>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 200px;
width: 800px;
background-color: #CCC;
}
#navi {
height: 50px;
background-color: #036;
width: 800px;
margin: 0px;
padding: 0px;
}
ul {
}
#content-area {
height: 400px;
width: 800px;
background-color: #FFC;
}
#footer {
height: 100px;
width: 800px;
background-color: #000;
}
h2 {
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 50px;
}
h3 {
color: #FFF;
text-align: center;
padding-top: 10px;
margin: 0px;
}
p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
padding: 10px;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0px;
}
li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
font-size: 12px;
margin-top: 10px;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
</div><!--navi end-->
<div id="content-area"><p>Isn't saw evening shall open them had behold thing said evening i herb. Yielding kind second night image. Grass void green. Make Man given replenish brought. Spirit them seed fifth for living said his. Man abundantly.<br /><br />
Sixth yielding saying. Make female said they're night from fourth you'll make signs be. Our. Earth from. Replenish form living grass tree creepeth own. Had rule land from living, replenish appear the their days shall bearing waters moving seas living you, forth fourth.<br /><br />
Sixth whose stars i a. Creeping sea second above beast living signs created had first, face male dry our a his.</p></div>
<!--content area end-->
<div id="footer"><h3>This is the Footer</h3></div><!--footer end-->
</div><!--wrapper end-->
</body>
</html>
Apply padding:0; for your ul style.
ul {
list-style-type: none;
margin: 0px;
padding:0;
}
The space is being applied from the default user agent style sheet.
You can remove it by explicitly setting padding, margin of <ul> to 0.
It's a common practice to override it throughout the document like
*{
margin:0;
padding:0;
}
Demo
Please check this
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
Add
ul{
padding:0;
}
This will solve this issue. In general, you can use the following at the top of your CSS file:
*{
padding:0;
margin:0;
}
If you use this snippet at the top of your CSS, these problems won't occur and default padding etc. vary from browser-to-browser. So this will make it more consistent.
I can't see where you are using CSS position property? This is quite helpful. Also you can use these resources:
CSS Box model
CSS Padding
CSS Margin
CSS Positioning
more CSS Positioning
You can use the 'Try it yourself' option to see it in real action. It's helpful and a good practice to set to zero all paddings and margins at the beginning at your code, like this:
body{
padding:0;
margin:0;
}
I would suggest you to avoid floating and use:
display: inline-block;
also you should give your ul id and apply the css settings to that #ulid >li this way you avoiding the rest of your li to get the menu rules.
Also I will recommend using some reset code as suggested in other answers so your CSS wont include the default browser CSS rules.
here are my modifications:
#ulmenu > li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
display: inline-block;
line-height: 50px;
padding-left: 10px;
padding-right: 0px;
margin: 0px;
}
#ulmenu{
margin:0px;
padding:0px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul id="ulmenu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
I just ran into the same issue and all the paddings and margins were zero already, after much trawling through the inspector, I noticed there was text-indent on the li
li{
margin:0;
padding:0;
text-indent:0;
}
Fixed my issue.
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
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>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/
I want to create a drop down menu but I faced some problem:
Actually I want to create it without making <ul> tag inside the <li> tag
so the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a></li>
<ul><li><a>Coffee 2</a></li></ul>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
and the css code :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
You can see that Coffee 2 is not dropdown it should be with coffe menu please help me
without making the <ul> tag inside the <li>.
jsbin link : http://jsbin.com/evasof/1/edit
Here you go:
<ul>
<li class="dpdwn"><a>Coffee</a><div><a>Coffe 2</a></div></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
extra css:
.dpdwn div{
display: none;
}
.dpdwn:hover div {
display:block;
}
Demo
But in my opinion you should use a ul inside that li.
Here's an example:
<ul>
<li class="dpdwn"><a>Coffee</a>
<ul>
<li><a>Coffe 2</a></li>
</ul>
</li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
That same extra css:
.dpdwn ul{
display: none;
}
.dpdwn:hover ul {
display:block;
}
Demo2
Assuming your HTML structure above, we can see that when we try and validate it at the W3C Validator that this structure is INVALID, and not accepted. You can see this from the provided screenshot below...
Beyond the fact that what you want is invalid markup, CSS-wise it is also impossible to handle the hover state in order to make your sub-menu appear. There is no selector in the current standard that allows you to select a sister sibling while hovering over a sibling.
My suggestion is to follow how it has been done for ages, what is valid markup, and how it will be for the foreseeable future, and nest the ul inside the li.
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a>
<ol><a>Coffe 2</a></ol></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
you can use <ol> tag within <li> tag see above example
You could use dl and dt and style them accordingly but I'm afraid at that point you're just trading one tag for another. As w/ the other answers, why are you trying to avoid using ul and li. Creating dropdown menus is something that there tags are very good at.
<dl>
<dt>Foo</dt>
<dt>Bar</dt>
</dl>