I am experimenting with following HTML code. It displays a paragraph and two buttons at the bottom (Back and Next).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<!-- stylesheet -->
<style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
<!-- to float left.Hopefully straightforward to understand -->
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
<!-- to float right. Hopefully straightforward to understand -->
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
<!-- for a in li. Hopefully straightforward to understand -->
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:centre; <!-- this isn't effective!-->
text-decoration:none;
}
</style>
</head>
<!-- mainbody-->
I want the text in to be centrally aligned but it doesn't. I have used text-align:centre to set style of . What am I doing wrong?
<body>
<p>
1. Some Para.
</p>
<ul id="navigation" >
<!-- The Back and Next should centre up but they are left aligned -->
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
</body>
</html>
You need to use text-align: center, rather than 'centre'.
ul#navigation li a {
display: block;
padding: .2 em;
color: #fff;
width: 5em;
background-color:#00f;
text-align: center;
text-decoration: none;
}
centre;<-- wrong word... it's center
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:center;/*centre;<-- wrong word... it's center */
text-decoration:none;
}
<p>
1. Some Para.
</p>
<ul id="navigation" >
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
#navigation {
list-style-type: none;
border-top: 1px solid red;
margin: 0;
padding: 0;
}
ul#navigation .left {
float: left;
width: 5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float: right;
width: 5em;
margin: 10px 0 0 0;
}
#navigation ul li {
color: #fff;
width: 100%;
background-color: #00f;
text-align: center;
text-decoration: none;
}
<p>1. Some Para.</p>
<ul id="navigation">
<li class="left"> Back
</li>
<li class="right"> Next
</li>
</ul>
Related
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
padding:0;
margin:0;
}
aside,article,header,nav,footer,section,div,ul {
display:block;
margin:0;
padding:0;
}
html {
background:#F1C4F2;
}
body {
width:1000px;
background:#FF53A9;
margin: 0 auto;
font-size:12px;
}
#header{
width:98%;
background-color:#F081F3;
padding:1%;
color:white;
font-size:1.2em;
}
#nav {
width:98%;
background-color:#C043AA;
font-size:1.1em;
padding:1%;
}
ul{
margin:0 auto;
width:100%
}
li {
list-style:none;
float:left;
margin-right:8%;
color:white;
}
OR
/*
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
*/
</style>
<body>
<div id="header">
some.com
</div><!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div><!--NAVIGATION-->
<div id="footer"> </div> <!--FOOTER-->
</body>
</html>
I have 'UL' tag inside a 'NAV' <DIV>,for my navigation i have created a 'LI' items and floated it and when i apply ""margin:0 auto"" it doesn't apply.
Even when I use ""display:inline-block""(this section is commented out) to 'LI'.Js
Fiddle link: jsfiddle
Try to add text-align:center for your <ul> and remove float:left from <li> and use display:inline-block; Demo
ul {
margin:0 auto;
width:100%;
text-align:center;
}
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
This will center your ul and i've also added overflow:hidden so that the floats are contained (the li).
ul {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
You were applying margin:0px auto to a 100% width element which wont work.
The result: fixed
Firstly, the ul is centered but it's 100% wide so I am assuming that, in fact. you want the list items centered in the ul.
So, remove any floats, set text-align:center on the ul and make the li display as inline-block
* {
padding: 0;
margin: 0;
}
html {
background: #F1C4F2;
}
body {
width: 1000px;
background: #FF53A9;
margin: 0 auto;
font-size: 12px;
}
#header {
width: 98%;
background-color: #F081F3;
padding: 1%;
color: white;
font-size: 1.2em;
}
#nav {
width: 98%;
background-color: #C043AA;
font-size: 1.1em;
padding: 1%;
text-align: center;
}
ul {
background: blue;
}
li {
list-style: none;
display: inline-block;
color: white;
margin: 0 2%;
}
<body>
<div id="header">
some.com
</div>
<!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div>
<!--NAVIGATION-->
<div id="footer"></div>
<!--FOOTER-->
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
I have a really annoying issue. Im trying to create a page with a full background image which resizes and fills the browser screen. Currently its half working but for some reason have to scroll like 20-30px down. Which the user should not be able to do.
This is the page source:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>
<script type="text/javascript">
/** var images = [
"/content/images/bghome.jpg",
"/content/images/background.jpg"
];
var index = 0;
$.backstretch(images[index], { speed: 500 });
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>
<div class="menu-link">
<ul>
<li>
home
</li>
<li>
profile
</li>
<li>
portfolio
</li>
<li>
news
</li>
<li>
current projects
</li>
<li class="on">
awards
</li>
<li>
contact
</li>
</ul> </div>
<div id="left-sidebar">
<div id ="logo">
<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p>
</div>
<div id ="foot">
<ul>
<li>
Privacy
</li>
<li>
Sitemap
</li>
<li class="last">
Terms & Conditions
</li>
</ul>
© 2012 SH Structures. All rights reserved. <image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p>
<br><br>
</div>
</div>
</div>
</html>
Css:
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#container {
height: 100%;
height: auto !important;
background: url("left-sidebar-back.gif") repeat-y top left;
}
div#main {
overflow: auto;
padding-bottom: 100px;
}
div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}
div#body {
overflow: hidden;
height: 100%;
}
div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;
height:100%;
color:White;
}
div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;
color:White;
}
div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}
div#footer {
background: #ba6f19;
border-top: 1px solid #000;
position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}
div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%;
margin-left:auto;
margin-right:auto;
background:black;
}
.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}
.menu-link ul {
padding:0px 0px 0px 20px;
}
.menu-link ul li
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}
.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block;
text-align:center;
}
.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer;
}
.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}
/** Side Menu **/
.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.sideMenu h4{
display:none;
}
/** Footer **/
#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}
#foot li a
{
padding: 10px 0px 10px 0px;
color:#fff;
text-decoration:none;
}
Am i missing something obvious? thanks
It's hard to tell exactly what you're asking, but if all you want to do is disable scrolling the page, you first need to add a <body> tag and give it the following style properties:
<body style="overflow:hidden;">
<!-- Page contents -->
</body>
$('body').on('touchmove', function (event) {
event.preventDefault();
});
this might work
I am using the following codes to create a layout, the issue is, the navigation menu won't center, the text centers, but the rest of the navigation bar doesn't.
Here is my HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Test</h1>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="content">
</div>
<div id="footer">
<p>Test</p>
</div>
</div>
</body>
</html>
And here is my CSS:
/***** Body *****/
body {
font-family: arial, helvetica;
text-align:center;
}
div#container {
}
/***** Navigation Menu *****/
ul#navigation {
margin: 20px;
padding: 0;
list-style: none;
width: 525px;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
text-decoration:none;
padding: 5px 0;
width: 100px;
background: #485e49;
color: #eee;
float: left;
text-align:center;
}
ul#navigation a:hover {
background: #FF00FF;
text-align:left;
}
ul#navigation a:active {
text-align:right;
}
Change your ul#navigation to
ul#navigation {
padding: 0;
list-style: none;
width:400px;
margin:0 auto;
}
Example: http://jsfiddle.net/jasongennaro/3WS7B/
What happened is your width was off. Once that was fixed to 400px, applying margin:0 auto worked.
You can add this to the ul#navigation css to center it:
margin:0 auto 0 auto;
Alternatively:
margin-left:auto;
margin-right:auto;
Can anyone plese explain to me why my image in the footer css doesn't appear as the background? I have both a small unordered list that serves as a navigational menu and the footers main content floated to the left and right respectively, I feel like they are obstructing, however I figured their default value would be transparent.... Any hints please? I am new to this.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>title</title>
<style type="text/css" media="screen, print, projection">
body{
background: #DAA520;
}
#wrap {
width:1000px;
margin:0 auto;
background: white;
}
#alldivs{
}
#header{
background: blue;
height: 150px;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:white repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 780px;
padding: 10px;
}
#sidebar{
background: gray;
float: right;
padding: 10px;
width: 180px;
}
#footer{
width: 1000px;
height: 150px;
clear: both;
background-image:url(linktopicture.jpg);
}
#footernav li{
display: inline;
}
#footernav a:link,
#footernav a:visited {
color:gray;
text-decoration:none;
text-transform:uppercase;
padding-left: 15px;
}
#footer ul{
float: left;
width: 500px;
margin: 0px;
padding-top: 35px;
padding-bottom: 3px
text-align: left;
}
#footercontent {
width: 490px:
float: right;
text-align: right;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><img src="linktopicture" alt="text"/> </div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
main content
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<ul id="footernav">
<li id="footernavhome">HOME</li>
<li id="footernavservices">SERVICES</li>
<li id="footernavcontact">CONTACT</li>
</ul>
<div id="footercontent">
<p>
blahh
</br>
blahhh
</p>
</div>
</div>
</div>
</div>
</body>
</html>
You need to contain and clear your floats in the footer, which will allow the background to appear.
Here's an overly-simplified example from your original markup:
<div id="footer">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
<!-- Here's the Magic -->
<br style="clear: both; display: block;" />
</div>
There are many ways to clear floated elements, but arguably the most common and easiest to implement is the clearfix approach — or the updated and highly-recommended micro clearfix method.
An example of using a "clearfix" would become:
<div id="footer" class="clearfix">
<ul id="footernav">
...
</ul>
<div id="footercontent">
...
</div>
</div>
if you do not want a full break, add:
<span class="cleaAll"></span>
To your html where RJB said, add:
.clearAll {
display:block;
height:1px;
}
To your css,
Hope it helps.