Aligning only a part of the line in a list

  • feelgood
  • Newbie
  • Newbie
  • feelgood
  • Posts: 12
  • Loc: NY

Post 3+ Months Ago

I have this list here and I want to place the element in brackets to the left most side of that table, keeping it on the same line with the course name. I tried doing indenting, left aligning, positioning etc and everytime the course code in brackets skips down to the next line.

any ideas why that could be happening? thank you

Code: [ Select ]
<HTML>



<HEAD>
<style type="text/css">

table.Mystyle
   {
    background-color:#D3D3D3;
    font-family: verdana;
      font-size: 12; 
      color: black;
    margin-left: ;
    margin-right: -150;
   }

body.set {background-color= #B0C4DE }

h4.margin {margin: 10,25,10,}


p.blah {text-align: left}


</style>
</HEAD>

<BODY class="set" >

<TABLE class="Mystyle" border=0 width="95%" height="100%" cellpadding=0 cellspacing=0>

    <TR valign=top height="15%"><TD>
        <table class="Mystyle"border=1 width="100%" height="100%" cellpadding=0 cellspacing=0>
              <tr valign="bottom"><td><h4 class="margin">COURSE DESCRIPTIONS</h4></td></tr>
        </table>
    </TD></TR>



    <TR valign=top height="85%">

        <TD width="%">
        <table class="Mystyle" border=0 width="100%" height="100%" cellpadding=0 cellspacing=0>
        
              <tr valign="top">
            <td>
            <p class="margin"><i>Senior year / spring course descriptions are excluded from this list.</i></p>
            <ul type="square"> <br><br>


                <li><a name="ELE424"></a>
                 <dt><b>Transmission Lines [ELE424]</b></dt>
                  <dd>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems.
                   Transient and steady state signal analysis. Characteristics of transmission system devices. </dd>
                </li> <br><br>

                <li><a name="CSE561"></a>
                 <dt><b>Digital Machine Design <p class="blah">[CSE561]</p> </b> </dt><br>
                  <dd>Behavioral and structural design methods and examples using a hardware description language (VHDL).
                   Control, arithmetic, bus systems, memory systems.
                   Logic synthesis from hardware language descriptions.</dd>
                </li> <br><br>

                <li><a name="ELE541"></a>
                 <dt><b>Integrated Circuits [ELE541]</b></dt>
                  <dd>Principles of design and processing of monolithic and hybrid integrated circuits.
                   Current technology and its scientific basis.</dd>
                </li> <br><br>

                <li><a name="CSE464"></a>
                 <dt><b>Intro to VLSI Design [CSE464]</b></dt>
                  <dd>MOS VLSI technologies. CMOS digital circuits. Layout design. Simulation.
                   Realization of digital subsystems-adders, memory, etc.
                   Opportunities for chip fabrication and testing.</dd>
                </li> <br><br>
                
                <li><a name="CSE497"></a>
                 <dt><b>Senior Design Lab [CSE497]</b></dt>
                  <dd>Integrates skill in analysis, design, and presentation through one extensive project selected from a list generated by course advisors.
                   May be repeated for credit. Senior standing.</dd>
                </li> <br><br>

                <li><a name="SHR355"></a>
                 <dt><b>Strategy and Human Resource Management [SHR355]</b></dt>
                  <dd>strategy, organization theory, organizational behavior, and human resource management—all of which focus on the human role in organizational success.
                   Development of both theory and practice in the management field.</dd>
                </li> <br><br>


                 <li><a name="CSE381"></a>
                 <dt><b>Computer Architecture:</b></dt>
                  <dd>Data representation, memory hierarchies, protection, specialized processors, multiple computers, performance evaluation, reliability, and microarchitecture design.</dd>
                </li> <br><br>

                <li><a name="CSE397"></a>
                 <dt><b>Computer Laboratory I </b></dt>
                  <dd>Experimental methods using electrical equipment.
                    Logic modules, computer programming, analog and digital computer operation, logic-circuit design, use of Logic Computer-Aided Design tools (Xilinx), and testing.
                     Design activities including testing and documentation are stressed.
                     Actual circuit construction with FPGA’s and logic components.</dd>
                </li> <br><br>

                <li><a name="CSE398"></a>
                 <dt><b>Computer Laboratory II </b></dt>
                  <dd>3 projects and the junior design project.</dd>
                </li> <br><br>

                 <li><a name="ELE346"></a>
                 <dt><b>Semiconductor Devices </b></dt>
                  <dd>Physics of semiconductor devices. Energy bands.
                   Electrons and holes. PN and metal semiconductor diodes. Characteristics, operation, properties and limitations of bipolar transistors, JFETs and MOSFETs.
                    PNPN devices. Optoelectronic devices.</dd>
                </li> <br><br>

                <li><a name="CSE382"></a>
                 <dt><b>Algorithms & Data Structures </b></dt>
                   <dd>Data structures and algorithms implemented in high-level language.
                    Nonnumeric processing, including database management.
                     Types, structures, pointers, linked lists, recursion, iteration, retrieval, pattern recognition, and context processing.</dd>
                </li> <br><br>
    
                <li><a name="ELE331"></a>
                  <dt><b>Digital Circuits/Systems </b></dt>
                   <dd>Basic switching circuits and systems using diodes, bipolar and field-effect transistors.
                    Integrated-circuit implementation of gates and counters.</dd>
                </li> <br><br>

                <li><a name="ELE351"></a>
                  <dt><b>System & Signal Analysis </b></dt>
                   <dd>System analysis in the time and frequency do-main. Convolution, Fourier series, Fourier and Laplace transforms, concepts of poles and zeros.
                      Bode plots.</dd>
                </li> <br><br>

                <li><a name="CSE261"></a>
                  <dt><b>Digital Logic Design:</b></dt>
                  <dd>Number representations, Boolean algebra, logic minimization, memory circuits, counters, state diagrams, state machine design, arithmetic circuits, and asynchronous circuits.
                   Logic simulators are used to demonstrate and provide students with design activities.</dd>
                </li> <br><br>

                <li><a name="CSE283"></a>
                 <dt><b>Object-Oriented Design </b></dt>
                  <dd>Fundamental software design concepts of functional decomposition and object oriented design.
                    Use both C++ and Java to implement design projects which will be completed to demonstrate the design concepts.</dd>
                </li> <br><br>

                <li><a name="ELE231"></a>
                 <dt><b>EE Fundamentals I </b></dt>
                   <dd>Analysis of electric circuits. Resistive, reactive circuits.
                     Independent, dependent sources. Network theorems, circuit reduction. Elements of transient and steady state circuit analysis.
                    Power and energy considerations.</dd>
                </li> <br><br>

                <li><a name="ELE232"></a>
                 <dt><b>EE Fundamentals II </b></dt>
                  <dd>Frequency response, filters. Second order circuits. Semiconductors, diodes, bipolar junction transistors, field effect transistors, models, circuits. Operational amplifiers, models, circuits.
                    Transformers, rotating machines. DC generators and motors. Alternators. AC motors.</dd>
                </li> <br><br>

                    
            </ul> 
            </td>
            </tr>



    
        </table>

        </TD></TR>






</TABLE>

</BODY>
</HTML>
  1. <HTML>
  2. <HEAD>
  3. <style type="text/css">
  4. table.Mystyle
  5.    {
  6.     background-color:#D3D3D3;
  7.     font-family: verdana;
  8.       font-size: 12; 
  9.       color: black;
  10.     margin-left: ;
  11.     margin-right: -150;
  12.    }
  13. body.set {background-color= #B0C4DE }
  14. h4.margin {margin: 10,25,10,}
  15. p.blah {text-align: left}
  16. </style>
  17. </HEAD>
  18. <BODY class="set" >
  19. <TABLE class="Mystyle" border=0 width="95%" height="100%" cellpadding=0 cellspacing=0>
  20.     <TR valign=top height="15%"><TD>
  21.         <table class="Mystyle"border=1 width="100%" height="100%" cellpadding=0 cellspacing=0>
  22.               <tr valign="bottom"><td><h4 class="margin">COURSE DESCRIPTIONS</h4></td></tr>
  23.         </table>
  24.     </TD></TR>
  25.     <TR valign=top height="85%">
  26.         <TD width="%">
  27.         <table class="Mystyle" border=0 width="100%" height="100%" cellpadding=0 cellspacing=0>
  28.         
  29.               <tr valign="top">
  30.             <td>
  31.             <p class="margin"><i>Senior year / spring course descriptions are excluded from this list.</i></p>
  32.             <ul type="square"> <br><br>
  33.                 <li><a name="ELE424"></a>
  34.                  <dt><b>Transmission Lines [ELE424]</b></dt>
  35.                   <dd>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems.
  36.                    Transient and steady state signal analysis. Characteristics of transmission system devices. </dd>
  37.                 </li> <br><br>
  38.                 <li><a name="CSE561"></a>
  39.                  <dt><b>Digital Machine Design <p class="blah">[CSE561]</p> </b> </dt><br>
  40.                   <dd>Behavioral and structural design methods and examples using a hardware description language (VHDL).
  41.                    Control, arithmetic, bus systems, memory systems.
  42.                    Logic synthesis from hardware language descriptions.</dd>
  43.                 </li> <br><br>
  44.                 <li><a name="ELE541"></a>
  45.                  <dt><b>Integrated Circuits [ELE541]</b></dt>
  46.                   <dd>Principles of design and processing of monolithic and hybrid integrated circuits.
  47.                    Current technology and its scientific basis.</dd>
  48.                 </li> <br><br>
  49.                 <li><a name="CSE464"></a>
  50.                  <dt><b>Intro to VLSI Design [CSE464]</b></dt>
  51.                   <dd>MOS VLSI technologies. CMOS digital circuits. Layout design. Simulation.
  52.                    Realization of digital subsystems-adders, memory, etc.
  53.                    Opportunities for chip fabrication and testing.</dd>
  54.                 </li> <br><br>
  55.                 
  56.                 <li><a name="CSE497"></a>
  57.                  <dt><b>Senior Design Lab [CSE497]</b></dt>
  58.                   <dd>Integrates skill in analysis, design, and presentation through one extensive project selected from a list generated by course advisors.
  59.                    May be repeated for credit. Senior standing.</dd>
  60.                 </li> <br><br>
  61.                 <li><a name="SHR355"></a>
  62.                  <dt><b>Strategy and Human Resource Management [SHR355]</b></dt>
  63.                   <dd>strategy, organization theory, organizational behavior, and human resource management—all of which focus on the human role in organizational success.
  64.                    Development of both theory and practice in the management field.</dd>
  65.                 </li> <br><br>
  66.                  <li><a name="CSE381"></a>
  67.                  <dt><b>Computer Architecture:</b></dt>
  68.                   <dd>Data representation, memory hierarchies, protection, specialized processors, multiple computers, performance evaluation, reliability, and microarchitecture design.</dd>
  69.                 </li> <br><br>
  70.                 <li><a name="CSE397"></a>
  71.                  <dt><b>Computer Laboratory I </b></dt>
  72.                   <dd>Experimental methods using electrical equipment.
  73.                     Logic modules, computer programming, analog and digital computer operation, logic-circuit design, use of Logic Computer-Aided Design tools (Xilinx), and testing.
  74.                      Design activities including testing and documentation are stressed.
  75.                      Actual circuit construction with FPGA’s and logic components.</dd>
  76.                 </li> <br><br>
  77.                 <li><a name="CSE398"></a>
  78.                  <dt><b>Computer Laboratory II </b></dt>
  79.                   <dd>3 projects and the junior design project.</dd>
  80.                 </li> <br><br>
  81.                  <li><a name="ELE346"></a>
  82.                  <dt><b>Semiconductor Devices </b></dt>
  83.                   <dd>Physics of semiconductor devices. Energy bands.
  84.                    Electrons and holes. PN and metal semiconductor diodes. Characteristics, operation, properties and limitations of bipolar transistors, JFETs and MOSFETs.
  85.                     PNPN devices. Optoelectronic devices.</dd>
  86.                 </li> <br><br>
  87.                 <li><a name="CSE382"></a>
  88.                  <dt><b>Algorithms & Data Structures </b></dt>
  89.                    <dd>Data structures and algorithms implemented in high-level language.
  90.                     Nonnumeric processing, including database management.
  91.                      Types, structures, pointers, linked lists, recursion, iteration, retrieval, pattern recognition, and context processing.</dd>
  92.                 </li> <br><br>
  93.     
  94.                 <li><a name="ELE331"></a>
  95.                   <dt><b>Digital Circuits/Systems </b></dt>
  96.                    <dd>Basic switching circuits and systems using diodes, bipolar and field-effect transistors.
  97.                     Integrated-circuit implementation of gates and counters.</dd>
  98.                 </li> <br><br>
  99.                 <li><a name="ELE351"></a>
  100.                   <dt><b>System & Signal Analysis </b></dt>
  101.                    <dd>System analysis in the time and frequency do-main. Convolution, Fourier series, Fourier and Laplace transforms, concepts of poles and zeros.
  102.                       Bode plots.</dd>
  103.                 </li> <br><br>
  104.                 <li><a name="CSE261"></a>
  105.                   <dt><b>Digital Logic Design:</b></dt>
  106.                   <dd>Number representations, Boolean algebra, logic minimization, memory circuits, counters, state diagrams, state machine design, arithmetic circuits, and asynchronous circuits.
  107.                    Logic simulators are used to demonstrate and provide students with design activities.</dd>
  108.                 </li> <br><br>
  109.                 <li><a name="CSE283"></a>
  110.                  <dt><b>Object-Oriented Design </b></dt>
  111.                   <dd>Fundamental software design concepts of functional decomposition and object oriented design.
  112.                     Use both C++ and Java to implement design projects which will be completed to demonstrate the design concepts.</dd>
  113.                 </li> <br><br>
  114.                 <li><a name="ELE231"></a>
  115.                  <dt><b>EE Fundamentals I </b></dt>
  116.                    <dd>Analysis of electric circuits. Resistive, reactive circuits.
  117.                      Independent, dependent sources. Network theorems, circuit reduction. Elements of transient and steady state circuit analysis.
  118.                     Power and energy considerations.</dd>
  119.                 </li> <br><br>
  120.                 <li><a name="ELE232"></a>
  121.                  <dt><b>EE Fundamentals II </b></dt>
  122.                   <dd>Frequency response, filters. Second order circuits. Semiconductors, diodes, bipolar junction transistors, field effect transistors, models, circuits. Operational amplifiers, models, circuits.
  123.                     Transformers, rotating machines. DC generators and motors. Alternators. AC motors.</dd>
  124.                 </li> <br><br>
  125.                     
  126.             </ul> 
  127.             </td>
  128.             </tr>
  129.     
  130.         </table>
  131.         </TD></TR>
  132. </TABLE>
  133. </BODY>
  134. </HTML>
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Try applying these styles:

Code: [ Select ]
ul{margin:0;padding:0;}
li{margin:0;padding:0;}
  1. ul{margin:0;padding:0;}
  2. li{margin:0;padding:0;}


That should be a good starting point to work from.
  • feelgood
  • Newbie
  • Newbie
  • feelgood
  • Posts: 12
  • Loc: NY

Post 3+ Months Ago

umm but I *do* want my list to be aligned as it is though. i think that solution would set the margins of the entire list.

however, I am trying to left-indent only one item inside the dt's. that's the bracketed item. and i am trying to make everything else stay the same.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

ahhh, sorry, I mis-read your original post. Let me look again. :oops:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Can you put <dt> and <dl> elements in an <li>? I thought they had to go in a <dl>

If you want to align a piece of text inside the <dt> you will need to use an additional element (like a <span>) and then use CSS to style that.

Personally I would rewrite the entire html to be like the following, removing the <li>'s and <br>'s:

Code: [ Select ]
<dl>
  <dt id="ELE424">
    <span>[ELE424]</span>Transmission Lines
  </dt>
  <dd>
    Circuit theory approach to wave propagation on
    transmission lines used in computers and communication
    systems. Transient and steady state signal analysis.
    Characteristics of transmission system devices.
  </dd>
  <dt id="coursecode">
    <span>[coursecode]</span>course title
  </dt>
  <dd>
    course description
  </dd>
  <dt id="coursecode">
    <span>[coursecode]</span>course title
  </dt>
  <dd>
    course description
  </dd>
</dl>
  1. <dl>
  2.   <dt id="ELE424">
  3.     <span>[ELE424]</span>Transmission Lines
  4.   </dt>
  5.   <dd>
  6.     Circuit theory approach to wave propagation on
  7.     transmission lines used in computers and communication
  8.     systems. Transient and steady state signal analysis.
  9.     Characteristics of transmission system devices.
  10.   </dd>
  11.   <dt id="coursecode">
  12.     <span>[coursecode]</span>course title
  13.   </dt>
  14.   <dd>
  15.     course description
  16.   </dd>
  17.   <dt id="coursecode">
  18.     <span>[coursecode]</span>course title
  19.   </dt>
  20.   <dd>
  21.     course description
  22.   </dd>
  23. </dl>


THen you would probably want to use a float:right to align that coursecode span

Edit, also do away with the bold tags and the <a> tags as targets.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

or, you could simplify things greatly by going with a different strategy all together...

Code: [ Select ]
<html>
<head>
<style type="text/css">
body{background:#B0C4DE;font-family:verdana;}
h1{margin:0 0 5px 0;padding:0;}
h2{margin:15px 0 5px 0;padding:0;}
h3{margin:0 0 5px 0;padding:0;}
p{margin:0 0 5px 20px;padding:0;}
#head{background:#D3D3D3;}
</style>
</head>

<body>
<div id="head"><h1>COURSE DESCRIPTIONS</h1>
<p><i>Senior year / spring course descriptions are excluded from this list.</i></p></div>
<a name="ELE424"></a>
<h2>Transmission Lines</h2>
<h3>[ELE424]</h3>
<p>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems. Transient and steady state signal analysis. Characteristics of transmission system devices.</p>
<h2>Transmission Lines</h2>
<h3>[ELE424]</h3>
<p>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems. Transient and steady state signal analysis. Characteristics of transmission system devices.</p>
</body>
</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body{background:#B0C4DE;font-family:verdana;}
  5. h1{margin:0 0 5px 0;padding:0;}
  6. h2{margin:15px 0 5px 0;padding:0;}
  7. h3{margin:0 0 5px 0;padding:0;}
  8. p{margin:0 0 5px 20px;padding:0;}
  9. #head{background:#D3D3D3;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="head"><h1>COURSE DESCRIPTIONS</h1>
  14. <p><i>Senior year / spring course descriptions are excluded from this list.</i></p></div>
  15. <a name="ELE424"></a>
  16. <h2>Transmission Lines</h2>
  17. <h3>[ELE424]</h3>
  18. <p>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems. Transient and steady state signal analysis. Characteristics of transmission system devices.</p>
  19. <h2>Transmission Lines</h2>
  20. <h3>[ELE424]</h3>
  21. <p>Circuit theory approach to wave propagation on transmission lines used in computers and communication systems. Transient and steady state signal analysis. Characteristics of transmission system devices.</p>
  22. </body>
  23. </html>


btw: These are not a valid STYLE definitions:
Code: [ Select ]
background-color= #B0C4DE

font-size: 12;

margin: 10,25,10,
  1. background-color= #B0C4DE
  2. font-size: 12;
  3. margin: 10,25,10,
  • feelgood
  • Newbie
  • Newbie
  • feelgood
  • Posts: 12
  • Loc: NY

Post 3+ Months Ago

I am so sorry guys, I made a huge mistake while describing the problem. :oops: I meant to say aligning the course code to the very *right* side of the table.

both the methods work awesome for left alignment but to pull the course code to the very right side, the only solution i could come up with is using a one row two column table.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

feelgood wrote:
I meant to say aligning the course code to the very *right* side of the table.
I understood the problem, I just didn't explain my answer very well lol.

Quote:
If you want to align a piece of text inside the <dt> you will need to use an additional element (like a <span>) and then use CSS to style that...... Then you would probably want to use a float:right to align that coursecode span


If you put the course code in a span, then use CSS to set float:right; on the spans inside a <dt>, it will align to the very right hand side.

Code: [ Select ]
dl dt span{
  float:right;
}
  1. dl dt span{
  2.   float:right;
  3. }

You might need to add a width to it as well, I'm not sure. Actually, check out this:

http://www.caffeinefuelled.net/richard- ... ourses.htm

I've just taken the html I posted before and added some CSS.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5146
  • Loc: SC-USA

Post 3+ Months Ago

Nice RTM!

Yes, feelgood, you had me going the wrong direction. :) Glad you got it worked out.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

An elegant solution! A few nitpicks :D :

You may want to have a space after </span>, so that if a browser from a jillion years ago didn't know to float the course code, it'd look slightly better. This will improve things for possibly 0.00000001% of your viewers.

If you have an XHTML document type declaration, you might want to have your meta tag end with />. :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sam Hughes wrote:
You may want to have a space after </span>, so that if a browser from a jillion years ago didn't know to float the course code, it'd look slightly better. This will improve things for possibly 0.00000001% of your viewers.

It'll also add a indent on the title, which <b>could</b> be removed using the text-indent property and trial and error. It's a bit hacky and less than reliable though. The only way I can think of to do this effectively is to have an additional html element (additional span) with a space in it set to display:none; again, hacky but more reliable. Probably is another way, but I should be in bed by now lol.

Quote:
If you have an XHTML document type declaration, you might want to have your meta tag end with />. :D

ummmmm, I just found an old file and stripped out the body contents, no idea why that page is like that. My bad :lol:
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

Or you could put the space _before_ </span>; if there's an extra space on the end of the right-floated number it shouldn't be a problem.
  • feelgood
  • Newbie
  • Newbie
  • feelgood
  • Posts: 12
  • Loc: NY

Post 3+ Months Ago

wow thank you so much!

Post Information

  • Total Posts in this topic: 13 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.