Can't get List to display inline? - css

I would prefer to keep the css for the list inline. Not in a separate CSS. Is it the way my id's are stacked? Any other comments would be greatly appreciated as well.
<!doctype html>
<html>
<head>
<title>My First Site</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container"><!--entire body-->
<div id="topbar"><!--css uses a #-->
<div class="fixedwidth"><!--.fixedwidth in css-->
<div id="logodiv">
<img src="logo.png" alt="site logo">
</div><!--logodiv-->
<div id="topMenuDiv"><!-- should this be the div id? or should it be in the ul?-->
<ul style="list-style-type:none";
display:inline;>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!--topmenudiv"-->
</div><!--topbar-->
</div><!--fixedwidth-->
</div><!--container-->
</body>
</html>

<ul style="list-style-type:none; display:inline;"> just simple typo error.

You have syntax error here :
<ul style="list-style-type:none";
display:inline;>
It should be like this :
<ul style="list-style-type:none; display:inline;">
CSS :
ul, ul li { list-style-type;none; display:inline-block; }

Related

Display the list element from right to left

I'd like to arrange the list element displayed from right to left,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
</div>
<script>
</script>
</body>
</html>
I tried to add class="pull-right" to ul element, but found that they were all right-alighned without formatting.
Should I adjust the padding of li one by one?
I want it shown as
- Javascript
- DOM
- BOM
- jQuery
Try this CSS code:
ul{
direction: rtl;
}
You are forgot to add bootstrap css cdn in your file. You can get bootstrap css from here.
Then you can use bootstrap grid. There is row class in bootstrap. It has 12 column. click here for understand grid concept.
pull-right is replaced with float-right.
Similarly pull-leftis replaced with float-left.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<ul>
<li>Javasript
<ul>
<li>DOM</li>
<li>BOM</li>
<li>Global Objects</li>
</ul>
</li>
<li>jQuery</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="col-sm-4"></div>
</div>
<script>
</script>
</body>
</html>
Update:- As per your question output is updated. In that, There could be multiple solutions come across. One of the solutions is you can use grid concept as I mentioned above. Identify the columns in which you would like to display content as I update in my code. Other than this you could use align-item as well of bootstrap. Other than this you can also use justify-content-center link.

Text stuck next to navBAR

I'm trying to view text under the navBAR, but it just appears straight next to the navBAR buttons. I've tried some margin properties in css, but nothing seemed to work.
Thanks in advance!!
<html>
<title>title</title>
<head>
<img src="img/logo.png">
<meta charset="uft-8">
<link rel="stylesheet" href="css/style.css">
<style>
.narBAR{margin:0 auto; width:1080px;}
.navBAR ul {padding:0px;}
.navBAR ul li {float:left;}
</style>
</head>
<body>
<body background="untitled.png">
<div class="navBAR">
<ul>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>
</div>
<div class="search">
<form action="file:///C:/Users/Amroo/Desktop/new%201.html/search.php">
<input type="text" name="search" placeholder="Search......"/>
<input type="submit" value="Search"/>
</form>
</div>
<h1>text</h1>
<img src="blog/img/mars.jpeg">
<h3>text</h3>
</body>
Your CSS has a wrong class .narBAR:
.narBAR{margin:0 auto; width:1080px;}
Also there are errors in your code. You can't have <img> in your <head> so place this <img src="img/logo.png"> in your <body>.
And use css background instead of <body background="untitled.png">.
For example:
body{
background-image: url(untitled.png);
}
Although your code should work fine you can get described issue due to images so set overflow: hidden for .navBAR
Something like this https://jsfiddle.net/kdmvxrmx/

how to display images inline using css in bootstrap?

<!DOCTYPE html>
<html>
<title> MyBLOG </title>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap_costumize.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="css/js/bootstrap.js"></script>
<script src="css/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="navbar-brand"> This is a Logo </div>
</div>
<ul class="nav navbar-nav pull-right" >
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_1.jpg" />
</div>
<div class="img">
<img src="img/blog_picture_2.jpg" />
</div>
</div>
</div>
</body>
</html>
this is the php code and this display the image top to bottom how can i display the images inline like from left to right?
im struggling also how to connect css selector in img and div hehe can sum1 pls elaborate the methods shoud i do thank you :)
Since your images are all wrapped in divs with .img class, write the following in your CSS.
.img { display: inline; }

how to use table environment for table properly

Being a html layman, I am stuck with creating a table properly.
I have created a minimal html and css to show you my problem.
As can be seen here, there is a huge gape between Heading and content (possibly due to cellpadding tag in table; but if I remove them, the Content # coloumns are too close). So, how can adjust the space properly?
My 2nd problem is about positioning of the td. I would like to have this three column(Content 1,2 & 3) to be equally spaced to span the content region, with space between them. Not like quenched to left side as it is now.
How can I do that?
The minimal code is:
trial.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trial</title>
<link rel="stylesheet" href="trial.css" />
</head>
<body>
<div id="content">
<h2>Heading</h2>
<table cellpadding="05" cellspacing="10" border="0">
<tr style="vertical-align:top">
<td style="vertical-align:text-top">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
<td>
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
<td>
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
</tr>
</table>
</div>
</body>
</html>
and trial.css:
body {
font : 100% "Times New Roman", Times, serif;
color : #0066cc;
background : #184470;
margin : 0;
}
#content {
background : #e4ecef;
padding : 0.0em 2.5em;
width : 62%;
float : right;
margin-right : 17%;
margin-left : 30%;
}
h2{
font-size : 200%;
color : #0066cc;
}
h3{
font-size : 125%;
color : #0066cc;
}
NB From net, possibly I want to do a div, and not table. But I am confused. Is this NOT the proper usage of table? Kindly advice.
I think you're probably better off using divs rather than a table. Updated your HTML slightly:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trial</title>
<link rel="stylesheet" href="trial.css" />
</head>
<body>
<div id="content">
<h2>Heading</h2>
<div class="row">
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
</div>
</div>
</body>
</html>
Then your CSS:
.row { clear:both }
.column { display:inline-block; width:33% }
Setting display:inline-block will make the divs display next to each other and I'm setting a width to be 1/3 of the total container. There's a good intro into this and other layout info here http://learnlayout.com/inline-block.html

child selectors- which one will be first and last and last-of-type?

I don't understand which one will be first-of-type, last-child and last-of-type?
<!doctype html>
<html>
<head>
<style>
:first-cild{color:green;}
</style>
</head>
<body>
<div>
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
<p> This is a paragraph</p>
</div>
</body>
</html>
Find out by trying them and see what happens!
:first-child
{
border:solid thin green;
}
ul:first-child
{
border:solid thin blue;
}
li:first-of-type
{
border:solid thin red;
}
li:last-of-type
{
border:solid thin orange;
}
<!doctype html>
<html>
<body>
<div>
<ul>
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
<p> This is a paragraph</p>
</div>
</body>
</html>

Resources