Member_2_6492660_1
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?
check it out at www.tomsmp3.com
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>
check it out at www.tomsmp3.com
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Then added back your content http://jsbin.com/nidoku/2/edit in full view http://jsbin.com/nidoku/2/
HTML BODY
Which div's did you want lined up?
<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 -->
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>
CSSbody{
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{}
There will probably need to be more tweaking and for anybody else helping, please use the jsbin. http://jsbin.com/nidoku/2/editWhich 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.
ASKER
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
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
ASKER
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
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
ASKER
Thanks any thoughts?