HTML/CSS Un-ordered list Center Alignment - html

I am a first time HTML user and need help to center my current navigation bar:
http://i.stack.imgur.com/czpJr.jpg
The code for it is as follows:
<!DOCTYPE html>
<html>
<head>
<title>large background</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<!div class="navBar">
<ul>
<li><h2>ABOUT</h2></li>
<li><img src="ICON.jpg" width="60" height="60"></li>
<li><h2>MUSIC</h2></li>
</ul>
<!/div>
</body>
</html>
With the relevant parts of the external stylesheet in this image(couldn't get it to work as a code block - noob me):
http://i.stack.imgur.com/JaIah.jpg
Please help me work out to make this navigation bar appear in the center of the page, and not on the left. I have tried changing the float left in the CSS but all is does is make the nav bar appear vertically not horizontally, and it still appears on the left :(
Thanks,
Sam

to comment out HTML use this syntax (you're missing the dashes):
<div> this WILL show and be rendered </div>
<!--div> this WILL NOT show or be rendered </div-->
adding "float: left" to the li elements is forcing your elements to align to the left. To get the nav items to appear horizontally, use "display: inline-block;" instead. Also, you are using "align"... it shoudl be "text-align".
Example in codepen!
http://codepen.io/Drodarious/pen/bdmavb

U can center your element like this(see example below: with the text align center on the ul).
u could also, provide a width to the ul, for example 300px , and then add margin:0 auto; margin auto won't work on a block element without setting its width. or you should use inline-block;
(http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/)
Ps As h1 is a block element and a is an inline element the correct way is
<h1>This is a title</h1>
, when using the header.
Though because is a block element it will take up all available space, meaning, all list items will still be underneath eachother, so specify the space it should take.
header nav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
header nav ul li {
display: inline;
}
header nav ul li a {
text-decoration: none;
}
<html>
<head>
<title>large background</title>
</head>
<body>
<header>
<nav>
<ul>
<li>ABOUT
<li><img src="ICON.jpg" width="60" height="60">
<li>MUSIC
</ul>
</nav>
</header>
</body>
</html>
I suggest reading about: http://learnlayout.com/display.html
Hope this helps you a bit.

Related

how to put a list with and image and text above it, next to eachother

I am an absolute beginner with html5 and css, literally learned it since 2 days.
I am trying to have list with recipes. In this list I want the name of the recipe, the picture and a link to the actual recipe. I am trying to get this list next to each other together with the images, but whatever I try, the list stays on a seperate line per list item.
I put all the list items in an in html. in the css file I tried to put the list items inline by doing this:
.list-recipes ul li {
display: inline;
}
I also tried a lot of other things but nothing works, hope someone here can help me.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes</title>
<style>
.list-recipes ul li {
display: inline;
}
.list-recipes ul li p {
display: inline;
}
</style>
</head>
<body>
<div class="list-recipes">
<ul>
<li >
<p>Google</p>
Link
<img src="https://google.com/favicon.ico" />
</li>
<li >
<p>CSS-Tricks</p>
Link
<img src="https://css-tricks.com/favicon.ico" />
</li>
<li >
<p>Apple</p>
Link
<img src="https://apple.com/favicon.ico" />
</li>
</ul>
</div>
</body>
</html>
For the selector .list-recipes ul li to work, the list ul needs to be a descendant of an element with class list-recipes.
If you include block elements inside li you also need to make those elements inline, this is why I added the rule:
.list-recipes ul li p {
display: inline;
}

How to make a <div> or <a href="#"> to align center

I'm using the following code in body section.
<center>Get Started</center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
You can do this:
<div style="text-align: center">
Get Started
</div>
You can use css like below;
Get Started
You can put in in a paragraph
<p style="text-align:center;">Get Started</p>
To align a div in the center, you have to do 2 things:
- Make the div a fixed width
- Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
Center
</h4>
</body>
</html>
There's also a handy tag... whatever you put in between, gets centered.
Like so:
<center>
<a href..... whatever>
</center>
you can try this
display inline-block to make it fit width,
margin-left to make it move 50% away from left,
and transform translateX to make it center his position
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
In your html file:
Get Started
In your css file:
.hpbottom{
text-align: center;
}

DOCTYPE HTML causes unexpected issue with IE8 with inline li rendering

I'm working on a page where I want to show a menu (bunch of links), where the menu items are horizontally placed and positioned to the right side of the page (something similar to what you already see on the top of stackoverflow page when you are logged in).
The HTML looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">#import url(styles/style.css);</style>
</head>
<body >
<div class="test">
<!-- float right -->
<ul class="fr">
<li><img src="images/1.gif" alt="image 1"/></li>
<li><img src="images/2.gif" alt="image 2"/></li>
<li><img src="images/3.gif" alt="image 3"/></li>
</ul>
</div>
</body>
</html>
The "test" CSS class is as follows:
.test ul {list-style:none; }
.test li { display:inline;}
This shows up fine on Chrome and Firefox. The li items are rendered inline and to the right side of the page, all on one line.
However, on IE8, these elements are rendered one below the other on the right side of the page.
I started looking into what's causing this by removing one line at a time and realized that getting rid of the:
<!DOCTYPE HTML>
from that HTML page, makes this show up fine even in IE8. Does anyone know what's causing a problem when is present on that page?
Of course, this is just a trimmed down version of my page and I do want to use the in my page for HTML5 features, so just removing it doesn't seem like solution.
I guess that's the bug with display: inline in IE8. Try using:
.test li {display: inline-block; }

I want to have a title centered on the same line as two floats one to left and one to right

You misunderstood me in my previous message so I post a new with an example.
Assume the following that you float for example an image left and some div to the right containing for example which browser you use and date + time and some other things perhaps.
Now you want also to display a name for the company centered between these two floats on the same row. The text of the company in between should always be centered even when you make the browser width smaller.
In this example I can't make the text to be placed centered between the two floats.
It doesn't matter if I put the text in inline element or block element.
I have tried both. In this example I have a p tag.
It doesn't work to use text-align:centered when you have elements that are floating.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<style type = "text/css">
#imageone
{
float:left;
}
p#right
{
float:right;
}
div p
{
text-align : center;
}
</style>
</head>
<body>
<div style="background:red">
<p>My company</p>
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
</div>
</body>
</html>
This is relatively simple to do if any two of the elements are fixed-width. You can implement it by using position: relative on the containing element, and position: absolute on the children (the blocks to be aligned left, right, and center).
See this jsFiddle for an example.
You could put your company name after the floated elements in the html:
<body>
<div style="background:red">
<p id="right">2013-06-12 10:00:12</p>
<img id="imageone" src="img/die1.png" alt="photo" />
<p id="name">My company</p>
</div>
</body>
Adding margin 0 to p#right also ensures it will appear vertically centered with the other elements:
#imageone
{
float:left;
}
p#right
{
float:right;
margin: 0;
}
div #name
{
text-align : center;
}
}
See a fiddle here: http://jsfiddle.net/WDrVK/1/
Can you style the center element as margin: 0 auto;?
As in this example: http://bluerobot.com/web/css/center1.html

Display:inline not working

I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!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">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.