My tables seem to be working differently than I would like, but as I try to reorganize it, it become worse. I'm not sure if I using TD or TR wrong or what is happening. With the code the way it is now, the horizontal navigation bar won't set a yellow border and my tables below it aren't how I want them.
It's supposed to look like this:
Logo(top all the way across)
Horizontal navigation bar(all the way across above vert navigation bar, history, and gainful)
vert navigation bar(left to history), history,Gainful(right of history)
about(below history in border)
<body >
<Table width=100% height=500 border=3
bordercolor=blue>
<TR height=20% style="background-color:black; background-width:100%">
<TD><img src="logo.png" alt="C"/>
<span style="color:white; font-size:22px; float:bottom">Computer Science Department</span></TD>
</TR>
<TR height=10% >
<TD style="border-color:green;border-width: 2px">
<nav class="horizontal"style=" padding-left:0px;
border-color:yellow;color:black; font-size:20px; width:100%; " >
<ul>
<li>Contact</li>
<li>Faculty</li>
<li>Programs</li>
<li>Classes</li>
<li>Program List</li>
</ul>
</nav>
<nav class="vertical" style="border-color:green;text-align: center; color: black">
<ul style="list-style-type:none">
<li>Computer Programming</li><BR>
<li>Computer Specialist</li><BR>
<li>Information Technology Analysis</li><BR>
<li>Information Technology Management</li><BR>
<li>Network System Developer</li><BR>
<li>Web Development Specialist</li><BR>
</ul>
</nav></TD>
</TR>
<TR height=60%>
<TD>3 content
<Table width=90% height=90% border=4
bordercolor=blue>
<TR>
<TD >History</TD>
<TR>
<TD>About</TD>
</TR>
<TD >Gainful</TD>
</Table>
</TD>
</TR>
<TR height=10%>
<TD><footer >
</footer></TD>
</TR>
</Table>
</body>
</html>
I'm not sure if that explained it well, if it didn't please let me know.
I figured out what the problem was. I had some of the tables in the wrong order, which messed it up. Thank-you for the assistance.
Related
Hi Im making a theme for my website which has a user menu in the top right corner of the page. This is inside a purple bar which also holds the title of the page. I have managed to get the user menu on the right hand side but I'm unable to get it into the top bar, it just sits bellow the bar. To see exactly what I mean here's a link to my site http://cpanel.gaigo.org
I believe it has something to do with the header div spreading accross the whole page but im unable to get it to shrink down to only fill 250px.
The HTML code is bellow:
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30"/>
</div>
</div>
Thanks for any responses in advance I'm sure they will help me figure this out.
You just try this code inside your body tag.I maked some changes inside your inline css in header,userbutton div id's
<div id="container">
<div id="headerWrap" style="position:fixed;width:100%; height:59px;z-index:1;background-color:#494158;">
<div id="header" style="width:250px;float:left">
<h1 style="margin-bottom:0; margin-left:20px; color:#fff;" id="Title">GaiGO CPanel</h1>
</div>
<div id="userMenuButton" style="float:right;margin-right:10px;width:auto;margin-top:25px;">
<span style="color:#fff;">Hi, Riley Evans</span>
<img src="user.png" height="30" width="30">
</div>
</div>
<div id="menuWrap" style="position:fixed; height:100%; z-index:0;">
<div id="menuHolder" style="background-color:#77bb66;height:inherit;width:50px;float:left;margin-top:21px;position:relative;">
<table class="menu" style="margin:0 auto; margin-top:38px;">
<tbody>
<tr>
<td class="sideMenuOption" id="dashboardButton" onclick="menuSlider('dashboardSubMenu')">
<img src="/style/images/designer-icons/Home-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="pagesButton" onclick="menuSlider('pagesSubMenu')">
<img src="/style/images/designer-icons/Multi-Page-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="mediaButton" onclick="menuSlider('mediaSubMenu')">
<img src="/style/images/designer-icons/Picture-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="stylesButton" onclick="menuSlider('stylesSubMenu')">
<img src="/style/images/designer-icons/Brush-01-48.png" width="40" height="40">
</td>
</tr>
<tr>
<td class="sideMenuOption" id="settingsButton" onclick="menuSlider('settingsSubMenu')">
<img src="/style/images/designer-icons/Settings-02-48.png" width="40" height="40">
</td>
</tr>
</tbody>
</table>
</div>
<div id="subMenuHolder" class="hide">
<ul class="subMenu dashboardSubMenu" id="dashboardSubMenu">
<li>Home</li>
<li>My Site</li>
<li>Stats</li>
</ul>
<ul class="subMenu pagesSubMenu" id="pagesSubMenu">
<li>Pages</li>
<li>New page</li>
</ul>
<ul class="subMenu mediaSubMenu" id="mediaSubMenu">
<li>Library</li>
<li>Upload</li>
</ul>
<ul class="subMenu stylesSubMenu" id="stylesSubMenu">
<li>Themes</li>
<li>Customise</li>
<li>Menus</li>
<li>Mobile</li>
</ul>
<ul class="subMenu settingsSubMenu" id="settingsSubMenu">
<li>General</li>
<li>Site</li>
<li>Account</li>
</ul>
<div id="closeSubMenuButton" onclick="subMenuClose()">
<img src="/style/images/designer-icons/Arrowhead-Left-01-48.png" height="30" width="30">
</div>
</div>
</div>
<div id="contentWrap" style="width:100%;height:2000px;">
<div id="content" style="background-color:#EEEEEE;float:left;width:100%;height:2000px;margin-top:59px;margin-left:0px;">
<div id="contentHolder" style="margin-left:50px;">Content goes here</div>
</div>
</div>
</div>
The div element automatically is given the display:block property/value. Try display:inline-block. Some additional tweaks may be necessary but this should get you on your way. You may also consider wrapping the code with span elements instead of div elements.
http://jsfiddle.net/kAAK9/1/
<body>
<nav id="mainNav">
<div id="navCenter">
<table>
<tr>
<td class="navItem" id="home">Home</td>
<td class="navItem" id="forums">Forums</td>
<td class="navItem" id="staff">Staff</td>
<td class="navItem" id="donate">Donate</td>
</tr>
</table>
<h2>Servername</h2>
</div>
</nav>
</body>
If the output window is smaller than 960px; I need a scroll bar to be added at the bottom, How would I do this? I have tried adding overflow properties but have had no luck.
JQUERY Solution: here
overflow-x: scroll
apply that to whatever you need a scroll to
I have created a table in which I will have an image of a person and information about them in the cell next to the image. My code is below
<table border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td class="bg" colspan="2">JEFF DAVIS</td>
</tr>
<tr>
<td width="24%">
<img height="150" src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150">
</td>
<td width="76%">
<p>Name: Jeff Davis</p>
<p>Favourite Color: Yellow</p>
<p>Favourite Animal: My Cat</p>
<p>Favourite Super Hero: Superman</p>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
</table>
In the cell where I keep the information, or 'profile' of the person I want to have bullet points in two columns. Could somebody inform me of how to do this?
Also I would like the top cell, with the name in capitals to have rounded edges, I believe I can do this with CSS but I am a complete novice.
Here is a jsfiddle of your example using dots u mentioned.
<ul>
<li><p>Name: Jeff Davis</p></li>
<li><p>Favourite Color: Yellow</p></li>
<li><p>Favourite Animal: My Cat </p></li>
<li><p>Favourite Super Hero: Superman</p></li>
</ul>
http://jsfiddle.net/kzgfu/
Is this want u ment?
P.s.: I dont quite understand what u mean with the capitals to have rounded edges. Could u show a picture of what u are meaning?
Rounded Cell from Danko http://jsfiddle.net/kzgfu/1/
And another rounded cell from me: http://jsfiddle.net/kzgfu/2/
I think this is what he means by rounded corners, not sure though
table td:nth-child(1){
background-color:#333;
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Here's a fiddle example using divs (I know it's not what you asked, but just so you have different options) and two columns for the bullet points.
http://jsfiddle.net/jprZ7
<div style="width:50%;">
<div style="width:100%; text-align:center; border-radius: 15px; background-color:#CCC;">
JEFF DAVIS
</div>
<div style="width:24%; float:left;">
<img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" />
</div>
<div style="width:76%; float:left;">
<ul style="float:left;">
<li>
<p>Name: Jeff Davis</p>
</li>
<li>
<p>Favourite Color: Yellow</p>
</li>
</ul>
<ul style="float:left;">
<li>
<p>Favourite Animal: My Cat</p>
</li>
<li>
<p>Favourite Super Hero: Superman</p>
</li>
</ul>
</div>
</div>
There you go
JsFiddle Bullet points and round corners around capitals
CSS:
.bg {
text-align:center;
background:green;
border-radius:10px 10px 0 0;}
HTML:
<li> <p>Favourite Color: Yellow</p> </li>
<li> <p>Favourite Animal: My Cat </p> </li>
<li> <p>Favourite Super Hero: Superman</p> </li>
<li> <p> Facebook Twitter Email</p> </li> </td>
http://jsfiddle.net/Ldbu4/1/
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2" class="bg">JEFF DAVIS</th>
</tr>
<tr>
<td width="24%"><img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /></td>
<td width="76%"><p>Name: Jeff Davis</p>
<ul>
<li>Favourite Color: Yellow</li>
<li>Favourite Animal: My Cat </li>
<li>Favourite Super Hero: Superman</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
and css
table
{
border-collapse:collapse;
}
td
{
border: 1px solid black;
}
td
{
padding: 10px;
}
th
{
background-color:#333;
color:#fff;
border-radius: 10px 10px 0 0;
}
I have a table with buttons on it, align at left, but when I convert one button to a menu using <ul> that moves all the buttons to the right and a bit down... I'm sure that it's cos <ul> but, i don't know what to do to delete that format.
I'd try with list-style: none, but that didn't work.... any ideas??
This is the code in html:
<div id="submenu">
<div id="subopciones" class="menudesp">
<ul>
<table border="0" id="tabla_submenu" cellpadding="0" cellspacing="0">
<tr>
<td id='celda_submenu'><li><a href="#" id='opcion_submenu' class='opcion_selec'>Blog</a>
<ul>
<li>Clasicos</li>
<li>Screencasts</li>
<li>Tips</li>
</ul>
</li></td>
<td id='espacio_submenu'></td>
<td id='celda_submenu'><a href='prueba.php' id='opcion_submenu' >Gran Formato</a></td>
<td id='espacio_submenu'></td>
<td id='celda_submenu'><a href='prueba.php' id='opcion_submenu' >Digital</a></td>
</tr>
</table>
</ul>
</div>
</div>
if you are not using css file try:
<ul style="margin:0; padding:0">
if you are using css, add to the file:
ul{
margin:0;
padding:0;
}
I generally use ul for lists of items
<ul class="users">
<li class="user">
<div class="name">Jack</div>
<div class="gender">M</div>
<div class="salary">$15k</div>
<div class="rank">Burger Flipper</div>
</li>
<li class="user">
<div class="name">Jill</div>
<div class="gender">F</div>
<div class="salary">$17k</div>
<div class="rank">Fry Tosser</div>
</li>
</ul>
When creating a heading for this list, is it best to include the heading as part of the list
<li class="user head">
<div class="human-attributes">This is:</div>
<div class="job-attributes">They are:</div>
</li>
or should it be a separate list?
<ul class="users head">
<li class="user">
<div class="human-attributes">This is:</div>
<div class="job-attributes">They are:</div>
</li>
</ul>
depends on what you want to do with it .. .You really should be using:
<table><thead></thead><tbody></tbody></table>
constructs which are meant for content you are describing, instead of <li> embedding a <div> which is going to get rendered in a bizarre way by default.
You can then use CSS to control the behaviour.
This is one of the legitimate uses of tables in HTML. You should not semantically be using unordered lists to present "tabular" data (which is what you are describing). You should be using something like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>M</td>
</tr>
<tr>
<td>Jill</td>
<td>F</td>
</tr>
</tbody>
</table>
http://www.w3.org/MarkUp/html3/listheader.html
Was a working draft.
For now your solution seem the best. but maybee whit a different class.