40 users online (0 members and 40 guests)  


  Results 1 to 6 of 6

Related

  1. How to use getElementById with a body element    Forum: Javascript Forum
    Replies: 4
  2. Mutiple element id's    Forum: Javascript Forum
    Replies: 2
  3. Load page into HTML element    Forum: Javascript Forum
    Replies: 1
  4. Replies: 4
  5. HTML table cell alignment    Forum: HTML Forum
    Replies: 1
  1. #1
    kaustubhtalathi's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2009
    Posts
    3

    html css element alignment

    Hi,

    I have two elements on the html file:

    <div class="midcontainer">
    <p>Enterprise Messaging Access Gateway
    <div class="input_interface_sm">
    <div><div>End Session</div></div>
    </div>
    </p>
    </div>

    I am trying to align them on single line using the following css:

    p {padding:0;margin:0 auto;font:bold 20px/20px arial,sans-serif;}

    div.input_interface_sm, div.input_interface_sm div, div.input_interface_sm div div {cursorointer;color:#000;font-weight:bold;font-size:11px;line-height:18px;}
    div.input_interface_sm {float:right;background:url(../i/input_buttons/small_gray_button_left.gif) transparent no-repeat top left;padding-left:5px;}
    div.input_interface_sm div {background:url(../i/input_buttons/small_gray_button_right.gif) transparent no-repeat top right;padding-right:5px;}
    div.input_interface_sm div div {background:url(../i/input_buttons/small_gray_button_1px.gif) #CFCFCF repeat-x;padding:0;}

    /*div.midcontainer {border-bottom:1px solid #ccc;}*/

    "End Session" is the button

    Please help, Thanks in advance!!!

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: html css element alignment

    I am not understanding what it is you want to align.

  3. #3
    kaustubhtalathi's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2009
    Posts
    3

    Re: html css element alignment

    Enterprise Messaging Access Gateway is the header and "End Session" is the button.

    Now when I run the html file I want them horizontally to be on same line but on left and right of it.

    Enterprise Messaging Access Gateway comes on the first line on left side.
    while "End Session" comes on the line below it on the right side.

  4. #4
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: html css element alignment

    Try changing <div class="input_interface_sm"> to <span class="input_interface_sm">. Of course, don't forget to update your CSS and the corresponding close tag in the HTML.

  5. #5
    kaustubhtalathi's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2009
    Posts
    3

    Re: html css element alignment

    no its not workiing....sorry

  6. #6
    markei's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2009
    Location
    Westminster, MD
    Posts
    19

    Talking Re: html css element alignment

    Quote Originally Posted by kaustubhtalathi View Post
    Hi,

    I have two elements on the html file:

    <div class="midcontainer">
    <p>Enterprise Messaging Access Gateway
    <div class="input_interface_sm">
    <div><div>End Session</div></div>
    </div>
    </p>
    </div>

    I am trying to align them on single line using the following css:

    p {padding:0;margin:0 auto;font:bold 20px/20px arial,sans-serif;}

    div.input_interface_sm, div.input_interface_sm div, div.input_interface_sm div div {cursorointer;color:#000;font-weight:bold;font-size:11px;line-height:18px;}
    div.input_interface_sm {float:right;background:url(../i/input_buttons/small_gray_button_left.gif) transparent no-repeat top left;padding-left:5px;}
    div.input_interface_sm div {background:url(../i/input_buttons/small_gray_button_right.gif) transparent no-repeat top right;padding-right:5px;}
    div.input_interface_sm div div {background:url(../i/input_buttons/small_gray_button_1px.gif) #CFCFCF repeat-x;padding:0;}

    /*div.midcontainer {border-bottom:1px solid #ccc;}*/

    "End Session" is the button

    Please help, Thanks in advance!!!

    ok, first fix the error in your CSS for cursor: pointer; I think the parser trashed it, as it did mine and replaced the : p with a smiley face, that why the edit.

    Then the code you're looking for is:
    Code:
    div.midcontainer p {float:left;}



Tags for this Thread