|
HTML - How To Create Vertical And Horizontal Lines For A Dynamic Org Chart?
Hello all,
The team I work on is going to be creating a .NET application which reads organization information from a database and creates a dynamic Org Chart. One of common features in an org chart is lines that show reporting structures. Does anyone have any recommendations on how we could dynamically create such lines that would need to go both horizontally and vertically? Thanks Similar TutorialsI have a paragraph that has a horizontal line beneath it. The gap between these two elements is too large. How do I get the line closer to the last line of text in the paragraph? I have tried everything from margins to padding attributes and nothing works for me yet. Here is my code at the moment; Code: <P style="MARGIN-BOTTOM: 0em; FONT: 2.5em verdana, sans-serif; MARGIN-LEFT: 20px; WHITE-SPACE: nowrap; LETTER-SPACING: -4px; TEXT-ALIGN: left"> <img src="logo10.gif"> Heading Text <SPAN style="MARGIN-BOTTOM: 0em; FONT-WEIGHT: bold; COLOR: rgb(255,153,0); FONT-STYLE: italic; WHITE-SPACE: nowrap"> More text</SPAN></P> <hr style="MARGIN-LEFT: 20px; color: rgb(255,153,0); height: 15" /> Hi, i got a big problem; If you run this code in Firefox everything is ok - there is one yellow text input; But in Internet Explorer there are two red horizontal 1 pixel lines under and above text input; I have been pulling my hair since 2 days and still i dont know how to get rid of those lines?; Is this IE bug ? Please help me if you can; Thx; HTML Code: <html>
<head>
<style type="text/css">
table.myDrop-table
{
border-collapse: collapse;
background-color: red;
border-style: solid;
border-color: blue;
border-width: 0px;
border-spacing: 0px;
padding: 0px;
margin: 0px;
}
tr.myDrop-tr
{
border-collapse: collapse
border-width: 0px;
padding: 0px;
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
td.myDrop-td
{
border-collapse: collapse
border: 0px;
border-width: 0px;
border-color: green;
padding: 0px;
margin: 0px;
}
input.myDrop-edit
{
border-width: 0px;
border-style: solid;
border-color: black;
background-color: yellow;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body bgcolor=white>
<TABLE class=myDrop-table cellpadding=0 cellspacing=0 border=0><TBODY>
<TR class=myDrop-tr>
<TD class=myDrop-td >
<INPUT class=myDrop-edit>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
Hi all, In my report i show the amount value. Below the amount value, i want to draw 2 horizontal lines close to each other in HTML. I used 2 hr tags and it printed 2 horizontal lines but the width between them is large. I want the 2 horizontal lines to be very close to each other. e.g Amount: 100 -------- -------- The above 2 lines should be closer to each other and not like the above. Let me know if anyone knows how this can be done. hi ! I'm using a frameset and in the main frame I need the vertical scroller visible all the time, even when not needed, but when I set it ... HTML Code: scrolling="yes" but with this the horizontal scroll is also visible, what I don't want Is there a way to enable just the Vertical one?? i have script that shown image in table, i want the table shown in horizontal not vertical this is the entire script, and the table that influence is in the red i think below any idea guys what i need to edit? Quote: # Photo Album # 1.1 # # Displays a members photos class user_photoplog_album extends z_module { # Set the maximum amount of images any users are allowed to display var $max_images = 5; function contents() { $content = $this->content; $vbulletin = $this->_zoints->external->vbulletin; # If limit hasnt been set or is over the admin set maximum, set it to the admin max if(empty($content['max_pics']) OR $content['max_pics'] > $this->max_images) { $limit_sql = 'LIMIT ' . $this->max_images; } # Otherwise, let them set it else { $limit_sql = 'LIMIT ' . $content['max_pics']; } # Get all photos the user has $getphotos = $vbulletin->db->query_read(" SELECT * FROM " . TABLE_PREFIX . "photoplog_fileuploads WHERE userid=" . $this->zuser . " AND moderate=0 ORDER BY dateline DESC " . $limit_sql . " "); $html .= '<div class="' . $this->style['pmain1'] . '" style="padding: 0;">'; # Does the user have any photos? if ($vbulletin->db->num_rows($getphotos)) { # Display the top of the table $html .= ' <table border="0" width="100%"> <tr> <td width="100" overflow-x: scroll; overflow-y: hidden; align="center" class="phead"> Image </td>'; # Display the details? if(!$content['details']) { $html .= ' '; } $html .= ' </tr>'; # loop and display all that have been fetched from the DB while($photo = $vbulletin->db->fetch_array($getphotos)) { # Display image cell $html .= ' <tr> <td width="100" align="center" class="pmain2"> <a href="' . $this->_zoints->external->url() . 'imagehosting/image' . $photo['fileid'] . '.html" target="_blank""> <img src="' . $this->_zoints->external->url() . 'imagehosting/images/' . $photo['userid'] . '/small/' . $photo['filename'] . '" /> </a> </td> '; # Display the image details? if(!$content['details']) { $html .= ' '; } $html .= '</tr>'; } $html .= '</table> <p><a href="index.php?u=' . $this->zuser . '" target="_blank">View All Photos</a> </p> <div> <p>'; } # Nope, tell them they have none else { $html .= 'You don\'t have any photos. <a href="upload.php" target="_blank">Upload photos now!</a>'; } $vbulletin->db->free_result($getphotos); $html .= '</p> </div>'; return $html; } function update($content) { return $content; } function edit() { $content = $this->content; if($content['max_pics'] AND $content['max_pics'] < $this->max_images) { $limit = htmlspecialchars($content['max_pics']); } else { $limit = $this->max_images; } $html .= '<div class="pmain1">'; # Disable description checkbox $html .= 'Disable image details? '; $html .= '<input type="checkbox" name="mod[content][details]" ' . ($content['details'] ? 'checked="checked"': '') . ' /> <br />'; # Max pictures textbox $html .= 'Max pictures to display '; $html .= '<input type="text" name="mod[content][max_pics]" value="' . $limit . '" size="5" /> '; $html .= '<span style="font-size: 7pt; color: #848484;">(max ' . $this->max_images . ' allowed)</span> '; $html .= '</div>'; return $html; } } Hello, Here is my site logo, with the name covered due to private project: Now I have created a background the same as this without the logo. I have tiled this accross the webpage, but now need to line the logo with it, so that I can have the webpage viewable by any screen resolution. Please could you tell me how to make this line up correctly: Thank you. PS. Im using Microsoft Frontpage 2003 Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Testing... 1 2 3</title> <link rel="stylesheet" type"text/css" href="CSS1.css" /> </head> <body> <h1> Testing Website </h1> <ul id="nav-list"> <li><A href=Home>Home</A></li> <li><A href=HTML>HTML</A></li> <li><A href=CSS>CSS</A></li> <li><A href=JavaScript>JavaScript</A></li> <li><A href=XML>XML</A></li> <li><A href=PHP>PHP</A></li> <li><A href=SQL>SQL</A></li> </ul> <ul id="side-bar"> <li><b>HTML Intro</b></li> <li><A href=SQL>HTML Home</A></li> <li><A href=SQL>Intro</A></li> <li><A href=SQL>Getting Started</A></li> <li><b>Basics</b></li> <li><A href=SQL>Basics</A></li> <li><A href=SQL>Elements</A></li> <li><a href=SQL>Attributes</a></li> </ul> <p> lets have a look </p> </body> </html> HTML Code: @charset "utf-8";
/* CSS Document */
body {
background-color:black;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
ul#nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 750px;
height: 20px;
}
ul#nav-list li {
display:inline;
}
ul#nav-list li a {
text-decoration:none;
padding:5px 0;
width:100px;
background: #999;
color:#fff;
float:left;
text-align:center;
border-left:1px solid #000;
}
ul#nav-list li a:hover {
background-color:#666;
}
ul#side-bar {
list-style: none;
margin:0;
padding:0;
width: 100px;
}
ul#side-bar li a {
text-decoration:none;
padding:5px 5px;
background:#999;
color:#FFF;
float:left;
width: 90px;
text-align: center;
margin-right: 20px;
}
ul#side-bar li a:hover {
background:#666;
}
p {
color:#FFF;
}
OK - I want you you to know, I don't know what I'm doing. But I'm trying to build my web site and I'm just about there but am having one problem. The problem page is he http://www.danielrubio.com/clientlogin.html and he http://www.danielrubio.com/listeningroom.html I can't get the navigation area on the left to occupy the same vertical position as the login form. With the second page I can't get the navigation area on the left to occupy the same vertical position as the links to my MP3's. The reason I set things up this way to start with was to keep the form and the links centered on the page no matter what size window or screen resolution. Here is the code for the first problem page: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="luckydog" && password=="sunshine") { window.location="http://www.danielrubio.com/heidi/juliexyz.html"; done=1; }
<!-- The user above is Julie Rubio 070216 -->
if (username=="bighands" && password=="hardwork") { window.location="http://www.danielrubio.com/guest/12345678.html"; done=1; }
<!-- The user above is Guest 070216 -->
if (username=="member1" && password=="password1") { window.location="page1.html"; done=1; }
if (username=="member2" && password=="password2") { window.location="page2.html"; done=1; }
if (username=="member3" && password=="password3") { window.location="page3.html"; done=1; }
if (done==0) { alert("Invalid login!"); }
}
// End -->
</script>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta name="keywords"
content="daniel rubio, composer, orchestrator, tuba, new orleans, last days, derringer, sidewalk, second line, music, bmi, garritan, dixieland, theater, jazz, bourbon, imdb">
<meta name="robots" content="index, follow, noarchive">
<meta name="description"
content="Daniel Rubio is a composer and orchestrator for theater film and television from New Orleans and a tuba player">
<title>DANIEL RUBIO</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(192, 192, 192); height: 646px;"
alink="#000099" link="#000099" vlink="#990099">
<table
style="text-align: left; font-family: Helvetica,Arial,sans-serif; background-color: transparent; width: 100%; height: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; height: 96px;"><big><big><big><span
style="font-weight: bold;"> </span></big></big></big>
<h1 style="font-weight: bold; height: 25px;">D <small>A
N I E L</small> R <small>U B I O</small></h1>
<big><big><big><small><small>Composer
| Orchestrator</small></small></big></big></big></td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="width: 100%; height: 108px;"> <big><big><big><img
style="position: absolute; width: 108px; height: 144px; top: 57px; left: 96px;"
alt="Photograph of Daniel Rubio"
src="../../photogs/DanBW45a.jpg"></big></big></big><font
size="+1"> </font>
<div style="text-align: center; margin-top: 0px; height: 92px;"><font
size="+1"><span style="color: rgb(51, 51, 51);"></span></font><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><br>
<br>
<big><big><big>C</big>LIENT <big>L</big>OGIN<br>
<br>
<br>
<br>
<br>
</big></big></small></small></small></big></span></big><big><span
style="color: rgb(51, 51, 51);"><big><small><small><small><big><big>
<center>
<form name="login">
<table style="width: 225px;" border="1"
cellpadding="3">
<tbody>
<tr>
<td colspan="2"> <br>
<div ="">
<center><font size="+2"><b>Welcome!</b></font></center>
</div>
</td>
</tr>
<tr>
<td>Username:</td>
<td><br>
<div style="z-index: 2;"><input
name="username" type="text"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td><input name="password" type="text"></td>
</tr>
<tr>
<td colspan="2" align="center"><input
value="Login!" onclick="Login()" type="button"></td>
</tr>
</tbody>
</table>
</form>
</center>
</big></big></small></small></small></big></span></big></div>
</td>
</tr>
<tr style="color: rgb(51, 0, 153);">
<td
style="vertical-align: top; text-align: center; width: 20%; background-color: rgb(153, 153, 153); height: 337px;"><small><big><big>
</big></big><br>
<a href="http://www.danielrubio.com/index.html">Home</a><br>
<br>
<a href="http://www.danielrubio.com/clientlogin.html">Client
Login</a><br>
<br>
<a href="http://www.danielrubio.com/listeningroom.html">Listening
Room</a><br>
<br>
<a href="http://www.danielrubio.com/biography.html">Biography</a><br>
<br>
<a href="http://www.danielrubio.com/news.html">News</a><br>
<br>
<a href="http://www.danielrubio.com/links.html">Links</a><br>
<br>
<a href="http://www.danielrubio.com/sitemap.html">Site
Map</a><br>
<br>
<a href="http://www.danielrubio.com/feedback.html">Feedback</a></small></td>
<td style="text-align: center; width: 80%; height: 337px;"><br>
<div style="position: absolute; left: 240px; top: 377px;"><span
style="font-weight: bold;"><span
style="color: rgb(0, 0, 0);"></span> </span><br>
<span style="font-weight: bold;"></span></div>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1"
style="text-align: center; width: 100%; background-color: rgb(153, 153, 153); height: 96px;"><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Copyright
© 2006 - </span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">2007
by </span><a
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"
href="http://www.danielrubio.com/feedback.html">Daniel Rubio</a><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">.
All worldwide rights reserved.</span><br
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">
<span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Second
Line Music™ is a trademark of Daniel Rubio.</span><span
style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"><br>
</span></td>
</tr>
</tbody>
</table>
<span style="font-family: Helvetica,Arial,sans-serif;">
</span>
</body>
</html>
I think that if you help me to understand the correct approach to the first page, I can then apply it to the second page. Thanks for any help, Dan Hello all, I am trying to replicate a style I have seen on the site listed below, where they appear to be using the CANVAS command to create a gradient top and bottom margin. I can seem to find anything online about how to do this but obviously they have figured it out. http://www.xtrememac.com/ Any ideas or pointing me in the right direction are greatly appreciated. Thanks! I've seen on some sites that images show up within a block and they scroll left and right when user clicks a button. And many times, these are not flash files, but html, or xhtml or dhtml or asp or php or some other extensions. I am trying to create a database of images all with labels (multiple), so that I can pull all images of a label to a window and have them scroll right and left with buttons. does anyone here know how this may be done? Thanks Navs yea, i know it makes me sound like the biggest noob ever but i am so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out heres the css.... Code: body {
background-color: #e3e3db;
background-image: url(bg.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
padding: 0;
}
#menu {
}
#menu li {
float: left;
height: 28px;
margin: 0 5px 0 0;
white-space: nowrap;
}
#menu li strong, #menu li a {
float: left;
height: 22px;
padding: 6px 16px 0 22px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -10px -28px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
/* hide overflowing text */
max-width: 290px;
overflow: hidden;
text-overflow: ellipsis;
}
#menu li span {
float: left;
height: 28px;
width: 6px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -4px -28px;
}
#menu li.selected strong, #menu li.selected a {
background-position: -10px 0;
color: #000000;
font-weight: bold;
}
#menu li.selected span {
background-position: -4px 0;
}
#menu li:hover strong, #menu li:hover a {
background-position: -10px -56px;
}
#menu li:hover span {
background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
background-position: -10px 0;
}
#menu li.selected:hover span {
background-position: -4px 0;
}
-thanks in advance I realize that I need to have an offline color chart handy, I would like a standalone chart on my desktop for easy access, any links please? Hi there, I've created a learning tool that outputs a student's results to a flash chart. Thing is they will need a printed copy of this results chart, obviously flash does not print. The only way around this problem I can think to is to take a screenshot of the page, then proceed to print that out. I need some script that will capture the page, then store it in a defined directory with a relevant name for later printing. Yes I know this could be done manually, but the people taking the quiz would more than likely view it as a chance to cheat, plus it looks pretty unprofessional if you have to mess about with paint or a place to paste the file. Does anyone have any ideas for how I'd go about doing this? Thanks Coot for really helping me out. I've updated some needed assistance if anyone else can help I would appreciate it. For: http://www.trillionaireme.com Sorry, this is just a really stupid question. I am not new in the least bit to HTML, however I am completely new to talking to people about it. When someone refers to "line 15 in the code" what are they talking about. Because sometimes I will count down the lines and that line will be blank. For example: What is line 5 in this code? Code: <html> <head> <title></title></head> <body> </body> </html> Would you count the number of lines down, or the number of lines (with content) down. Would line 5 be considered the blank line, or </body> Hello, I don't want my lines to end, but they do even without me typing a <BR>. I tried putting the code in the same line in the code, it does not work. Here's the code I need to have on the SAME line : Code: <BODY bgcolor = #95AD9C> <img src = "Images/logo.gif" height = 100 width = 100> <font color = "white"> <H1> Anime Invasion <BR> English Dubbed <BR> Episodes! </H1> </font> </BODY> I am trying to make an anime watching website, is it a bad idea to design the whole thing myself? Sorry I am new to website development! Anyone know any good free templates? Thanks. Hi there. I am working on a website for a friend who created it using Word and then found that this doesn't work in FF (the files were .mht). I only know basic HTML, and no CSS. I can do most of what I need to but am having two problems. Firstly, some of the positioning is out in FF, but if I change it so it's ok in FF it's then out in IE. Word appears to have positioned everything using  s: HTML Code: <span style='mso-spacerun:yes'> </span> <span style='mso-tab-count:3'> &nbs p; </span> <span style='mso-spacerun:yes'> </span> <!--[if gte vml 1]> <v:shape id="_x0000_i1030" type="#_x0000_t75" style='width:141pt;height:141.75pt'> <!-- sixth image file --> <v:imagedata src="TA6.jpg" o:title="TA6"/> </v:shape> <![endif]--> <![if !vml]> <img border=0 width=188 height=189 src ="TA6.jpg" v:shapes="_x0000_i1030"> <![endif]> <span style='mso-spacerun:yes'> </span><!--[if gte vml 1]> <v:shape id="_x0000_i1031" type="#_x0000_t75" style='width:141pt;height:2in'> I know this is horrible code. Is there any simple way to ensure that the image ends up in the same place in IE and FF? Do I need to use absolute positioning, and if so, can anyone direct me to good resources on this? Secondly, I'm having problems with an horizontal line which appears in IE but not in FF. The code is HTML Code: <h2 style='margin-left:36.0pt;text-indent:36.0pt'> <!--[if gte vml 1]> <v:line id="_x0000_s1031" style='position:absolute;left:0;text-align:left;z-index:1' from="1in,33pt" to="647.15pt,33pt" strokecolor="#396" strokeweight="3.5pt"/> <![endif]--> <![if !vml]> <span style='mso-igno vglayout;position:absolute;z-index:1;left:0px;margin-left: 93px;margin-top:41px;width:773px;height:6px'> This displays correctly as a shaded green line in IE, but as a white line with a thin black border in FF. From searching I think this is VML and not supported by FF - is this correct? In that case, I think I need to use the <hr> command, but how do I add an attribute to <hr> to ensure it's placed in the right place? Is the only solution a table? Sorry for the stupid questions, I know Word code is a terrible place to start from, I'm just trying to avoid redoing it all. hey i need help with my website(this is not advertisement go here if you dont know what i'm talking about) www.biblebeyond.com. you see the links in my little box aren't really seperated by good distance how do i make them seperate? Hello, folks; I'm making a new site at http://www.sticksite.com/antlers/ and there is a wide green (blank) space after the text and before the pictures. I did this in Notepad2 and did NOT enter any br tags in there. I cannot understand why this space appears. Can anyone educate me, please? Hello. I am making HTML codes for ebay. I work with Frontpage, and when I paste my HTML code in ebay page the space betweens the lines becomes 2 lines instead of 1 line. At frontpage it looks ok, I mean the space is 1 line like I want it to be but in ebay there is no way to change the space. Is there something wrong with my HTML code? |
|||||||