Fieldset και κεντράρισμα...

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 14 Δεκ 2011 18:05

Πώς μπορώ να κεντράρω στη σελίδα ένα fieldset;;;;;;

Γίνεται να κάνω κάτι στο body χωρίς κάποιο div;;;;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από korgr » 14 Δεκ 2011 18:30

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<fieldset style="margin&#58; 0 auto; width&#58;500px">
<legend>Title of fieldset</legend>
</fieldset>
</body>
</html>

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 14 Δεκ 2011 18:36

Νομίζω ότι αυτό που λές δε δουλεύει και επίσης ξέχασα να πω ότι το fieldset μου έχει "position: absolute;"

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από apsuh0s » 14 Δεκ 2011 20:23

Δεν δουλεύει γιατί ακριβώς το έχεις με position absolute.

Κώδικας: Επιλογή όλων

fieldset &#123;
   position&#58;absolute;
   width&#58;500px; /* dose ti dikia sou timi */
   top&#58;50px; /* dose ti dikia sou timi */
   right&#58;50px; /* dose ti dikia sou timi */
   bottom&#58;50px; /* dose ti dikia sou timi */
   left&#58;50px; /* dose ti dikia sou timi */
&#125;
Δώσε τις κατάλληλες τιμές σε όσα χρειάζονται και κέντραρε το
.ninja { color: black; visibility: hidden !important; }

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 14 Δεκ 2011 22:40

Αυτό που μου έδωσες μου έκανε παραμόρφωση το fieldset παρά στοίχιση :P
Από ότι κατάλαβα δεν παίζει να κεντράρεις ακριβώς ένα fieldset.....

αυτό είναι το body του html μου....

Κώδικας: Επιλογή όλων

<body>
	<img src="images/logo.png" height="150" width="150">
	<hr />
	<br />
	<form action="login_check.php" method="post" id="form">
		<fieldset>
			<legend>ΕΙΣΟΔΟΣ</legend>
			<table>
				<tr>
					<td><label>Ψευδώνυμο&#58;</label></td><td><input type="text" name="username" id="username" maxlength="25" class="text"></td>
				</tr>
				<tr>
					<td><label>Κωδικός&#58;</label></td><td><input type="password" name="password" id="password" maxlength="50" class="text"></td>
				</tr>
				<tr>
					<td colspan="2"><hr /></td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input type="submit" name="submit" value="Σύνδεση">&nbsp;<input type="button"	id="reset" value="Καθαρισμός"></td>
				</tr>
				<tr>
					<td colspan="2"><a href="register.php">Εγγραφή</a></td>
				</tr>
				<tr>
					<td colspan="2">
						<div id="check"></div>
					</td>
				</tr>
			</table>
			</legend>
		</fieldset>
	</form>
</body>
και αυτό το css μου:

Κώδικας: Επιλογή όλων

	body&#123;
		font-family&#58; Arial, Helvetica;
	&#125;
	
	fieldset &#123; 
		border&#58; 1px solid #003366;
		text-align&#58;center;
		position&#58; absolute;
	&#125;
	
	hr&#123;
		border&#58; 1px solid;
		color&#58; #003366;
	&#125;
	
	label &#123;
		color&#58; #003366;
		font-size&#58;13px;
		font-weight&#58; bold;
		display&#58;inline-block;
	&#125;
	
	input&#91;type="text"&#93; &#123;
		padding-top&#58; 5px;
		padding-bottom&#58; 5px;
		padding-left&#58; 5px;
		padding-right&#58; 5px;
		background-color&#58; #efefef;
		border&#58; 1px solid #e2e2e2;
		font-size&#58;16px;
		width&#58;220px;
	&#125;
	
	input&#91;type="text"&#93;&#58;focus&#123; 
		background-color&#58; #e2e2e2;
		border&#58; 1px solid #e2e2e2;
	&#125;
	
	input&#91;type="password"&#93; &#123;
		padding-top&#58; 5px;
		padding-bottom&#58; 5px;
		padding-left&#58; 5px;
		padding-right&#58; 5px;
		background-color&#58; #efefef;
		border&#58; 1px solid #e2e2e2;
		font-size&#58;16px;
		width&#58;220px;
	&#125;
	
	input&#91;type="password"&#93;&#58;focus&#123; 
		background-color&#58; #e2e2e2;
		border&#58; 1px solid #e2e2e2;
	&#125;
	
	select &#123;
		padding-top&#58; 5px;
		padding-bottom&#58; 5px;
		background-color&#58; #efefef;
		border&#58; 1px solid #e2e2e2;
		font-size&#58;16px;
	&#125;
	
	select&#58;focus &#123;
		background-color&#58; #e2e2e2;
		border&#58; 1px solid #e2e2e2;
	&#125;
	
	legend &#123;
		font-size&#58; 17px;
		border&#58; 1px solid #003366;
		color&#58; #003366;
	&#125;

	input&#91;type="submit"&#93;&#123;
		background&#58;-webkit-gradient&#40; linear, left top, left bottom, color-stop&#40;0.05, #ededed&#41;, color-stop&#40;1, #dfdfdf&#41; &#41;;
		background&#58;-moz-linear-gradient&#40; center top, #ededed 5%, #dfdfdf 100% &#41;;
		filter&#58;progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorstr='#ededed', endColorstr='#dfdfdf'&#41;;
		background-color&#58;#ededed;
		-moz-border-radius&#58;6px;
		-webkit-border-radius&#58;6px;
		border-radius&#58;6px;
		border&#58;1px solid #dcdcdc;
		display&#58;inline-block;
		color&#58;#003366;
		font-family&#58;Arial;		
		font-size&#58;15px;
		font-weight&#58;bold;
		padding&#58;4px 20px;
		text-decoration&#58;none;
	&#125;
	
	input&#91;type="submit"&#93;&#58;hover &#123;
		background&#58;-webkit-gradient&#40; linear, left top, left bottom, color-stop&#40;0.05, #dfdfdf&#41;, color-stop&#40;1, #ededed&#41; &#41;;
		background&#58;-moz-linear-gradient&#40; center top, #dfdfdf 5%, #ededed 100% &#41;;
		filter&#58;progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorstr='#dfdfdf', endColorstr='#ededed'&#41;;
		background-color&#58;#dfdfdf;
	&#125;
	
	input&#91;type="submit"&#93;&#58;active &#123;
		position&#58;relative;
		top&#58;1px;
	&#125;
	
	input&#91;type="button"&#93;&#123;
		background&#58;-webkit-gradient&#40; linear, left top, left bottom, color-stop&#40;0.05, #ededed&#41;, color-stop&#40;1, #dfdfdf&#41; &#41;;
		background&#58;-moz-linear-gradient&#40; center top, #ededed 5%, #dfdfdf 100% &#41;;
		filter&#58;progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorstr='#ededed', endColorstr='#dfdfdf'&#41;;
		background-color&#58;#ededed;
		-moz-border-radius&#58;6px;
		-webkit-border-radius&#58;6px;
		border-radius&#58;6px;
		border&#58;1px solid #dcdcdc;
		display&#58;inline-block;
		color&#58;#003366;
		font-family&#58;Arial;		
		font-size&#58;15px;
		font-weight&#58;bold;
		padding&#58;4px 20px;
		text-decoration&#58;none;
	&#125;
	
	input&#91;type="button"&#93;&#58;hover &#123;
		background&#58;-webkit-gradient&#40; linear, left top, left bottom, color-stop&#40;0.05, #dfdfdf&#41;, color-stop&#40;1, #ededed&#41; &#41;;
		background&#58;-moz-linear-gradient&#40; center top, #dfdfdf 5%, #ededed 100% &#41;;
		filter&#58;progid&#58;DXImageTransform.Microsoft.gradient&#40;startColorstr='#dfdfdf', endColorstr='#ededed'&#41;;
		background-color&#58;#dfdfdf;
	&#125;
	
	input&#91;type="button"&#93;&#58;active &#123;
		position&#58;relative;
		top&#58;1px;
	&#125;
	
	a&#58;link &#123;
		text-decoration&#58; none;
		color&#58; #003366;
		font-size&#58; 13px;
	&#125;
	
	a&#58;visited&#123;
		text-decoration&#58; none;
		color&#58; #003366;
		font-size&#58; 13px;
	&#125;
	
	a&#58;active&#123;
		text-decoration&#58; none;
		color&#58; #003366;
		font-size&#58; 13px;
		font-weight&#58; bold;
	&#125;
	
	a&#58;hover&#123;
		text-decoration&#58; underline;
		color&#58; #003366;
		font-size&#58; 13px;
	&#125;
		
	#check &#123;
		padding-top&#58; 10px;
		padding-bottom&#58; 10px;
		padding-left&#58; 5px;
		padding-right&#58; 5px;
		font-size&#58; 12px;
		background-color&#58; #ffebe8;
		border&#58; 1px solid #dd3c10;
		color&#58; #003366;
		text-align&#58; center;
	&#125;
	
το fieldset είναι κάτι μόνο του ότι πάω να προσθέσω βγάινει μέσα στο fieldset(ή πάνω) σαν το fieldset να έιναι μέρος του background :P έχω ζαλιστεί! αχαχαχαχα

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Fieldset και κεντράρισμα...

Δημοσίευση από fafos » 15 Δεκ 2011 02:17

apo thn stigmh pou dineis absolute den mporeis na gnorizeis tis diastaseis tou fieldset.. an tis gnorizes ekanes auto pou leei o apsuh0s..
mporeis na xrhsimopoihseis jquery gia na to kentrareis:

Κώδικας: Επιλογή όλων

<script>
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	var fieldwidth = $&#40;"fieldset"&#41;.width&#40;&#41;;
	var fieldheight = $&#40;"fieldset"&#41;.height&#40;&#41;;
	fieldwidth = &#40;fieldwidth / 2&#41;;
	fieldheight = &#40;fieldheight / 2&#41;;
	$&#40;"fieldset"&#41;.css&#40;'left', '50%'&#41;
	$&#40;"fieldset"&#41;.css&#40;'margin-left', -fieldwidth&#41;;
	$&#40;"fieldset"&#41;.css&#40;'top', '50%'&#41;
	$&#40;"fieldset"&#41;.css&#40;'margin-top', -fieldheight&#41;;
&#125;&#41;;
</script>
auto tha sto ferei sthn mesh kata platos kai ypsos...

to provlhma omos me ta periexomena kato apo thn forma tha paramenoun afou tha emfanizontai pano apo thn forma.. kai edo vazeis ligo javascript kai ena absolute sto div pou tha exei to periexomeno:

Κώδικας: Επιλογή όλων

	$&#40;".underform"&#41;.css&#40;'top', '50%'&#41;;
	$&#40;".underform"&#41;.css&#40;'margin-top', &#40;fieldheight * 1.2&#41;&#41;;
(to 1.2 to vazo gia na pesei ligo pio kato apo to fieldset, esy to orizeis oso thes)

o kodikas oloklhromenos:

Κώδικας: Επιλογή όλων

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	var fieldwidth = $&#40;"fieldset"&#41;.width&#40;&#41;;
	var fieldheight = $&#40;"fieldset"&#41;.height&#40;&#41;;
	fieldwidth = &#40;fieldwidth / 2&#41;;
	fieldheight = &#40;fieldheight / 2&#41;;
	$&#40;"fieldset"&#41;.css&#40;'left', '50%'&#41;
	$&#40;"fieldset"&#41;.css&#40;'margin-left', -fieldwidth&#41;;
	$&#40;"fieldset"&#41;.css&#40;'top', '50%'&#41;
	$&#40;"fieldset"&#41;.css&#40;'margin-top', -fieldheight&#41;;
	$&#40;".underform"&#41;.css&#40;'top', '50%'&#41;;
	$&#40;".underform"&#41;.css&#40;'margin-top', &#40;fieldheight * 1.2&#41;&#41;;

&#125;&#41;;
</script>

...style...
.underform&#123;
       position&#58;absolute;
       width &#58; 100%;
       text-align &#58; center;
&#125;

...h forma me to fieldset....

<div class="underform">katse kato apo thn forma</div>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από korgr » 15 Δεκ 2011 09:06

rafinos έγραψε:Αυτό που μου έδωσες μου έκανε παραμόρφωση το fieldset παρά στοίχιση :P
Αντί να κάνεις άστοχα σχόλια μέσα στην άγνοια σου, δεν κοιτάς να μάθεις τα βασικά του box modeling στα CSS?
Αυτό που σου έδωσα ΚΕΝΤΡΑΡΕΙ το Fieldset.
Πού?
Μα σε ένα σωστό template!
Εσύ έχεις κάνει έναν αχταρμά και μετά μας την λες πως δεν δουλεύουν αυτά που σου προτείνουμε!
Κεντράρω, σημαίνει τοποθετώ στο κέντρο του parent container.
Ψάξε λίγο γιατί στο 99% των περιπτώσεων όταν χρησιμοποιούμε position absolute, το parent container έχει position relative.

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 15 Δεκ 2011 16:37

Δεν σου την είπα γιατί πολύ απλά απάντησα στον apsyho... και γενικότερα για να σας ρωτάω σημαίνει ότι δεν μπορώ να σας την πω... δε φτάνει με βοηθάτε!!!
Με το δικό σου δεν κατάφερα κάτι γιατί όπως λες δεν είναι σωστό το όλο σκηνικό με αποτέλεσμα να μην φαίνεται το αποτέλεσμα...

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από gvre » 15 Δεκ 2011 17:23

Γιατί έχεις δώσει position:absolute στο fieldset; Δε βλέπω να το χρησιμοποιείς κάπου.

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 15 Δεκ 2011 17:34

για να μην έκανα και σε αυτό πατάτα... με το absolute δεν κάνω το fieldset να έχει το μέγεθος της φόρμας ή θα πρέπει να το κάνω με το fixed;;;

*το κέντραρα με την jquery όπως είπε ο fafos!!!!!!

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από gvre » 15 Δεκ 2011 17:54

Με κανένα από τα δύο. Βγάλε το position και βάλε text-align:center στο body και margin:0 auto; width: 500px στο fieldset. Σβήσε και το JavaScript που έγραψες και θα είσαι οκ.

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 15 Δεκ 2011 18:00

Μα για ποιον λόγο να κάνω το fieldset μου 500px??? Εγώ δεν το θέλω 500....

gvre
Δημοσιεύσεις: 990
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από gvre » 15 Δεκ 2011 18:04

Για να το κεντράρεις πρέπει να έχει κάποιο πλάτος.

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Fieldset και κεντράρισμα...

Δημοσίευση από rafinos » 15 Δεκ 2011 18:16

ναι ρε συ αυτό σου λέω ότι θέλω να έιναι ακριβώς γύρω από το ότι γράφω μέσα σε αυτό..... με αυτό που είπε ο fafos κέντραρε ακριβώς....
αν έχει κάποιο width νομίζω κεντράρει εύκολα (πρέπει να το είχα κάνει σε κάποια από τις προσπάθειες μου :P)

σε ευχαριστώ πολύ παντως!
ΌΛΟΥΣ ΣΑΣ ΕΥΧΑΡΙΣΤΩ ΠΟΛΥ!!!! :)

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Fieldset και κεντράρισμα...

Δημοσίευση από fafos » 15 Δεκ 2011 18:19

gvre έγραψε:Για να το κεντράρεις πρέπει να έχει κάποιο πλάτος.
me to absolute pairnei automata to platos ton esoterikon elements tou fieldset allios tou to dinei sto 100%... den einai h proteinomenh lysh alla thn xrhsimopoioun polloi logo ton diaforon pou exoun oi browsers..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης