List aligned the wrong way - html

This is my HTML
<div id="footer">
<div id="footer_content">
© 2012 Company, Inc.
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</div>​
This is my CSS
/* FOOTER */
#footer {
position: relative;
margin-top: -60px;
text-size:12px;
height: 60px;
clear:both;
background-color: blue;
line-height: 60px;
text-align:right
}
#footer_content {
width: 940px;
margin: 0 auto;
}
#footer ul {
list-style: none;
position: absolute;
top: 0px;
}
#footer ul li {
float: left;
margin-right: 5px;
}
#footer ul li a {
font-weight: bold;
margin-right: 5px;
text-decoration: none;
}
#footer ul li a:hover { }​
Currently the copyright is on the right and the links are on the left. It should be the other way around. What adjustment are you meant to make to move them?


I pretty much agree with what Space Beers says but there are ways to improve this.
HTML:
<div id="footer">
<div id="footer_content">
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
<div class="copyright">
© 2012 Company, Inc.
</div>
</div>
</div>​
CSS:
#footer {
position: relative;
margin-top: -60px;
text-size:12px;
height: 60px;
background-color: blue;
line-height: 60px;
text-align:right
}
#footer_content {
width: 940px;
margin: 0 auto;
}
#footer ul {
float:right;
list-style: none;
}
#footer ul li {
display:block;
float: left;
margin-right: 5px;
}
#footer ul li a {
font-weight: bold;
margin-right: 5px;
text-decoration: none;
}
#footer .copyright{
float:left;
}
This should be completely browser compatible.


Put your company info in a containing div and float that left.
<div id="footer">
<div id="footer_content">
<div class="company_info">© 2012 Company, Inc.</div>
<ul>
<li>Contact</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</div>​
.company_info{
float: left;
}


use display:inline;in li class

Related

what attribute do i have to use in my css to not have the underlining in my sidebar navigation menu?

hey guys i want my sidebar nav menu to not have the underlining i tried it with the text-decoration:none attribute and the list-style-type:none but nothing worked. everything worked the way i wanted it so far but i am not finding any solution to how to make the underlining of the link disappear. can someone help me out please?
#sidebar {
background-color: f1f1f1;
position: fixed;
width: 200px;
height: 560px;
float: left;
margin-left: 5px;
top: 60px;
}
#sidebar_wrapper {
background-color: f1f1f1;
position: fixed;
width: 200px;
height: 560px;
float: left;
top: 60px;
}
#sidebar ul {
font-family: monospace;
font-size: 25px;
list-style-type: none;
text-decoration: none;
}
#sidebar li {
font-family: monospace;
list-style-type: none;
text-decoration: none;
}
#sidebar ul li ul li a {
list-style-type: none;
text-decoration: none;
}
#sidebar_li ul {
<div id="sidebar">
<div id="sidebar_wrapper">
<ul>
<li>HTML</li>
<div id="sidebar_li">
<ul>
<li>Bilder
</li>
<li>Tabellen
</li>
<li>Text
</li>
<li>Videos
</li>
</ul>
</div>
<br/>
<li>CSS</li>
<div id="sidebar_li">
<ul>
<li>Einbinden in HTML
</li>
</ul>
</div>
</ul>
</div>
</div>

You could change the style of your a elements with text-decoration: none
#sidebar a:link {
text-decoration: none;
}
#sidebar a:visited {
text-decoration: none;
}
#sidebar {
background-color: f1f1f1;
position: fixed;
width: 200px;
height: 560px;
float: left;
margin-left: 5px;
top: 60px;
}
#sidebar_wrapper {
background-color: f1f1f1;
position: fixed;
width: 200px;
height: 560px;
float: left;
top: 60px;
}
#sidebar ul {
font-family: monospace;
font-size: 25px;
list-style-type: none;
text-decoration: none;
}
#sidebar li {
font-family: monospace;
list-style-type: none;
text-decoration: none;
}
#sidebar ul li ul li a {
list-style-type: none;
text-decoration: none;
}
#sidebar_li ul {
<div id="sidebar">
<div id="sidebar_wrapper">
<ul>
<li>HTML</li>
<div id="sidebar_li">
<ul>
<li>Bilder
</li>
<li>Tabellen
</li>
<li>Text
</li>
<li>Videos
</li>
</ul>
</div>
<br/>
<li>CSS</li>
<div id="sidebar_li">
<ul>
<li>Einbinden in HTML
</li>
</ul>
</div>
</ul>
</div>
</div>

How to move the text in li inside the #nav instead of changing the size of the block of the li

In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>

You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/

How can I make sure this stays centered, even when zoomed out or in?

I'm having problems with the navigation bar on my website. All I want is for it to say where it is, right under the logo/slogan- even when you zoom out or in in your browser.
Here's the HTML:
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</body>
What I want it to look like all the time: http://i.imgur.com/RWXYTu0.png
Zoomed Out: http://i.imgur.com/BoJV0WB.png

Hope this helps.. Little modifications in Css
#coolMenu {
text-align:center; /*Added */
width:100%; /*Added */
}
#coolMenu > li {
display: inline-block; /*Added */
}
Removed Css
#coolMenu {
float: left;
padding-left:550px;
padding-right:500px;
position:absolute;
}
#coolMenu > li {
float: left;
}

I added wrapper to contain all of them and just centered it with margin: 0 auto;
<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#wrapper {
margin: 0 auto;
width: 500px;
}
#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
</div>
</div>
</body>

to center anything use
margin: 0 auto
In your case, set this in #body
#body {
margin:0 auto;
}
It still isn't center as expected right? because of your float: left in the li, replace with display: inline-block
#coolMenu > li {
display:inline-block;
}
Here is the final demo: http://jsfiddle.net/jbwsT/1/

They're not centered correctly. Use absolute is a bad way to center dynamic text. Is better to use only on divs with a exact value.
The best form:
Use display:inline-block in the texts.
And in the ul, use text:align: center
JSFIDDLE
ONLINE DEMO

Fixed below.
Some changes include:
the 50% relative position trick for the nav.
simplified mark-up.
auto left/right margins for centering.
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color: #E6E6E6;
font-family: Lato,Tahoma,Arial,Sans-Serif;
}
#header {
text-align: center;
padding-top: 100px;
}
.container {
width: 940px;
margin: 0 auto;
clear: both;
}
.centered {
text-align: center;
}
#coolMenu,
#coolMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#coolMenu a:link {
color: #FFFFFF;
}
#coolMenu {
float: left;
position: relative;
left: 50%;
}
#coolMenu > li {
float: left;
position: relative;
left: -50%;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color: #000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" class="container centered">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
<div id="primary-nav" class="container centered">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
</div>
</div>
<div id="body" class="container">
<h1>
Test header
</h1>
<p>
Test paragraph
</p>
<p>
Test paragraph
</p>
</div>
</body>
</html>

the only thing that works for me.
margin: 0 auto;
width: fit-content;
on your element

It worked for me, hope it work for you
add at the end of your code (if you want just center the page delete the first row "transform: scale(0.8)"
in CSS editor
body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}

"Clear:Both;" not clearing floated divs

I have an issue whereby my div .gridContainer (black background) is not expanding with the body div but is for the footer. From what I can tell it should just be a simple fix using clear:both; in css3 on an empty div.
...however this doesn't seem to work! I've had a play around but can't seem to figure the issue out any chance somebody could clue me in as to whats happening here? (using chrome).
<body>
<div class="gridContainer clearfix">
<div id="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>VIDEOS</li>
<li>PHOTOGRAPHY</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="body">
<div id="CALogo"><img src="Images/CALogoLarge.png" alt="CreativeAbyss"></div>
</div>
<div id="footer">
<div id="FooterLeft">©2014 Creative Abyss. All Rights Reserved.</div>
<div id="FooterRight">Social Icons Here </div>
<div id="test"></div>
</div>
<div id="test"></div>
</div>
</body>
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
height: 100%;
}
#navigation {
float: left;
margin-left: 0;
width: 100%;
display: block;
height: auto;
padding-top:20px;
font-family: 'Open Sans', sans-serif;
font-size:13px;
font-weight:200;
}
ul li {
display: inline;
list-style-type: none;
margin-left: 35px;
marginright: 4px;
float:right;
color:#FFF;
}
ul a {
text-decoration: none; /* no underline */
color:#FFF;
}
ul a:hover{
text-decoration:underline; /* no underline */
color:#FFF;
}
#body {
margin-left: 0;
width: 100%;
display: block;
height: 50px;
clear:both;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
padding-bottom:10px;
}
#FooterLeft {
clear: both;
float: left;
margin-left: 0;
width: 48.9795%;
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-weight:200;
color:#FFF;
}
#FooterRight {
clear: none;
float: left;
margin-left: 2.0408%;
width: 48.9795%;
display: block;
}
#test{
clear:both;
height:1px;
}
#CALogo {
background-color:#039;
}
}

So for anyone interested I figured out what was going on... I was foolishly using the id of "body" which obviously already exists and was being toyed around with in the boiler plate... embarrassing.

fluid layout positioning divs

This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance

Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.

I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}