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
Related
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.
I want to add a border between the list items , I'm following a tutorial and in the video I typed the same exact code (I didn't include all the CSS code here). The problem is there is no margin or space between the first list item and second list item. There's also an extra border after the .
header li :first-child {
border-right: 1px solid #373535;
}
<!DOCTYPE <!DOCTYPE html>
<html lang= "en" >
<head>
<title> My Recipe </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/html5shiv.js"></script>
<!-- yolo this is my first project -->
</head>
<body>
<header>
<div class="Left">
<ul>
<li> Popular recipes </li>
<li>Whats New </li>
</ul>
</div>
<div class="Right">
<ul>
<li> Categories </li>
<li>Meal Ideas </li>
</ul>
</div>
<div id="logo">
<img src="images/chefs-hat.png"/>
<p>My recipes</p>
</div>
</header>
</body>
</html>
The result:
Try this css
header li *:first-child {
border-right: 1px solid #373535;
padding-right: 10px;
}
DEMO
css
ul {
list-style:none; /* will remove bullets and the space before the list will be gone as no bullet*/
}
li {
border-right:1px solid #000; /* add border as you like */
display:inline-block; /* to make it inline */
padding:20px; /* will decide space between border and content as per box model*/
}
Try moving the whitespace to inside the <a> tag ie.
<li>Popular recipes </li>
If you don't want the border on the second list item, then your CSS should be targeting <ul> not <li>. This will then try to target the first child of the <ul> tag.
header ul:first-child {
border-right: 1px solid #373535;
}
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 having a problem similar to the one described here (without a resolution):
IE7 float and clear on the same element
The following HTML renders as intended in Firefox but not in (both) IE7 and IE8:
<html>
<head>
<style>
ul {
list-style-type: none;
}
li {
clear: both;
padding: 5px;
}
.left {
clear: left;
float: left;
}
.middle {
clear: none;
float: left;
}
.right {
clear: right;
float: left;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="middle">5</li>
<li class="right">6</li>
<li>7</li>
</ul>
</body>
</html>
This is a form layout, and in Firefox the results appear like:
1
2 3
4 5 6
7
That's what I'm going for. In IE7 and IE8 however, the results are:
1
2 3 5 6
4
7
[Note: I don't want to float anything to the right because I want the fields on my form to left-align correctly, without a giant space in-between the floated fields to account for the parent container's width.]
Apparently I need a full clear, and can probably add an empty list-item element to the list to force clearing, but that seems like a dumb solution and sort of defeats the purpose.
Any ideas? I've spent a few hours reading and trying different options without success.
Try this, demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>list floats</title>
<style type="text/css">
li{clear: none;list-style: none}
.clearer{float: left; clear: left}
.floater{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="clearer">2</li>
<li class="">3</li>
<li class="clearer">4</li>
<li class="floater">5</li>
<li class="">6</li>
<li class="clearer">7</li>
</ul>
</body>
</html>
You can simply use a <br class="clear" /> with a br.clear{ clear: both; }
I sort of agree with the table option. But, you can do it with an empty list item. This would let you get rid of the 'clear' attribute in the 'right' and 'middle' classes. You would also need a 'solo' class for the single item to be sure it clears both ways.
.clear {
clear: both;
margin:0px;
padding:0px ;
font-size:1px;
}
.solo {
clear: both;
}
<li class="solo">1</li>
<li class="left">2</li>
<li class="right">3</li>
<li class="clear"></li>
try following code. much simpler but a little hard to understand!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>