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
Related
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.
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.
I have the following code:
<table>
<tr>
<td> </td>
<td>
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</td>
</tr>
</table>
I would like the OK and Cancel buttons to be right aligned. How can I accomplish that? I setup a plunker to demonstrate the problem.
You can use float:
#btnOK, #btnCancel {
width: 90px;
float:right;
}
Check This
You can also change the order in HTML to get first the OK button:
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<a id="btnCancel">Cancel</a>
<a id="btnOK">OK</a>
</td>
Check This
For this exact scenario, I would do something like this.
HTML
<tr>
<td></td>
<td >
<a id="btnAutoSuggest">Suggest Title</a>
<div class="align-right">
<a id="btnOK">OK</a>
<a id="btnCancel">Cancel</a>
</div>
</td>
</tr>
CSS
<style>
.align-right{
float: right;
}
</style>
The reason I've wrapped the buttons into a div is when you want to give some pagging or margin from sides or top/down, you will do it easily just by styling the div, so your controls move together.
I have a table of records which is displayed nicely in a HTML Table.
The last column of this table displays a icon when hovering the row. When the user hovers the icon a drop down menu appears for all actions related to that row.
Currently I have the td that Icon is in set to Position:absolute and the div of the drop down menu is also set to Position Absolute.
This means I can align the Dropdown Menu Div to align nicely against the row it relates.
Firstly im not totally sure why this is the case. I would have thought I would need the TD as Absolute and the Menu Div as Relative but this just isnt the case.
The actual issue I am currently having (as the way I have it works across all browser) is that when the row is expanded to be double the height from text in other columns. The TD with absolute positioning applied does not expand to be 100% height of the TR. Which causes issues when trying to hover the tr and you move over where the last TD which should have expanded to the row height and it registers it as a hover out on the TR.
Any ideas to get around this?
The problem with putting the icon in a div which is relative is that I need the div to be 100% height/width of the td to be able to align the menu correct to the row!
EDIT:
As requested Some Html... This is a mustache template. Shouldn't be to hard to follow even if you have never used it
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
I would get rid of the table all together. I would then use divs with table behavior. This will give you much more control over how each element works, each row, and each column.
This link explains the concept quite well: http://snook.ca/archives/html_and_css/getting_your_di
You might try this::
<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script>
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
Tutorials<br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu">HTML</td></tr>
<tr><td class="menu">CSS</td></tr>
<tr><td class="menu">XML</td></tr>
<tr><td class="menu">XSL</td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
Scripting<br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu">JavaScript</td></tr>
<tr><td class="menu">VBScript</td></tr>
<tr><td class="menu">DHTML</td></tr>
<tr><td class="menu">ASP</td></tr>
<tr><td class="menu">ADO</td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
Validation<br>
<table class="menu" id="validation" width="120">
<tr><td class="menu">Validate HTML</td></tr>
<tr><td class="menu">Validate XHTML</td></tr>
<tr><td class="menu">Validate CSS</td></tr>
<tr><td class="menu">Validate XML</td></tr>
<tr><td class="menu">Validate WML</td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body>
</html>
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;
}