Link to home
Start Free TrialLog in
Avatar of Member_2_6492660_1
Member_2_6492660_1Flag for United States of America

asked on

How to properly Align my buttons using Style CSS code

ASP classic
HTML 5
CSS

Trying to get first two DIV on same line

Then all the buttons on the left as the are

But my code for some reason places the first button "Show All Artists" in the center of the page

Here is my code what Am I missing?

</div>
<font color=#DC143C>
<div>
<div style="width:40%;text-align:left;float:left;">
    <b>
    <form name="input" action="music2.asp" method="get">
    Song, Artist, Album: <input type="text" name="song">
    <input type="submit" value="Search">
    </form>
    </b></div>
<div style="width:30%;text-align:center;float:left;">
    <b>
    <form action="music4.asp">
    <select name="genre">
    <option value="Alternative Rock">Alternative Rock</option>
    <option value="Alternative Metal">Alternative Metal</option>
    <option value="Classical">Classical</option>
    <option value="Country Music">Country Music</option>
    <option value="Dance">Dance</option>
    <option value="Electronic Rock">Electronic Rock</option>
    <option value="Funk Soul">Funk Soul</option>
    <option value="Hard Rock">Hard Rock</option>
    <option value="Hip-Hop">Hip-Hop</option>
    <option value="Jazz">Jazz</option>
    <option value="Musicals">Musicals</option>
    <option value="New Wave">New Wave</option>
    <option value="Orchestral">Orchestral</option>
    <option value="POP">POP</option>
    <option value="Pop/Rock">Pop/Rock</option>
    <option value="Punk">Punk</option>
    <option value="RAP">RAP</option>
    <option value="R&B">R&B</option>
    <option value="Rock" selected>Rock</option>
    </select>
    <input type="submit" value="Select Genre">
    </form>
    </b>
    </div>
    </div>
    <br>
    <form>
    <input type="button" value="Show All Artists" onClick="window.location.href='ArtistSearch.asp'">
    </form> 
    <br>
    <form>
    <input type="button" value="Show All Albums" onClick="window.location.href='AlbumSearch.asp'">
    </form>
    <br> 
    <form>
    <input type="button" value="Show All MP3 Songs" onClick="window.location.href='music9.html'">
    </form> 
    <br>
    <form> 
    <input type="button" value="Disclaimer Please Read " onClick="window.location.href='Disclaimer.htm'">
    </form>
    <p>
	<script src="js/get-date.js"></script>
    </p>
<div id="bottomright">             
  <form>
    <input type="button" value="Contact US" onClick="window.location.href='mailto:webmaster@tgcsnet.com?subject=User requesting info'">
  </form>               
  <form> 
    <input type="button" value="Sign Our Guest Book" onClick="window.location.href='GuestBook.htm'">
  </form> 
</div>

<div class="fb-like" data-href="http://www.tomsmp3.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<br>
<div align="left">
<a href="https://twitter.com/xxxxxxxx" class="twitter-follow-button" data-show-count="false">Follow US</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="xxxxxxxxx">Tweet</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

Open in new window



check it out at www.tomsmp3.com
Avatar of Member_2_6492660_1
Member_2_6492660_1
Flag of United States of America image

ASKER

Scott

Thanks  any thoughts?
Avatar of Scott Fell
Is this your home page?  

Check out the top 2 div's.  They close, then open.    We need to see this with the css.  Can you point to the page this is on currently.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_6492660_1
Member_2_6492660_1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Not the asp code.  The rendered HTML.  We are dealing with the front end of things.  I am just going to assume the css is on your home page.
Ok just to have a fresh start, I cleaned up your HTML.   I started with a skeleton http://jsbin.com/nidoku/1/edit
<div id="header">
  <div class="title"></div><!-- end title -->
  <div class="animated_marquee"></div><!-- end animated_marquee -->
</div><!-- end header -->
<div id="main">
  
</div>  <!-- end Main -->

Open in new window


Then added back your content  http://jsbin.com/nidoku/2/edit in full view http://jsbin.com/nidoku/2/
HTML BODY
<div id="fb-root"></div>
<script type="text/javascript" src="http://www.tomsmp3.com/js/Facebook.js"></script>  
<div id="header">
  <div class="title">
    <h1>Welcome to Tom's Free MP3 Music Site Listen for Free to over 34,000 Songs</h1>
  </div><!-- end title -->
  <div class="animated_marquee">
    <div data-speed="2000" data-direction="right" class='marquee m1'>
King Floyd | King Harvest | King Khan & BBQ | Kings Of Leon | Kingsmen | Kingston Trio | Kinks | Kip Moore | Kiss | Kix Brooks | Klaxons | Klezmatics | KLF | Klymaxx | Knack | Kokomo | Kool & the Gang | Kool Moe Dee | Korn | Kris Kristofferson | 
</div>
   <div data-speed="1000" data-direction="right" class='marquee m2'>
RAP | Rock | Pop/Rock | Funk Soul | Alternative Rock | Funk |  | Hip-Hop | Orchestral | Alternative Metal | Punk | Musicals | New Wave | POP | R&B | Country Music | Electronic Rock | Classical | Hard Rock | Dance | 
</div> 
    
  </div><!-- end animated_marquee -->
</div><!-- end header -->
<div id="main">
  
  <div id="search">
    <b>
    <form name="input" action="music2.asp" method="get">
      <h2>Song, Artist, Album:</h2> 
    <input type="text" name="song">
    <input type="submit" value="Search">
    </form>
    </b>
</div>
  <div id="select_genre">
    <b>
    <form action="music4.asp">
    <select name="genre">
    <option value="Alternative Rock">Alternative Rock</option>
    <option value="Alternative Metal">Alternative Metal</option>
    <option value="Classical">Classical</option>
    <option value="Country Music">Country Music</option>
    <option value="Dance">Dance</option>
    <option value="Electronic Rock">Electronic Rock</option>
    <option value="Funk Soul">Funk Soul</option>
    <option value="Hard Rock">Hard Rock</option>
    <option value="Hip-Hop">Hip-Hop</option>
    <option value="Jazz">Jazz</option>
    <option value="Musicals">Musicals</option>
    <option value="New Wave">New Wave</option>
    <option value="Orchestral">Orchestral</option>
    <option value="POP">POP</option>
    <option value="Pop/Rock">Pop/Rock</option>
    <option value="Punk">Punk</option>
    <option value="RAP">RAP</option>
    <option value="R&B">R&B</option>
    <option value="Rock" selected>Rock</option>
    </select>
    <input type="submit" value="Select Genre">
    </form>
  
<div><!-- end select_genre -->
  <div>
    <form>
      <input type="button" value="Show All Artists" onclick=
      "window.location.href='ArtistSearch.asp'" />
    </form>
  </div>

  <div>
    <form>
      <input type="button" value="Show All Albums" onclick=
      "window.location.href='AlbumSearch.asp'" />
    </form><br />

    <form>
      <input type="button" value="Show All MP3 Songs" onclick=
      "window.location.href='music9.html'" />
    </form><br />

    <form>
      <input type="button" value="Disclaimer Please Read " onclick=
      "window.location.href='Disclaimer.htm'" />
    </form>

    <p><script src="js/get-date.js" type="text/javascript">
</script></p>
  </div>
  
  
  
</div>  <!-- end Main -->
<div id="bottomright">             
  <form>
    <input type="button" value="Contact US" onClick="window.location.href='mailto:webmaster@tgcsnet.com?subject=User requesting info'">
  </form>               
  <form> 
    <input type="button" value="Sign Our Guest Book" onClick="window.location.href='GuestBook.htm'">
  </form> 
</div><!-- end bottom right -->      
<div class="fb-like" data-href="http://www.tomsmp3.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<br>
<div align="left">
<a href="https://twitter.com/trgrassijr" class="twitter-follow-button" data-show-count="false">Follow US</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="trgrassijr">Tweet</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>

Open in new window

CSS
body{
  background:url(http://www.tomsmp3.com/images/ilm.jpg) repeat-x; 
  color:#DC143C;
background-color:black;

}
#container{max-height:500px;}

.#main h1{color:#DC143C;}
#main h2{font-size:18px;}
.marquee.m1{color:#FFFFFF;}
.marquee.m2{color:#0000FF;}
#main #search{/*removed */}

#main #select_genre{/*removed */}



a{color:#DC143C;float:right;margin-right:20px;}
#bottomright{}

Open in new window

There will probably need to be more tweaking and for anybody else helping, please use the jsbin. http://jsbin.com/nidoku/2/edit

Which div's did you want lined up?
It's not really fixed.  Maybe visually, but I tried to get your code in line.  Oh well. As long as  you are happy.
Scott

Looked at your code changes

Thinking of doing that

Right now busy entering the genre of all 5800 recordings I have long process

Will pick up on this in a couple of days ok
Scott

Fixed it

Needed another <br> before the button form code only had one <br>  the second one did the trick

check it out www.tomsmp3.com