Display:inline not working - html

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.

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;
}

HTML/CSS Un-ordered list Center Alignment

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.

How to give equal space to two elements?

I am creating online test application my problem is if options are in different length means alignment was not correct.for example
1.Test Question?
a).op12 b).op234
c).op145 d).op345
Here You can see b) and d) are not align proper i know this was simple question but i am stuck in this problem.how can i use css or anything else.
mycode is
<div style='padding-left:1em'>a).op12 b).op234</div><br/>
<div style='padding-left:1em'>c).op145 d).op345</div>
if i am using separate tag for each option means it display like
a)op12
b)op234
c)op145
d)op345
can any one give me the idea to solve this
Thanks in advance
I believe you should use Table instead of div
Question
<table width="300px" cellpadding="5" cellspacing="5">
<tr>
<td>a).op12</td><td>b).op234</td>
</tr>
<tr>
<td>a).op12</td><td>b).op234</td>
</tr>
</table>
DEMO
The trick is to use a wrapper div of same width for all options.
Use this code
<div class="opt-row"><span>a).op12</span> <span>b).op234</span></div>
<div class="opt-row"><span>c).op145</span> <span>d).op345</span></div>
& CSS:
.opt-row{padding-left:1em;}
.opt-row span{display:inline-block; width:100px;} /*Change this with accordingy */
Here is DEMO
i think you should use <ul> in this case, <li> can be easily managed with css according to your purpose.
here's an example: JSFiddle
i hope this will help you
As addition to Manwal'w advice:
If you need a list, Use list. Div is meaningless.
While using HTML - the HTML is the content, the css is for design, the js is for behavior.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bla!</title>
<style type='text/css'>
li { min-width:10em; list-style-type: lower-alpha;}
li.odd { float:left; }
</style>
</head>
<body>
<ol>
<li class='odd'>op12</li>
<li class='even'>op234</li>
<li class='odd'>op145</li>
<li class='even'>op345</li>
</ol>
</body>
</html>

Inline CSS code is not being read

Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-)
I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.
Another question. Should I open a New question? This question refers to the original block of code.
My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>
Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
</UL
</BODY>
</HTML>
This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
</style>
</head>
<body>
.ul {
margin:0;
padding:0;
color:#ff0000;
}
.li {
display:inline;
padding:0;
margin:0;
color:#000099;
}
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>
First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:
1. Putting your CSS in the right place
Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.
To fix this, simply move it all into that style element in your head:
<head>
<style type="text/css">
/* Styling goes here. */
</style>
</head>
(For rendering purposes, styling should never be declared outside of the document's head either.)
2. Fixing your selectors
Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.
To target your ul and li elements, you'd simply remove the .:
ul { ... }
li { ... }
3. Validating your HTML
On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:
<li>...</li>
To:
<li>...</li>
you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible
Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.
That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.
The correct way to do inline styling is to use the style attribute in your markup:
<ul style="margin:0; padding:0; color:#ff0000;">
The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.
What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.
BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.
Finally, the recommended practice is to use external style-sheets, using the HTML link tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
Here is your original code with the embedded styling in the correct place:
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
ul {
margin:0;
padding:0;
color:#ff0000;
}
ul li {
display:inline;
padding:10;
margin:0;
color:#000099;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>

How to make the bullets in my unordered list not underlined

So I am just learning CSS in my Web Programming 1 class, and the exercise is teaching us about class selectors, so our teacher wants us to make a page which has an unordered listed with only some of the listed items to be underlined. However, when I do this, my bullets in the lists get underlined aswell, where as in the page he wants us to make, they are not.
I've included my code below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.underline { text-decoration: underline}
</style>
</head>
<body>
<h1> Solids </h1>
<ul>
<li class= "underline"> Tetrahedron </li>
<li> Pentahedron </li>
<li class = "underline"> Cube </li>
<li> Heptahedron </li>
<li class= "underline"> Octahedron </li>
<li class = "underline"> Dodecahedron </li>
<li class = "underline"> Icosahedron </li>
</ul>
<p> What's special about the underlined items.
</body>
</html>
You should give .underline class text-decoration css property:
li.underline{
text-decoration:underline
}
JSFIDDLE
Your code is fine, it must be a browser glitch. Actually, to make a browser display underlined bullets is not that easy. It would have to be something like this:
/* this will display underlined bullets. It can also be done in the markup without the second rule and adding an • in between the tags */
li.underline {
text-decoration: underline;
list-style: none;
}
li.underline:before {
content: "\2022";
}
The best solution was suggested by #Huangism in the comments. The markup would look like this:
<li><span class= "underline"> Tetrahedron </span></li>
<!-- and so on... -->
Still, that's a strange glitch. No browser I tested with your markup displays the bullets incorrectly.
I agree with, Huangism's answer. Adding the span element inside the <li> and making that underlined will solve you problem. This way you can colour and style the bullets without effecting the list itself.