Help! Text on image!

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
Άβαταρ μέλους
jastonas
Δημοσιεύσεις: 50
Εγγραφή: 09 Δεκ 2003 15:07

Help! Text on image!

Δημοσίευση από jastonas » 09 Δεκ 2003 21:37

hey, eimai newbie sto forum, k psaxnw apegnwsmena boh8eia..
eimai pisteuw ena bhma makria apo to na teleiwsw to site pou ftiaxnw...
k exw kollhsei se kati pou gia sas isws einai poly aplo...

parte to layout...
http://www.members.lycos.co.uk/jastonas ... ories.html
an 8elete mpeite http://www.members.lycos.co.uk/jastonas/preMPS/images na deite tis photoz, h an exete genikotera problem, apla ksekinhste apo to http://www.members.lycos.co.uk/jastonas/
loipon, auto einai xwrismeno se 6 images, k to html exei dhmiourgh8ei apo to imageready.
egw 8elw na balw ena keimeno sto mple-galazio fonto, to opoio omws einai poly megalo, opote 8elw na kanei scroll...
pws mporw na kanw kati tetoio?! 8a eimai oply eugnomwn se opoion boh8hsei... to xreiazomai poly!

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Help! Text on image!

Δημοσίευση από grjava » 10 Δεκ 2003 01:19

Αν και δεν κατάλαβα την ερωτησή σου πολύ καλά.. μάλλον (λέω μάλλον) θα πρέπει αυτά τα γραφικά να τα βάλεις ως background σε κάποιο table και μέσα σε αυτό θα βάλεις ότι θες (κυλιόμενο, σταθερό κείμενο κλπ)

Άβαταρ μέλους
jastonas
Δημοσιεύσεις: 50
Εγγραφή: 09 Δεκ 2003 15:07

Help! Text on image!

Δημοσίευση από jastonas » 10 Δεκ 2003 03:07

8elw panw apo http://www.members.lycos.co.uk/jastonas ... ies_05.gif
auth na mpei keimeno....
k egw me tables exw skeftei na to kanw alla dyskoleuomai! pws 8a to kanw? 1 table me 3 rows 1 column?!

Άβαταρ μέλους
grjava
Δημοσιεύσεις: 387
Εγγραφή: 13 Μαρ 2002 01:00
Τοποθεσία: athens
Επικοινωνία:

Help! Text on image!

Δημοσίευση από grjava » 10 Δεκ 2003 03:38

Κάνε το με ένα table και βάλε όσα cells θες μέσα και όπως τα θές..

Άβαταρ μέλους
jastonas
Δημοσιεύσεις: 50
Εγγραφή: 09 Δεκ 2003 15:07

Help! Text on image!

Δημοσίευση από jastonas » 11 Δεκ 2003 23:13

re gmt mhpws exei kapoio bug KAI to dreamweaver mou KAI to frontpage?:P
auto pou 8elw na kanw, einai na orisw to mege8os tou cell... dhladh to panw aristera 50x45. to panw mesaio 100x45, to panw deksia 50x45... ktl ktl ktl....
ginetai auto?

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

Help! Text on image!

Δημοσίευση από greekbytes » 11 Δεκ 2003 23:33

Den katalava otan les 50x45 poio ennoeis width kai poio height pantos mporeis na valeis table mesa se allo table.. Kaneis px ena table me 3 stiles kai 1 seira (i anapoda) kai sto kathe keli vazeis ena allo table (me 1 stili kai 1 seira) kai tou dineis oti megethos theleis... Ginetai kai me ena table alla etsi einai pio eukola. (an panta exo katalavei sosta ti thes na kaneis :P )

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Help! Text on image!

Δημοσίευση από patriot » 12 Δεκ 2003 02:32

Δηλ αν κατάλαβα καλά, μιας και το image είναι ωραίο, θες να το βάλεις σαν background. Αλλά επειδή είναι μεγάλο και θα τρώει πολύ χρόνο να φορτώσει είπες να το κόψεις στην μέση. Με τέτοιο στυλ ώστε να χωράει στο table. Αλλά τότε παρατήρησες ότι το κείμενο είναι πολύ μεγάλο εν σχέση με το Image. Και δεν ξέρεις πως να το βάλεις. Κατάλαβα καλά;

Λοιπόν για να μην παιδεύεσαι, θα στο φτιάξω εγώ με 1-2 τρόπους και κάνε του ότι αλλάγες θες. Άλλωστε από τις αλλαγές θα μάθεις.

Περίμενε μόνο να το φτιάξω.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Help! Text on image!

Δημοσίευση από patriot » 12 Δεκ 2003 03:49

Λοιπόν στο έφτιαξα με 2 τρόπους.

Ο ένας (layout1) είναι με απλή html. Λέγοντας "απλή" εννοώ ότι ακόμα και οι παλιοί browsers θα μπορέσουν να δουν την σελίδα.

Ο άλλος (layout2) έχει και iframe.

Και οι 2 εκδόσεις είναι συμβατές για οθόνες που είναι 800χ600 αλλά και 1024χ768.

Υπόψην ότι ίσως να χρειαστεί να κάνεις κάποιες αλλαγές.

Σε ότι αφορά το layout με την απλή html:
Αυτό το layout έχει περιορισμένες δυνατότητες. Είναι "αναγκασμένο" να είναι τόσο μεγάλο όσο το image που θες. Αφού το image είναι 415p (pixels) σε ύψος (δεν υπολογίζω το πλάτος αφού έτσι και αλλιώς είναι μικρότερο από 800 (770 αν υπολογίσουμε και την μπάρα) που είναι οι οθόνες)
καταναγκαστικά τόσο μεγάλο θα είναι και το μέγεθος του text. Που σημαίνει ότι ΜΙΑ παραπάνω γραμμή να θες να βάλεις δεν θα μπορείς. Εκτός αν δεν σε πειράζει το image να επαναλαμβάνεται στα μάτια του θεατή που σε ΔΙΑΒΕΒΑΙΩΝΩ είναι πολύ σπαστικό και πολύ κουραστικό για το μάτι. Γι' αυτό, για να μην βγει αυτή η μπάρα θα αναγκάζεσαι να φτάχνεις δεύτερη σελίδα για να πεις τα υπόλοιπα. (Ζήτω το copy/paste!! )

Τι αλλαγές μπορείς να κάνεις.

1) Πρώτα από όλα το όλο layout είναι βαλμένο στην άκρη της σελίδας. Αν θες να το βάλεις στο κέντρο θα πρέπει να γράψεις την εντολή
<center> (όλο αυτό που βλέπεις με κόκκινο) πριν από την ΠΡΩΤΗ εντολή που θα δεις μετά την εντολή <body>. Μετά θα την κλείσεις
με ένα </center> ΠΡΙΝ την εντολή </body>

2) Κάτω-κάτω θα δεις μια κίτρινη γραμμή. Την έβαλα σαν να λέω "τέλος". Τέλος του layout. Τέλος, τέρμα!!! Κάνε την ότι χρώμα θες. Επίσης η
συγκεκριμένη γραμμή δεν είναι image. Είναι ένα table με κίτρινο background. Και επειδή σε μερικούς browsers τα άδεια tables δεν φαίνονται, γι' αυτό
έβαλα και μια μικρή φωτογραφιούλα. Τόσο μικρή που δεν φαίνεται στο μάτι. Για την ακρίβεια 1χ1p. Μόνο που αν την άφηνα τόσο μικρή δεν θα την
έβλεπες ούτε εσύ και έτσι της είπα να είναι vspace (vertical space) 2 και hspace (horizontal space) επίσης 2. Πήγαινε σε έναν html editor και κάνε την όσο
λεπτή θες (συνιστώ 0χ0)

3) Μέσα στο <body> θα δεις και τα margins. Αν θες άλλαξε τα. Βάλε ότι νούμερο θες

topmargin και marginheight = Πόσο πολύ/λίγο θες να περισσεύει το περιεχόμενο της σελίδας από την κορυφή/βάση
marginwidth και leftmargin = Πόσο πολύ/λίγο θες να περισσεύει το περιεχόμενο της σελίδας από δεξιά/αριστερά

Όλες οι εντολές είναι απαραίτητες για να βλέπουν όλοι οι browsers το ίδιο αποτέλεσμα.


Να ο κώδικας για την απλή html
Η λέξη "κείμενο" είναι γραμμένη τόσες φορές όσες χωράει στο "τσακ" για να μην βγει μπάρα. Μία λέξη παρπάνω να γράψεις και "τσουπ".. εμφανίστηκε.

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

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>layout</title>
<style type="text/css">
body &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;
 scrollbar-face-color&#58; #000000;
 scrollbar-highlight-color&#58; #FFFFFF;
 scrollbar-shadow-color&#58; #DEE3E7;
 scrollbar-3dlight-color&#58; #404040;
 scrollbar-arrow-color&#58;  #C00000;
 scrollbar-track-color&#58; #6AADDC;
 scrollbar-darkshadow-color&#58; #98AAB1;
&#125;
A&#58;link      &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
a&#58;hover  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
a&#58;active  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
A&#58;visited &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
td           &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;&#125;
#anelementid &#123;font-family&#58;verdana;font-size&#58;8pt;&#125;
TEXTAREA, INPUT, SELECT, OPTION .area &#123;
font-family&#58;verdana,arial,helvetica;font-size&#58;8pt; 
BORDER-RIGHT&#58;#000000 1px solid;
BORDER-TOP&#58;#000000 1px solid;
BORDER-LEFT&#58;#000000 1px solid;
BORDER-BOTTOM&#58;#000000 1px solid;
BACKGROUND-COLOR&#58;#C1FEFF;
</style>
</head>
<body text="#FFFFFF" bgcolor="#000000" link="#8CE7F7" vlink="#C0C0C0" alink="#79BCFF" topmargin="0" leftmargin="0" marginheight="0" 
marginwidth="0">
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<tr>
<td VALIGN=TOP ROWSPAN="2"><img SRC="leftbar.jpg" height=415 width=34></td>

<td VALIGN=TOP BACKGROUND="topbar.gif"><img SRC="topbar.gif" height=39 width=15></td>

<td VALIGN=TOP ROWSPAN="2"><img SRC="rightbar.jpg" height=415 width=34></td>
</tr>

<tr>
<td VALIGN=TOP BACKGROUND="middlebar.jpg">
<table BORDER=0 CELLSPACING=0 CELLPADDING=3 HEIGHT="376" >
<tr>
<td>
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno,</td></tr>
</table>
</td>
</tr>
</table>

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BGCOLOR="#FFFF99" >
<tr>
<td><img SRC="yellowdot.gif" HSPACE=2 VSPACE=2 height=1 width=1></td>
</tr>
</table>

</body>
</html>
Τώρα θα γράψω και για το iframe
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Help! Text on image!

Δημοσίευση από patriot » 12 Δεκ 2003 04:31

Λοιπόν ο δεύτερος τρόπος είναι ακριβώς ο ίδιος σε πολλά σημεία. Οι διαφορές είναι αυτές:

1) Η λέξη "κείμενο" μπήκε μέσα σε ένα table στην απλή html. Εδώ όμως μπήκε μέσα σε ένα iframe. Iframe (όχι σκέτο "frame") είναι ένα html document που μπορείς να το βάλεις ΜΕΣΑ σε ένα άλλο html document. Εγώ το iframe μου το ονόμασα "αδειο" γιατί στα αλήθεια δεν είχα τι να βάλω μέσα (άσχετα αν μετά έγραψα και εκεί τις οδηγίες που διαβάζεις τώρα στο freestuff για να τις έχεις και offline.) και το έβαλα μέσα στο 'layout2". Το"άδειο" μπορείς να το κάνεις όπως θες, όπως οποιοδήποτε html document. Εγώ το έκανα ταιριαστό για να χωράει και να μοιάζει με το "layout2".

Ο κώδικας για ένα οποιοδήποτε iframe είναι αυτός:
<iframe src="adeio.html" name="ότι όνομα θες" width="760" height="350" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"
scrolling=auto></iframe>

Όλα μπορείς να τα αλλάξεις αλλά τα βασικά είναι αυτά

width = "770" (για σελίδες 800χ600) ή "990" (για σελίδες 1024χ768)
height = αναλόγως με το πως θα ταιριάζει στην σελίδα
name = τάδε. Το name είναι το target του link. Δηλ πρέπει να πεις στο Link ότι θες να ανοίγει ΜΕΣΑ στο iframe. Ενώ π.χ ο κώδικας για ένα απλό link είναι έτσι: <a href="http://www.freestuff.gr">freestuff.gr</a> αυτό πρέπει να γραφτεί έτσι: <a href="http://www.freestuff.gr" target="tade">freestuff.gr</a>
frameborder = 0 ή 10 (αν και λένε ότι μπορείς να το κάνεις όσο θες δεν πιάνει σε κάτι άλλο. Μόνο 0 ή 10)
scrolling = no ή yes ή auto

Περισσότερες πληροφορίες για το iframe εδώ http://javascriptkit.com/howto/externalhtml.shtml#1

Σου δίνω τον κώδικα με background image αν και δεν ταιριάζει. Αν νομίζεις ότι πρέπει να το βγάλεις τότε αφαίρεσε αυτόν τον κώδικά από το <body>: background="middlebar.jpg"

Νομίζω πάντως ότι αυτό το χρώμα είναι ποιο ωραίο: #97C6E6

Να ο κώδικας του layout2

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

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>layout2</title>
	 <style type="text/css">
body &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;
	scrollbar-face-color&#58; #000000;
	scrollbar-highlight-color&#58; #FFFFFF;
	scrollbar-shadow-color&#58; #DEE3E7;
	scrollbar-3dlight-color&#58; #404040;
	scrollbar-arrow-color&#58;  #C00000;
	scrollbar-track-color&#58; #EFEFEF;
	scrollbar-darkshadow-color&#58; #98AAB1;
&#125;
A&#58;link      &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
a&#58;hover  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
a&#58;active  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
A&#58;visited &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
td           &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;&#125;
#anelementid &#123;font-family&#58;verdana;font-size&#58;8pt;&#125;
TEXTAREA, INPUT, SELECT, OPTION .area &#123;
font-family&#58;verdana,arial,helvetica;font-size&#58;8pt;	
BORDER-RIGHT&#58;#000000 1px solid;
BORDER-TOP&#58;#000000 1px solid;
BORDER-LEFT&#58;#000000 1px solid;
BORDER-BOTTOM&#58;#000000 1px solid;
BACKGROUND-COLOR&#58;#C1FEFF;
</style>
</head>
<body text="#FFFFFF" bgcolor="#000000" link="#8CE7F7" vlink="#C0C0C0" alink="#79BCFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<tr>
<td VALIGN=TOP ROWSPAN="2"><img SRC="leftbar.jpg" height=415 width=34></td>

<td VALIGN=TOP BACKGROUND="topbar.gif"><img SRC="topbar.gif" height=39 width=15></td>

<td VALIGN=TOP ROWSPAN="2"><img SRC="rightbar.jpg" height=415 width=34></td>
</tr>

<tr>
<td VALIGN=TOP BACKGROUND="middlebar.jpg">
<table BORDER=0 CELLSPACING=0 CELLPADDING=3 HEIGHT="376" >
<tr>
<td>

<iframe src="adeio.html" name="inside" width="760" height="350" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto></iframe>



</td>
</tr>
</table>
</td>
</tr>
</table>

<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BGCOLOR="#FFFF99" >
<tr>
<td><img SRC="yellowdot.gif" HSPACE=2 VSPACE=2 height=1 width=1></td>
</tr>
</table>

</body>
</html>

1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Help! Text on image!

Δημοσίευση από patriot » 12 Δεκ 2003 04:34

Τέλςο να ο κώδικας του "άδειο"

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

 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
   <meta name="GENERATOR" content="Mozilla/4.77 &#91;en&#93; &#40;Windows NT 5.0; U&#41; &#91;Netscape&#93;">
   <title>adeio</title>
<style type="text/css">
body &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;
	scrollbar-face-color&#58; #000000;
	scrollbar-highlight-color&#58; #FFFFFF;
	scrollbar-shadow-color&#58; #DEE3E7;
	scrollbar-3dlight-color&#58; #404040;
	scrollbar-arrow-color&#58;  #C00000;
	scrollbar-track-color&#58; #EFEFEF;
	scrollbar-darkshadow-color&#58; #98AAB1;
&#125;
A&#58;link      &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
a&#58;hover  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
a&#58;active  &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
A&#58;visited &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
td           &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;&#125;
#anelementid &#123;font-family&#58;verdana;font-size&#58;8pt;&#125;
TEXTAREA, INPUT, SELECT, OPTION .area &#123;
font-family&#58;verdana,arial,helvetica;font-size&#58;8pt;	
BORDER-RIGHT&#58;#000000 1px solid;
BORDER-TOP&#58;#000000 1px solid;
BORDER-LEFT&#58;#000000 1px solid;
BORDER-BOTTOM&#58;#000000 1px solid;
BACKGROUND-COLOR&#58;#C1FEFF;
</style>
</head>
<body text="#000000" bgcolor="#97C6E6" link="#0080FF" vlink="#999999" alink="#009900" background="middlebar.jpg">
Λοιπόν στο έφτιαξα με 2 τρόπους.
<p>Ο ένας &#40;layout1&#41; είναι με απλή html. Λέγοντας "απλή" εννοώ ότι ακόμα
και οι παλιοί browsers θα μπορέσουν να δουν την σελίδα.
<p>Ο άλλος &#40;layout2&#41; έχει και iframe.
<p>Και οι 2 εκδόσεις είναι συμβατές για οθόνες που είναι 800χ600 αλλά και
1024χ768.
<p>Υπόψην ότι ίσως να χρειαστεί να κάνεις κάποιες αλλαγές.
<p>Σε ότι αφορά το layout με την απλή html&#58;
<br>Αυτό το layout έχει περιορισμένες δυνατότητες. Είναι "αναγκασμένο"
να είναι τόσο μεγάλο όσο το image που θες. Αφού το image είναι 415p &#40;pixels&#41;
σε ύψος &#40;δεν υπολογίζω το πλάτος αφού έτσι και αλλιώς είναι μικρότερο από
800 &#40;770 αν υπολογίσουμε και την μπάρα&#41; που είναι οι οθόνες&#41;
<br>καταναγκαστικά τόσο μεγάλο θα είναι και το μέγεθος του text.&nbsp;
Που σημαίνει ότι ΜΙΑ παραπάνω γραμμή να θες να βάλεις δεν θα μπορείς. Εκτός
αν δεν σε πειράζει το image να επαναλαμβάνεται στα μάτια του θεατή που
σε ΔΙΑΒΕΒΑΙΩΝΩ είναι πολύ σπαστικό και πολύ κουραστικό για το μάτι. Γι'
αυτό, για να μην βγει αυτή η μπάρα θα αναγκάζεσαι να φτάχνεις δεύτερη σελίδα
για να πεις τα υπόλοιπα. &#40;Ζήτω το copy/paste!! &#41;
<p>Τι αλλαγές μπορείς να κάνεις.
<p>1&#41; Πρώτα από όλα το όλο layout είναι βαλμένο στην άκρη της σελίδας.
Αν θες να το βάλεις στο κέντρο θα πρέπει να γράψεις την εντολή
<br>&#91;color=red&#93;&lt;center>&#91;/color&#93; &#40;όλο αυτό που βλέπεις με κόκκινο&#41; πριν
από την ΠΡΩΤΗ εντολή που θα δεις μετά την εντολή &lt;body>. Μετά θα την
κλείσεις
<br>με ένα &#91;color=red&#93;&lt;/center>&#91;/color&#93; ΠΡΙΝ την εντολή &lt;/body>
<p>2&#41; Κάτω-κάτω θα δεις μια κίτρινη γραμμή. Την έβαλα σαν να λέω "τέλος".&nbsp;
Τέλος του layout. Τέλος, τέρμα!!! Κάνε την ότι χρώμα θες. Επίσης η
<br>συγκεκριμένη γραμμή δεν είναι image. Είναι ένα table με κίτρινο background.
Και επειδή σε μερικούς browsers τα άδεια tables δεν φαίνονται, γι' αυτό
<br>έβαλα και μια μικρή φωτογραφιούλα. Τόσο μικρή που δεν φαίνεται στο
μάτι. Για την ακρίβεια 1χ1p. Μόνο που αν την άφηνα τόσο μικρή δεν θα την
<br>έβλεπες ούτε εσύ και έτσι της είπα να είναι vspace &#40;vertical space&#41;
2 και hspace &#40;horizontal space&#41; επίσης 2. Πήγαινε σε έναν html editor και
κάνε την όσο
<br>λεπτή θες &#40;συνιστώ 0χ0&#41;
<p>3&#41; Μέσα στο &lt;body> θα δεις και τα margins. Αν θες άλλαξε τα. Βάλε
ότι νούμερο θες
<p>topmargin και marginheight = Πόσο πολύ/λίγο θες να περισσεύει το περιεχόμενο
της σελίδας από την κορυφή/βάση
<br>marginwidth και leftmargin = Πόσο πολύ/λίγο θες να περισσεύει το περιεχόμενο
της σελίδας από δεξιά/αριστερά
<p>Όλες οι εντολές είναι απαραίτητες για να βλέπουν όλοι οι browsers το
ίδιο αποτέλεσμα.
<br>&nbsp;
<p>Να ο κώδικας για την απλή html
<br>Η λέξη "κείμενο" είναι γραμμένη τόσες φορές όσες χωράει στο "τσακ"
για να μην βγει μπάρα. Μία λέξη παρπάνω να γράψεις και "τσουπ".. εμφανίστηκε.
<p>&#91;code&#93;&lt;!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<br>&lt;html>
<br>&lt;head>
<br>&lt;title>layout&lt;/title>
<br>&lt;style type="text/css">
<br>body &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;
<br>&nbsp;scrollbar-face-color&#58; #000000;
<br>&nbsp;scrollbar-highlight-color&#58; #FFFFFF;
<br>&nbsp;scrollbar-shadow-color&#58; #DEE3E7;
<br>&nbsp;scrollbar-3dlight-color&#58; #404040;
<br>&nbsp;scrollbar-arrow-color&#58;&nbsp; #C00000;
<br>&nbsp;scrollbar-track-color&#58; #6AADDC;
<br>&nbsp;scrollbar-darkshadow-color&#58; #98AAB1;
<br>&#125;
<br>A&#58;link&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
<br>a&#58;hover&nbsp; &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
<br>a&#58;active&nbsp; &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;underline;&#125;
<br>A&#58;visited &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;text-decoration&#58;none;&#125;
<br>td&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#123;font-family&#58;arial,helvetica,verdana;font-size&#58;10pt;&#125;
<br>#anelementid &#123;font-family&#58;verdana;font-size&#58;8pt;&#125;
<br>TEXTAREA, INPUT, SELECT, OPTION .area &#123;
<br>font-family&#58;verdana,arial,helvetica;font-size&#58;8pt;
<br>BORDER-RIGHT&#58;#000000 1px solid;
<br>BORDER-TOP&#58;#000000 1px solid;
<br>BORDER-LEFT&#58;#000000 1px solid;
<br>BORDER-BOTTOM&#58;#000000 1px solid;
<br>BACKGROUND-COLOR&#58;#C1FEFF;
<br>&lt;/style>
<br>&lt;/head>
<br>&lt;body text="#FFFFFF" bgcolor="#000000" link="#8CE7F7" vlink="#C0C0C0"
alink="#79BCFF" topmargin="0" leftmargin="0" marginheight="0"
<br>marginwidth="0">
<br>&lt;table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<br>&lt;tr>
<br>&lt;td VALIGN=TOP ROWSPAN="2">&lt;img SRC="leftbar.jpg" height=415
width=34>&lt;/td>
<p>&lt;td VALIGN=TOP BACKGROUND="topbar.gif">&lt;img SRC="topbar.gif" height=39
width=15>&lt;/td>
<p>&lt;td VALIGN=TOP ROWSPAN="2">&lt;img SRC="rightbar.jpg" height=415
width=34>&lt;/td>
<br>&lt;/tr>
<p>&lt;tr>
<br>&lt;td VALIGN=TOP BACKGROUND="middlebar.jpg">
<br>&lt;table BORDER=0 CELLSPACING=0 CELLPADDING=3 HEIGHT="376" >
<br>&lt;tr>
<br>&lt;td>keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno,
<br>keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
<br>keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno, keimeno,
<br>keimeno, keimeno, keimeno, keimeno, keimeno,&lt;/td>
<br>&lt;/tr>
<br>&lt;/table>
<br>&lt;/td>
<br>&lt;/tr>
<br>&lt;/table>
<p>&lt;table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BGCOLOR="#FFFF99"
>
<br>&lt;tr>
<br>&lt;td>&lt;img SRC="yellowdot.gif" HSPACE=2 VSPACE=2 height=1 width=1>&lt;/td>
<br>&lt;/tr>
<br>&lt;/table>
<p>&lt;/body>
<br>&lt;/html>
<br>&#91;/code&#93;
<p>Τώρα θα γράψω και για το iframe
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<br>&nbsp;
<p>Λοιπόν ο δεύτερος τρόπος είναι ακριβώς ο ίδιος σε πολλά σημεία. Οι διαφορές
είναι αυτές&#58;
<p>1&#41; Η λέξη "κείμενο" μπήκε μέσα σε ένα table στην απλή html. Εδώ όμως
μπήκε μέσα σε ένα iframe. Iframe &#40;όχι σκέτο "frame"&#41; είναι ένα html document
που μπορείς να το βάλεις ΜΕΣΑ σε ένα άλλο html document. Εγώ το iframe
μου το ονόμασα "αδειο" γιατί στα αλήθεια δεν είχα τι να βάλω μέσα &#40;άσχετα
αν μετά έγραψα και εκεί τις οδηγίες που διαβάζεις τώρα στο freestuff για
να τις έχεις και offline.&#41; και το έβαλα μέσα στο 'layout2". Το"άδειο" μπορείς
να το κάνεις όπως θες, όπως οποιοδήποτε html document. Εγώ το έκανα ταιριαστό
για να χωράει και να μοιάζει με το "layout2".
<p>Ο κώδικας για ένα οποιοδήποτε iframe είναι αυτός&#58;
<br>&lt;iframe src="adeio.html" name="ότι όνομα θες" width="760" height="350"
marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"
scrolling=auto>&lt;/iframe>
<p>Όλα μπορείς να τα αλλάξεις αλλά τα βασικά είναι αυτά
<p>width = "770" &#40;για σελίδες 800χ600&#41; ή "990" &#40;για σελίδες 1024χ768&#41;
<br>height = αναλόγως με το πως θα ταιριάζει στην σελίδα
<br>name = τάδε. Το name είναι το target του link. Δηλ πρέπει να πεις στο
Link ότι θες να ανοίγει ΜΕΣΑ στο iframe. Ενώ π.χ ο κώδικας για ένα απλό
link είναι έτσι&#58; &lt;a href="http&#58;//www.freestuff.gr">freestuff.gr&lt;/a>
αυτό πρέπει να γραφτεί έτσι&#58; &lt;a href="http&#58;//www.freestuff.gr" target="tade">freestuff.gr&lt;/a>
<br>frameborder = 0 ή 10 &#40;αν και λένε ότι μπορείς να τοκάνεις όσο θες δεν
πιάνει σε κάτι άλλο. Μόνο 0 ή 10&#41;
<br>scrolling = no ή yes ή auto
<p>Περισσότερες πληροφορίες για το iframe εδώ http&#58;//javascriptkit.com/howto/externalhtml.shtml#1
<p>Σου δίνω τον κώδικα με background image αν και δεν ταιριάζει. Αν νομίζεις
ότι πρέπει να το βγάλεις τότε αφαίρεσε αυτόν τον κώδικά από το &lt;body>&#58;
background="middlebar.jpg"
<p>Νομίζω πάντως ότι αυτότο χρώμα είναιποιο ωραίο&#58; #97C6E6
<br>
</body>
</html>
 
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
jastonas
Δημοσιεύσεις: 50
Εγγραφή: 09 Δεκ 2003 15:07

Help! Text on image!

Δημοσίευση από jastonas » 14 Δεκ 2003 17:26

eisai 8eos! 8a to koitaksw shmera to apogeuma... euxaristw poly eite doulepsei eite den doulepsei!!!!

Άβαταρ μέλους
Cha0s
SysAdmin
Δημοσιεύσεις: 10242
Εγγραφή: 28 Ιούλ 2001 03:00

Help! Text on image!

Δημοσίευση από Cha0s » 14 Δεκ 2003 19:08

patriot zalistika apo to poli scrolling!

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Help! Text on image!

Δημοσίευση από patriot » 14 Δεκ 2003 22:28

Sorry :P :oops:
(Να, δεν είχα τι να κάνω και είπα να το φτιάξω.. χρειαζόμουν ένα διάλειμα από την καθημερινότητα. Δεν πρόκειτε να ξανακάνεις τέτοιο scroll γιατί βαριέμαι να φτιάχνω άλλα :D :hammer: )
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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