Just some inline issues.

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

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

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

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

Sign In

Just some inline issues.

Recommended Posts

BoltZ

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information