Aligning only a part of the line in a list

feelgood
Newbie
Joined: Aug 04, 2004
Posts: 12
Loc: NY
Status: Offline

August 12th, 2004, 6:01 am

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>

<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>

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

August 12th, 2004, 6:01 am

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

August 12th, 2004, 6:36 am

Try applying these styles:

Code: [ Select ]

ul{margin:0;padding:0;}
li{margin:0;padding:0;}

ul{margin:0;padding:0;}
li{margin:0;padding:0;}

That should be a good starting point to work from.

- dM

feelgood
Newbie
Joined: Aug 04, 2004
Posts: 12
Loc: NY
Status: Offline

August 12th, 2004, 6:57 am

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
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

August 12th, 2004, 7:40 am

ahhh, sorry, I mis-read your original post. Let me look again. :oops:

- dM

rtm223
Mastermind
Joined: Mar 24, 2004
Posts: 1855
Loc: Uk
Status: Offline

August 12th, 2004, 7:59 am

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>

<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>

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.

CSS website design tutorials

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

August 12th, 2004, 8:05 am

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>

<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>

btw: These are not a valid STYLE definitions:

Code: [ Select ]

background-color= #B0C4DE

font-size: 12;

margin: 10,25,10,

background-color= #B0C4DE
font-size: 12;
margin: 10,25,10,

- dM

feelgood
Newbie
Joined: Aug 04, 2004
Posts: 12
Loc: NY
Status: Offline

August 13th, 2004, 12:05 am

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
Joined: Mar 24, 2004
Posts: 1855
Loc: Uk
Status: Offline

August 13th, 2004, 12:30 am

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;
}

dl dt span{
float:right;
}

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.

CSS website design tutorials

digitalMedia
a.k.a. dM
Joined: Dec 29, 2003
Posts: 5169
Loc: SC-USA
Status: Offline

August 13th, 2004, 3:51 am

Nice RTM!

Yes, feelgood, you had me going the wrong direction.

Glad you got it worked out.

- dM

Mas Sehguh
Mastermind
Joined: Aug 07, 2004
Posts: 1853
Status: Offline

August 13th, 2004, 5:47 am

An elegant solution! A few nitpicks

:

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 />.

rtm223
Mastermind
Joined: Mar 24, 2004
Posts: 1855
Loc: Uk
Status: Offline

August 14th, 2004, 2:12 pm

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 />.

ummmmm, I just found an old file and stripped out the body contents, no idea why that page is like that. My bad :lol:

CSS website design tutorials

Mas Sehguh
Mastermind
Joined: Aug 07, 2004
Posts: 1853
Status: Offline

August 14th, 2004, 2:21 pm

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
Joined: Aug 04, 2004
Posts: 12
Loc: NY
Status: Offline

August 17th, 2004, 7:00 am

wow thank you so much!

Page 1 of 1

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 13 posts
Users browsing this forum: No registered users and 101 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

Aligning only a part of the line in a list

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information