προβλήμα με css

bscyb · 2 Αυγούστου 2012

Καλησπέρα έχω φτιάξει αυτήν εδώ την φόρμα :

και αυτό που προσπαθώ να κάνω αλλά δεν τα καταφέρνω είναι να φέρω το label και το select στην ίδια ευθεία (δηλαδή το label Όνομά Αλγόριθμου και η selection list να είναι στην ίδια γραμμή)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="date" content="Mon,14 May 2012" />
<title>Αναζήτηση Αλγορίθμου</title>
<link rel="stylesheet" href="menu.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="description" content="Αναζήτηση Αλγορίθμων αναζήτησης & ταξινόμησης ,Search for Sort & Search Algorithms" />
<meta name="keywords" content="Αναζήτηση Αλγορίθμων,Anazitisi Algorithmon,Search for Algorithms" />
<meta name="revised" content="14/5/2012"
<meta name="author" content="Nikos" />
<link rel="shortcut icon" href="img/favicon.ico" />
</head>
<body>
<div id="content">
<ul id="mbmenuebul_table" class="mbmenuebul_menulist" style="width: 963px; height: 33px;">
<li class="spaced_li"><a href="index.php" target="_self"><img id="mbi_mbmenu_1" src="img/menu_images/index.png" name="mbi_mbmenu_1" width="123" height="33"
style="vertical-align: bottom;" border="0" alt="Αρχική Σελίδα" title="" /></a></li>
<li class="spaced_li"><a href="calgorithms.php" target="_self"><img id="mbi_mbmenu_2" src="img/menu_images/c.png" name="mbi_mbmenu_2" width="168" height="33"
style="vertical-align: bottom;" border="0" alt="Αλγόριθμοι σε C" title="" /></a></li>
<li class="spaced_li"><a href="cppalgorithms.php" target="_self"><img id="mbi_mbmenu_3" src="img/menu_images/cpp.png" name="mbi_mbmenu_3" width="168" height="33"
style="vertical-align: bottom;" border="0" alt="Αλγόριθμοι σε C++" title="" /></a></li>
<li class="spaced_li"><a href="javaalgorithms.php" target="_self"><img id="mbi_mbmenu_4" src="img/menu_images/java.png" name="mbi_mbmenu_4" width="168" height="33"
style="vertical-align: bottom;" border="0" alt="Αλγόριθμοι σε JAVA" title="" /></a></li>
<li class="spaced_li"><a href="search.php" target="_self"><img id="mbi_mbmenu_5" src="img/menu_images/search.png" name="mbi_mbmenu_5" width="168" height="33"
style="vertical-align: bottom;" border="0" alt="Αναζήτηση Αλγορίθμου" title="" /></a></li>
<li><a href="links.php" target="_self"><img id="mbi_mbmenu_6" src="img/menu_images/links.png" name="mbi_mbmenu_6" width="168" height="33"
style="vertical-align: bottom;" border="0" alt="Προτεινόμενα Links" title="" /></a></li>
</ul>
<script type="text/javascript" src="js/menu.js"></script>
<div id="text">
<h3 class="searchalg">Αναζήτηση Αλγορίθμου</h3>
<div id="searchform">
<div id="form2">
<form name="sform" id="sform" method="post" action="submitsform.php">
<label for="algname">Ονομά Αλγορίθμου:</label>
<select name="algname" tabindex="1">
<option value="linear">Αλγόριθμος γραμμικής αναζήτησης (Linear search)</option>
<option value="binary">Αλγόριθμος δυαδικής αναζήτησης (Binary search)</option>
<option value="bst">Δυαδικά δένδρα αναζήτησης (Βinary search trees)</option>
<option value="dfs">Αναζήτηση Κατά Βάθος (Depth-first search (DFS))</option>
<option value="bfs">Αναζήτηση κατά πλάτος (Breadth-first search (BFS))</option>
<option value="Dijkstra">Αλγόριθμος του Dijkstra (Dijkstra's algorithm)</option>
<option value="bubble">Ταξινόμηση φυσαλίδας (Bubble sort)></option>
<option value="selection">Ταξινόµηση µε Επιλογή (Selection sort)</option>
<option value="insertion">Ταξινόµηση µε Εισαγωγή (Insertion sort)</option>
<option value="merge">Ταξινόμηση με συγχώνευση (Merge sort)</option>
<option value="quick">Γρήγορη ταξινόµηση (Quick sort)</option>
<option value="shell">Ταξινόμηση του Shell (Shell sort)</option>
<option value="heap">Ταξινόμηση σωρού (Heap sort)</option>
</select>
<label for="proglanduage">Γλώσσα Προγραμματισμού:</label>
<select name="proglanguage" tabindex="2">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="JAVA">JAVA</option>
</select>
<button type="submit" name="submitsform" id="submitsform">Αναζήτηση</button>
</div>
</div>
<div id="endsform">
</div>
</div>
</div>
<div id="footer">
<ul class="bottom-menu">
<li><a href="contact.php" target="_self">Επικοινωνία</a></li>
<li><a href="help.php" target="_self">Βοήθεια</a></li>
<li><a href="sitemap.php" target="_self">Sitemap</a></li>
</ul>
</div>
</body>
</html>

και CSS:

body
{
background-image: url("img/background2.jpg");
background-attachment: fixed;
}

#content
{
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 963px;
background-color: #FFFFFF;
}

#text
{
width: 100%;
padding-top: 20px;
height:100%;
text-align: left;
}

#footer
{
margin-left: 195px;
width: 963px;
}

h3.searchalg
{
color: #000000;
font-size: 20px;
}

#searchform
{
background-color:#d3d3d3;
margin-left:50px;
margin-right:50px;
padding-top: 5px;
padding-bottom: 100px;
}

#form2
{
padding-top: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
}

#form2 button
{
width: 100px;
float: right;
margin-top: 20px;
margin-right:280px;
}

#form2 select
{
padding: 2px;
width: 375px;
border: 2px solid #ccc;
color: #000000;
font-size: 15px;
}

#form2 label
{
text-align: left;
float: left;
margin-right: 15px;
width: 200px;
padding-top: 5px;
color: #000000;
}

#endsform
{
padding-bottom: 300px;
}

defacer · 2 Αυγούστου 2012

Please πέρνα τη σελίδα σου στο JSFiddle.com ή βάλτην κάπου online για να μπορούμε να την δούμε με developer tools.

Για μένα προσωπικά η ερώτηση ως έχει είναι too much work για να ασχοληθώ, πιθανόν και για άλλους. Help us to help yourself.

pant13 · 2 Αυγούστου 2012

float right στο select

bscyb · 3 Αυγούστου 2012

Please πέρνα τη σελίδα σου στο JSFiddle.com ή βάλτην κάπου online για να μπορούμε να την δούμε με developer tools.

Για μένα προσωπικά η ερώτηση ως έχει είναι too much work για να ασχοληθώ, πιθανόν και για άλλους. Help us to help yourself.

http://jsfiddle.net/wQBwg/

pant13 το float:right στο select δεν διορθώνει το πρόβλημα.

thanocaster · 3 Αυγούστου 2012

Είμαι από κινητό και δεν μπορώ να δω τον κώδικά σου ακριβώς, αλλα ίσως να σου κάνει αυτό:

>
select { display: inline; }

bscyb · 3 Αυγούστου 2012

Όχι φίλε δυστυχώς ούτε το display:inline; δεν διορθώνει το πρόβλημα.

kalogeros · 3 Αυγούστου 2012

Αύξησε το width του id=form2. Όταν το έκανα 710, όλα ήρθαν στη θέση τους.

>
#form2
{
padding-top: 20px;
width: 710px;
margin-left: auto;
margin-right: auto;
}

Επίσης μετά το κλείσιμο της πρώτης select, βάλε το παρακάτω

>
<div style="clear:both;"></div>

bscyb · 3 Αυγούστου 2012

ευχαριστώ

έβαλα 710px το width και διορθώθηκε το πρόβλημα

Σύνδεση

προβλήμα με css

Προτεινόμενες αναρτήσεις

bscyb

defacer

pant13

bscyb

thanocaster

bscyb

kalogeros

bscyb

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση