BoltZ Posted December 7, 2008 Share Posted December 7, 2008 Hey I am trying to get all this stuff in the div top nav to be on one line in the blue box and I cant for the love of me get it. www.devwebsites.com/Tutorializing Link to comment https://forums.phpfreaks.com/topic/135985-just-some-inline-issues/ Share on other sites More sharing options...
dropfaith Posted December 7, 2008 Share Posted December 7, 2008 set a width and float one left one right and let the center one just sit there id say 16% width should work for all of them and leave 2% unaccounted for to use as a padding for the elements Link to comment https://forums.phpfreaks.com/topic/135985-just-some-inline-issues/#findComment-708881 Share on other sites More sharing options...
BoltZ Posted December 8, 2008 Author Share Posted December 8, 2008 I have width: 50% for the containing div. Any other idea? Here is the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tutorializing - Directory of tutorials for scripting websites and programming.</title> <link rel="icon" type="image/jpeg" href="images/favicon.jpg" /> <style type="text/css"> .logo { margin-left:10px; margin-top:5px; position:absolute; float:left; width:50%; height:100px; } .topnav{ background-color: #0d4e90; width:50%; margin-top:0px; margin-right:0px; height:25px; float:right; color: #FFFFFF; font-weight:bold; font-size:16px; } </style> </head> <body> <div class="logo"> <img src="images/logo.jpg" alt="banner" /> </div> <div class="topnav"> <div style="padding-left:40px; display:inline;">Tutorials: <script type="text/javascript"> function goto(form) { var index=form.select.selectedIndex if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} </script> <form name="form1" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ <option value="#" />HTML <option value="#" />CSS <option value="#" />JavaScript <option value="#" />PHP <option value="#" />MySQL <option value="#" />Ajax <option value="#" />SEO</select> </form></div> <div style="padding-left:50px; display:inline;">Forums: <form name="form2" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ </select> </form> </div> <div style="padding-left:50px; display:inline;">Resources: <form name="form3" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ </select> </form> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/135985-just-some-inline-issues/#findComment-708896 Share on other sites More sharing options...
BoltZ Posted December 8, 2008 Author Share Posted December 8, 2008 oK i got it all fixed by the floats but I cant get the stuff on one line. Look at www.devwebsites.com/Tutorializing see what I am talking about. Note that width doesnt matter. Even with only one of the drop downs it still doesnt do one line.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tutorializing - Directory of tutorials for scripting websites and programming.</title> <link rel="icon" type="image/jpeg" href="images/favicon.jpg" /> <style type="text/css"> .logo { margin-left:10px; margin-top:5px; position:absolute; float:left; width:50%; height:100px; } .topnav{ background-color: #0d4e90; width:50%; margin-top:0px; margin-right:0px; height:25px; float:right; color: #FFFFFF; font-weight:bold; font-size:16px; } </style> </head> <body> <div class="logo"> <img src="images/logo.jpg" alt="banner" /> </div> <div class="topnav"> <div style="padding-left:40px; display:inline; float:left;">Tutorials: <script type="text/javascript"> function goto(form) { var index=form.select.selectedIndex if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} </script> <form name="form1" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ <option value="#" />HTML <option value="#" />CSS <option value="#" />JavaScript <option value="#" />PHP <option value="#" />MySQL <option value="#" />Ajax <option value="#" />SEO</select> </form></div> <div style="padding-left:50px; float:right; display:inline;">Forums: <form name="form2" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ </select> </form> </div> <div style="padding-left:50px; display:inline; float:left;">Resources: <form name="form3" action="#"> <select name="select" onchange="goto(this.form)" size="1"> <option value="" />------Select------ </select> </form> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/135985-just-some-inline-issues/#findComment-708904 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.