Κάτι σαν αυτή τη σελίδα...

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

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

Απάντηση
nikpony
Δημοσιεύσεις: 104
Εγγραφή: 12 Ιούλ 2006 02:58

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από nikpony » 28 Ιουν 2009 23:51

Καλησπέρα!
Θέλω να πετύχω ότι βλέπετε στην παρακάτω σελίδα την οποία και είχε ποστάρει εδώ ο χρήστης fusion πριν καιρό.

http://ringvemedia.com/

Θέλω λοιπόν να βάλω και εγώ ένα background στη σελίδα μου που θα προσαρμόζεται ανάλογα με την ανάλυση που έχει ο χρήστης.
Πως μπορεί να γίνει αυτό;
Έψαξα στο forum μήπως βρω κάτι αλλά δε βρήκα ακριβώς αυτό που ψάχνω.
Σας ευχαριστώ εκ των προτέρων...

Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από Pavel » 29 Ιουν 2009 23:03

Let's rip 'n' roll!



CSS

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

html, body, #bg, #bg table, #bg td
{
	width:100%;
	height:100%;
	overflow:hidden;
}

#bg div
{
	position:absolute;
	width:200%;
	height:200%;
	top:-50%;
	left:-50%;
}
			
#bg td
{
	vertical-align:middle;
	text-align:center;
}

#bg img
{
	min-height:50%;
	min-width:50%;
	margin:0 auto;
}
HTML

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

<div id="bg">
	<div>
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<img alt="" src="bg.jpg" />
				</td>
			</tr>
		</table>
	</div>
</div>
Javascript

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

<script language="javascript">
/*
	Disable keys LEFT, UP, RIGHT, DOWN
*/	
document.onkeypress = myCheck;

function myCheck&#40;e&#41;
&#123;
	var myEvent = window.event ? event &#58; e;
	var myChar = myEvent.charCode ? myEvent.charCode &#58; myEvent.keyCode;
	
	if &#40;myChar >= 37 && myChar <= 40&#41;
	&#123;
		return false;
	&#125;
&#125;	
</script>
Εσύ είσαι τρελός.

nikpony
Δημοσιεύσεις: 104
Εγγραφή: 12 Ιούλ 2006 02:58

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από nikpony » 30 Ιουν 2009 12:27

Δεν βλέπω να γίνεται τίποτα, τα είχα δοκιμάσει βασικά και πριν αυτά.

Άβαταρ μέλους
Stadem
Δημοσιεύσεις: 198
Εγγραφή: 10 Μαρ 2007 20:45

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από Stadem » 30 Ιουν 2009 12:55

Πολύ space.
Μπορεί αυτό να προσαρμοστεί σαν backgrount table ή σαν backgrount page?
web-IQ Interactive Quality
Εικόνα

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

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από korgr » 30 Ιουν 2009 13:22

Ολη η ιστορια γινεται μεσα στο core.js


kina={

doc:{x:0,y:0},
fix:function(){
if(kina.bg.complete&&(db.offsetWidth!=kina.doc.x||db.offsetHeight!=kina.doc.y||kina.fix.src!=kina.bg.src)){
var bg=kina.bg.getSize();
kina.doc={x:db.offsetWidth,y:db.offsetHeight};
kina.fix.src==kina.bg.src||$extend(kina.fix,{p:bg.x/bg.y,src:kina.bg.src});
kina.bg.setStyles({width:(bg.y=kina.doc.x>(bg.x=Math.round(kina.doc.y*kina.fix.p)))?kina.doc.x:bg.x,height:bg.y?Math.round(kina.doc.x/kina.fix.p):kina.doc.y})
}
}

}

Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από Pavel » 30 Ιουν 2009 21:49

Τώρα που το δοκίμασα σε IE, όντως δεν παίζει, αλλά σε Firefox δουλεύει κανονικά
Εσύ είσαι τρελός.

nikpony
Δημοσιεύσεις: 104
Εγγραφή: 12 Ιούλ 2006 02:58

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από nikpony » 01 Ιούλ 2009 02:03

Ούτε με τον έναν ούτε με τον άλλον τρόπο γίνεται τίποτα σε μένα πάντως.
Με βλέπω να βρίσκω κανέναν άλλον τρόπο.

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από greekbytes » 01 Ιούλ 2009 13:39

Δες κι αυτό χωρίς τη χρήση javascript:
http://www.cssplay.co.uk/layouts/background.html

nikpony
Δημοσιεύσεις: 104
Εγγραφή: 12 Ιούλ 2006 02:58

Κάτι σαν αυτή τη σελίδα...

Δημοσίευση από nikpony » 01 Ιούλ 2009 21:49

Φαίνεται ότι δουλεύει!Σωστός ο Greekbytes...

Απάντηση

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

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

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