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;
}
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.
I've been trying to make a transparent box behind a table, that I can use as a background for it, but it appears left to right side of my page and not only behind the table. Any ideas how I can fix that?
Here is HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<LINK href="Style/Boxes.css" rel="stylesheet" />
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav><br><br><br><br><br>
<div class="BlueBox">
<TABLE border="0" align="center" width="60%">
<TR>
<TD ROWSPAN="2" > </TD>
<TD valign="bottom" align="center"><b><i><FONT SIZE="6" COLOR="FFFFFF">What can I say about myself...</FONT></i></b></TD>
<TD ROWSPAN="2" > </TD>
<TD ROWSPAN="2"><IMG SRC="Pictures/Me.JPG" height="400"></TD>
</TR>
<TR>
<TD valign="middle" align="left" >
TEXT
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
Here is the CSS for the box:
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Just simply remove **position:fixed;** from your css.
.BlueBox{
position:fixed;
background-color:rgba(0,157,255,0.7);
padding:10px 10px 10px 10px;
border-radius:15px 15px 15px 15px;
}
Your example is just a block element (table) inside another block element (div.bluebox)... nothing that should prevent your example from rendering as you expect it.
For debugging the design, I would recommend you to remove all other css files and the rowspans in the table to get a minimal example.
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 am building a website and I use a table as a header. The table has 7 columns. I use some code to automatically resize my website, the resize script works perfect. Everything resizes except the table when it is at a certain size. I think it's because of the cellpadding which is 15 but I want to keep it at 15. This is the table script:
<div id="header">
<table width="100%" align="center" cellpadding="0" cellspacing="20" style="font- family:Tahoma, Geneva, sans-serif; color:#FFFFFF; background:#FF0101">
<tr>
<td width="100%" height="70%" align="center" valign="top"><table align="left" cellpadding="15" cellspacing="0" class="menu">
<tbody><tr><td class="menu" bgcolor="#5B8CFF" onmouseover"style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Home</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Transport</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Distributie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"> Historie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Vacatures</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Route</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Contact</td> </tr>
</tbody></table></td>
</tr>
</table></div>
I hope somebody could help me to let the table automatic resize with the website width and not stuck at a certain width. Thanks a lot. ( I changed the href to website because I want to keep the website I'm making this for private.)
I suggest you to change your structure to something more flexible, also remember use inline styles are not aceptable (if you only use them due to your example I think it is ok, but always use css, even for examples because it is easy to help you):
Example:http://jsfiddle.net/GBTg4/
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Transport</li>
<li>Distributie</li>
<li>Historie</li>
<li>Vacatures</li>
<li>Route</li>
<li>Contact</li>
</ul>
</div>
CSS
#nav ul
{
width:100%;
list-style-type: none;
margin:0;
padding:0;
}
#nav li
{
display:inline;
float:left;
width:14.28571428571429%;
background-color: blue;
text-align:center;
}
#nav a
{
color:#FFF;
line-height:35px;
display:inline-block;
width:100%;
}
#nav a:hover
{
background-color:#B30000;
}
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;
}