I just started making a website, and I don't understand why I can't bring part of it to align at the right. The code is provided below.
Code:
<!DOCTYPE html>
<html style="background-color: black;">
<head>
<title>My Portfolio</title>
<style>
#navigation-bar {
background-color: black;
color: grey;
font-weight: bold;
font-family: Script;
font-size: 25px;
}
</style>
</head>
<body>
<div id="navigation-bar">
<table>
<tr>
<th><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></th>
<th>Home</th>
<th>About Me</th>
<th>Languages</th>
<th>Previous Work</th>
<th><a style="text-align: right;" href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></th>
</tr>
</table>
</div>
</body>
</html>
So obviously I just started coding this, but I am trying to get the last table header tag to be aligned to the right. But the output just shows it right next to the 5th table header tag. How can I make this specific table header tag go to the right?
Instead of using your navigation-bar items as <table> and <th>, better approach would be to use list items using <ul> and <li> tags.
Using li:last-child with float: right like below will solve your problem.
Please follow the below code snippets:
li {
display: inline;
float: left;
}
li:last-child{
float: right;
}
a {
display: block;
padding: 8px;
}
<ul>
<li><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></li>
<li>Home</li>
<li>Languages</li>
<li>Previous Work</li>
<li>An Amazing Website</li>
</ul>
Please refer to Horizontal navigation bar for more details.
Related
So I've just started with HTML/CSS, and I decided to start with something simple, like a nav bar. But the thing is all the tutorials online only go up to this point (below code) and completely ignore how to put a space between each list item. I've tried adding width, but it makes an uneven space. Could someone please show me how to do this? Thanks!
Here's my code; a working model is here
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bannercontent">
<ul id="banner">
<li id="bannerlinks"><a id= "links" href="#">What We Do </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Pricing </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Contact Us </a></li>
<li id="bannerlinks"><a id= "links" href="#"> Wholesale</a></li>
</ul>
</div>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent{
font-family: 'Quicksand:300';
text-align: center;
font-size: 25px;
}
#banner{
list-style-type: none;
margin: 0;
padding: 0;
}
#links{
text-decoration: none;
}
#bannerlinks
{
display: inline;
}
Use a margin value on li elements:
li { margin-right: 20px; }
This will add a space of 20px between all li elements.
DEMO
Please note: ids are supposed to be unique, classes are made for adding the same style to similar elements, so instead of <li id="bannerlinks"> it should be <li class="bannerlinks">. In your CSS you need to update #bannerlinks to .bannerlinks.
I will second the concept of class usage over id.
For the purpose of your question, I did not change that, but was able to get results using a padding on your bannerlink elements:
#bannerlinks
{
display: inline;
padding: .5em;
}
You can tweak the number to set spacing as wide as you want, for example 5em forced it to multiple lines in the JSFiddle window.
Im really new to web design and i need to create a simple website for a class. For some reason no matter what i try my unordered list wont float right. please help! my unordered list will only stay on the left side of the page for some reason.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title> PhiladelphiaEagles.com - Summary Page </title> <link href="style.css" rel="stylesheet">
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page <h2>
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
<footer>
</footer>
</body>
</html>
This is my css
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:right;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
float:right;
border: 1px solid blue ;
float: right;
}
li:link {color:green;}
li:visited {color:green;}
li:hover {color:red;}
li:active {color:yellow;}
Alright, so there are a couple things going on you may want to change :D
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
Notice you have
width:910px;
This will change the entire webpage to only take up 910 pixels of your browser window. You haven't aligned the body with the rest of the window so the whole thing stays left.
To fix this you can do a couple things, one solution is to change width:910px; to width:100%;
Another solution is to center your body, you can do this by adding the two following lines to the body{} css block
margin-left:auto;
margin-right:auto;
There are several other things going on in your page that need some looking into, such using the deprecated align="center" along with your css, but one step at a time. You're doing great, keep on chugging along!
Check this FIDDLE
Just give your ul a <ul class="right">
Then in CSS
.right {
float: right;
width: 100px;
}
It's floated to the right already!
it says it in your css twice!
ul {
float:right;
border: 1px solid blue ;
float: right;
}
first you need to change that to
ul {
float:right;
border: 1px solid blue ;
}
second maybe you want the li's floated right?
in this case it's a bit different:
ul li{
float:right;
}
but this will put your ul underneath the figure element!
In conclusion: Your ul is already floated to the right, reading from your css, but on a page it's hard to see because the figure element that contains an image will not let ul to be all the way on the right side of the page.
I think the problem is width and float,
i just rewrite the code....
html code like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> PhiladelphiaEagles.com - Summary Page </title>
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page </h2>
<div class="leftside">
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
</div>
<div class="rightside">
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
</div>
</body>
</html>
css like
<style type="text/css">
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:left;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
border: 1px solid blue ;
float: right;
}
.leftside { float:left; width:400px;}
.rightside{float:right; width:400px;}
</style>
Try this code...
I'm trying to make a horizontal navi menu.
I want to get the logo and then the parts of the menu but the inline doesn't work.
I wanted the images above the text so I used a table to get this, but this broke the inline effect.. I'd be greatful for any help
<html>
<head>
<meta charset="utf-8">
<title>TechSocket</title>
<style>
html, body {
width: 100%;
height: 90%;
}
body {
background-color: #000;
}
#nav {
display: inline;
background-color: #CF6;
position: fixed;
padding: 1%;
width: 97%;
}
ul {
diplay: inline;
list-style-type: none;
margin: 0;
padding: 0%;
}
#nav li {
display: inline;
}
#logo {
padding-left: 0%;
}
table {
border-spacing: 25px;
}
</style>
<script>
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a id="headIMG" href="#"><img id="logo" src="100-Beanie-Drive-Logo-250.jpg" width="250" height="100"/></a><li>
<li>
<table>
<tr>
<td><img id="text1"src="mouse.png" width="50" height="50"/></td>
<td><img id="text2" src="cam.png" width="50" height="50"/></td>
<td><img id="text3"src="cloud.png" width="50" height="50"/></td>
<td><img id="text4"src="clock.png" width="50" height="50"/></td>
</tr>
<tr>
<td>Mouse</td>
<td>Camera</td>
<td>Cloud</td>
<td>Clock</td>
</tr>
</li>
</ul>
</div>
<div id="main">
</div>
</body>
</html>
Try floating it to the left, like so:
#nav li {
float: left;
}
You probably don't need to have this line for your ul
diplay: inline;
Alternatively you can use display:inline-block, which might suit your needs better.
li elements are block elements so inline probably doesn't work with them, especially when they have other elements inside them. I'm just guessing though, never actually tested it.
As for floating, well personally I'd be against it. I've always found it to cause issues when not used properly. That said, it is a possible fix.
I have a navbar right under the title to the site, but I want to be line up the first and last items in the navbar with the beginning and end of the Title. I don't have a live preview, but I attached an image. I can get it to line up in one browser, but when I open it in the other, its off again. Is there an easy way to line the text up so it works for everything? thank you
HTML:
<body onload="play()">
<div class="heading">UPRISING</div>
<div class="container_12">
<div id="topnav" align="center">
<ul id="list-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>TRAILER</li>
<li>STILLS</li>
<li>NEWS</li>
<li>CONTACT</li>
<!-- <li>DISTRIBUTION</li> -->
</ul>
</div>
<!-- START OF CONTAINER -->
<div class="trailer">
<img id="imgHolder" />
</div>
</div> <!-- END OF CONTAINER 12 -->
CSS:
#topnav li {
margin-right: 110px;
}
#topnav li:nth-last-child(1) {
margin-right: 0px;
}
You can work with text-align: justify
See a demo
This is a kind of problem which call for good old tables.
<table id="list-nav">
<tr>
<td>HOME</td>
<td>ABOUT</td>
<td>TRAILER</td>
<td>STILLS</td>
<td>NEWS</td>
<td>CONTACT</td>
</tr>
</table>
The widths will be evenly distributed problem solved.
Or...
#list-nav li:last-child { text-align: right; }
Set a fixed width for your list items. Align the first one to the left and the last to the right, all those in the middle should be center-aligned. This way, you're not leaving yourself at the mercy of the font renderer.
Update with CSS:
#topnav li {
text-align: center;
width: Xpx; /* X is total width divided by number of list items */
}
#topnav li:first-child {
text-align: left;
}
#topnav li:last-child {
text-align: right;
}
I am trying to fix a horrid nested table layout for a site. The page will have a variable number of elements that leverage Google charts. Instead of complex spaghetti code that tries to lay things out inside of table cells I want to use a horizontal UL so the content blocks will lay out cleanly regardless of the charts involved. The problem I am having is the Google charts components leverage tables. When a table element exists anywhere inside a LI the LI gets moved to the next line (assuming because table elements by default have a newline before and after).
I have tried the various display modes for the table with no luck. Is this a lost cause?
Example HTML code to illustrate the issue:
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
}
</style>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Set display: inline-block; on your LI elements; that should do it nicely. It doesn't really work in Firefox 2, but nobody uses Firefox 2 anymore. You'll need to specify a doctype to get it to work in IE.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#navlist li {
display: inline-block;
zoom: 1;
*display: inline;
list-style-type: none;
vertical-align: middle;
}
</style>
</head>
<body>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Well, this seems too easy to be true, but I tried it and it worked in FF. IE still displays half the tags on the second line, but it could be a simple fix. All I did was add float: left to the styles for the three tables.
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
float: left;
}
</style>
<ul id='navlist'>
<li>TEST1</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue; float: left;'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green; float: left;'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>
Yes it's because tables are by default block elements (well, actually display:table but it acts in a similar manner). If your tables are very simple then adding display:inline to them may work.
Otherwise your best bet is to float each list element to the left:
#navlist li {
float: left;
list-style-type:none;
}
I'd suggest applying a set of drop-down menu type styles to your display, this does carry the disadvantage of complicating your mark-up slightly, but makes it easier to hide/display the tables at appropriate times. It also lets you have larger than one-row/one-cell tables.
If you need them to be visible at all times, though, then this approach isn't applicable. Regardless, I've posted a demo of my suggestion on jsbin.com