flexible ιστοσελιδα

maxairas7 · 29 Μαρτίου 2013

Φτοιαχνω μια ιστοσελιδα ενος φιλου με dreamweaver αλλα παρουσιαστικε ενα προβλημα.Η δικια μ οθονη

εχει μεγαλη αναλυση και προσαρμοσα το σιτε συμφωνα με αυτες τις αναλογιες1920χ1080.Πως θα γινει να προσαρμοζεται σε ολες τις οθονες..?εψαξα λιγο σε youtube και google αλλα δεν εβγαλα ακρη..

migf1 · 29 Μαρτίου 2013

Ο δύσκολος δρόμος είναι να την ξαναφτιάξεις με αρχές Responsive Web Design (εδώ για μια 1η γεύση κι εδώ για πιο αναλυτικά με χρήση Twitter bootstrap) Ο εύκολος είναι να περιορίσεις το content flow μέσα σε fixed πλάτος (συνήθως ένα <div> με fixed width), και να γράψεις κάπου κάτι σαν: Optimized for 1024px wide or better.

TheELF · 29 Μαρτίου 2013

migf1 ,το responsive είναι κυρίως για να φαίνεται σωστά σε διάφορες συσκευές όπως κινητά και tablets,αν το χρειάζεται, καλός.

Αυτό που θέλεις λέγετε liquid design και απλά αντί να βάζεις σταθερά νούμερα σε pixel βάζεις ποσοστά οπότε προσαρμόζεται σε διάφορα μεγέθη,καλό είναι να βάζεις και ένα μίνιμουμ μέγεθος για να μην χαλάει όταν υπάρχει πάρα πολύ μικρή οθόνη.

http://www.maxdesign.com.au/articles/liquid/

migf1 · 29 Μαρτίου 2013

migf1 ,το responsive είναι κυρίως για να φαίνεται σωστά σε διάφορες συσκευές όπως κινητά και tablets,αν το χρειάζεται, καλός.

Αυτό που θέλεις λέγετε liquid design και απλά αντί να βάζεις σταθερά νούμερα σε pixel βάζεις ποσοστά οπότε προσαρμόζεται σε διάφορα μεγέθη,καλό είναι να βάζεις και ένα μίνιμουμ μέγεθος για να μην χαλάει όταν υπάρχει πάρα πολύ μικρή οθόνη.

http://www.maxdesign.com.au/articles/liquid/

Έχεις απόλυτο δίκιο!

ΥΓ. Το responsive εμπεριέχει και το liquid (είναι και "επί του πιεστηρίου" στις μέρες μας).

maxairas7 · 29 Μαρτίου 2013

προσπαθησα να αλλαξω τα px σε % αλλα το αποτελεσμα δεν ηταν αυτο π περιμενα...καπου διαβασα οτι επρεπε να το φτοιαξω σε 800χ600 και μετα να γινει αυτο...ριξτε και μια ματια στο κωδικα..αν μπορειτε να μ πειτε που εχω κανε λαθος..δεν ειναι η αρχικη σελιδα..

<!doctype html>

<html>

<head>

<title>Nikas_zaxaroplastiki</title>

#logo {

position: absolute;

left: 163px;

top: 38px;

width: 241px;

height: 98px;

z-index: 1;

border-radius: 15px;

box-shadow: 13px 0px 5px 5px rgba(0,0,0,1);

}

#nav {

position: absolute;

left: 502px;

top: 101px;

width: 1089px;

height: 38px;

z-index: 5000;

border-radius: 10px;

background-color: rgba(102,102,102,.8);

text-align: right;

font-family: "Comic Sans MS", cursive;

font-size: 18px;

color: rgba(0,0,0,1);

padding: 5px;

}

#content {

position: absolute;

left: 499px;

top: 180px;

width: 1102px;

height: 1036px;

z-index: 201;

background-color: rgba(102,102,102,.8);

border-radius: 20px 0px 20px 0px;

text-align: center;

box-shadow: 5px 5px 3px rgba(0,0,0,1);

}

.H1 {

font-size: 60px;

color: rgba(0,0,0,1);

font-family: "Blackadder ITC";

font-weight: bold;

text-align: center;

}

#flash {

position: absolute;

left: 602px;

top: 252px;

width: 597px;

height: 482px;

z-index: 202;

}

</style>

#apDiv1 {

position: absolute;

left: 952px;

top: 242px;

width: 198px;

height: 48px;

z-index: 203;

}

#apDiv2 {

position: absolute;

left: 1301px;

top: 403px;

width: 199px;

height: 249px;

z-index: 204;

border-radius: 11px;

}

#toyrtes_gamou {

position: absolute;

left: 600px;

top: 802px;

width: 232px;

height: 300px;

z-index: 205;

border-radius: 10px;

box-shadow: 7px 7px 4px rgba(0,0,0,1);

border-style: ridge;

}

#paidikes_tourtes {

position: absolute;

left: 1048px;

top: 802px;

width: 264px;

height: 300px;

z-index: 206;

border-radius: 10px;

box-shadow: 7px 7px 4px rgba(0,0,0,1);

border-style: ridge;

}

#potirakia {

position: absolute;

left: 853px;

top: 802px;

width: 176px;

height: 164px;

z-index: 207;

border-radius: 5px;

box-shadow: 7px 7px 4px rgba(0,0,0,1);

border-style: ridge;

}

#sokolatakia {

position: absolute;

left: 853px;

top: 982px;

width: 176px;

height: 120px;

z-index: 208;

border-radius: 5px;

box-shadow: 7px 7px 4px 0px rgba(0,0,0,1);

border-style: ridge;

}

#ekdilwseis {

position: absolute;

left: 1332px;

top: 802px;

width: 161px;

height: 112px;

z-index: 209;

background-color: #FF0000;

box-shadow: 7px 7px 4px;

border-style: ridge;

border-radius: 7px;

}

#contact {

position: absolute;

left: 1332px;

top: 929px;

width: 161px;

height: 171px;

z-index: 210;

border-radius: 5px;

box-shadow: 7px 7px 4px rgba(0,0,0,1);

border-style: ridge;

}

#apDiv3 {

position: absolute;

left: 552px;

top: 1146px;

width: 1000px;

height: 2px;

z-index: 211;

background-color: #000000;

}

</style>

#apDiv4 {

position: absolute;

left: 750px;

top: 400px;

width: 753px;

height: 338px;

z-index: 5001;

}

</style>

<!--

<oa:widgets>

<oa:widget wid="2827522" binding="#OAWidget" />

<oa:widget wid="2127022" binding="#gallery" />

</oa:widgets>

-->

</script>

/* BeginOAWidget_Instance_2127022: #gallery */

.lbGallery {

/*gallery container settings*/

background-color: transparent;

padding-left: 20px;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

width: 540px;

height: 250px;

text-align: right;

}

.lbGallery ul {

list-style: none;

margin: 0;

padding: 0;

text-align: center;

}

.lbGallery ul li { display: inline;margin:0;padding:0; }

.lbGallery ul li a{text-decoration:none;}

.lbGallery ul li a img {

/*border color, width and margin for the images*/

border-color: #333333;

border-left-width: 10px;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 20px;

margin-left:5px;

margin-right:5px;

margin-top:5px;

margin-bottom:5px:

}

.lbGallery ul li a:hover img {

/*background color on hover*/

border-color: #cccccc;

border-left-width: 10px;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 20px;

}

#lightbox-container-image-box {

border-top: 0px inset #ffffff;

border-right: 0px inset #ffffff;

border-bottom: 0px inset #ffffff;

border-left: 0px inset #ffffff;

}

#lightbox-container-image-data-box {

border-top: 0px;

border-right: 0px inset #ffffff;

border-bottom: 0px inset #ffffff;

border-left: 0px inset #ffffff;

}

/* EndOAWidget_Instance_2127022 */

</style>

</head>

<li><a class="MenuBarItemSubmenu" href="#">Nikas Zaxaroplastiki</a>

<ul>

</ul>

</li>

<li><a href="#">About Us</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Shops</a>

<ul>

<li><a href="#">Gastouni</a> </li>

<li><a href="#">Amaliada</a></li>

</ul>

</li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

</div>

<div id="apDiv1"><span class="H1"> Potirakia</span></div>

<ul>

</ul>

</div>

// BeginOAWidget_Instance_2127022: #gallery

$(function(){

$('#gallery a').lightBox({

imageLoading: 'images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon

imageBtnPrev: 'images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image

imageBtnNext: 'images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image

imageBtnClose: 'images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn

imageBlank: 'images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)

fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.

overlayBgColor: "#999999", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.

overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9

txtImage: 'Image', //Default text of image

txtOf: 'of'

});

// EndOAWidget_Instance_2127022

</script>

</div>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

TheELF · 29 Μαρτίου 2013

προσπαθησα να αλλαξω τα px σε % αλλα το αποτελεσμα δεν ηταν αυτο π περιμενα...καπου διαβασα οτι επρεπε να το φτοιαξω σε 800χ600 και μετα να γινει αυτο...ριξτε και μια ματια στο κωδικα..αν μπορειτε να μ πειτε που εχω κανε λαθος..δεν ειναι η αρχικη σελιδα..

Δεν χρειαζόταν να την είχες κάνει σε 800x600 απλά δεν έπρεπε να είναι οι τιμές απόλυτες,τα έχεις όλα absolute οπότε δεν μπορείς να το αλλάξεις εύκολα το σχέδιο,πρέπει να σβήσεις τα πάντα από μεγέθη και να τα ξανακάνεις από την αρχή αν θες να το προσαρμόσεις.

maxairas7 · 29 Μαρτίου 2013

Δεν χρειαζόταν να την είχες κάνει σε 800x600 απλά δεν έπρεπε να είναι οι τιμές απόλυτες,τα έχεις όλα absolute οπότε δεν μπορείς να το αλλάξεις εύκολα το σχέδιο,πρέπει να σβήσεις τα πάντα από μεγέθη και να τα ξανακάνεις από την αρχή αν θες να το προσαρμόσεις.

πρεπει να ορισω και στην αρχη οτι to body 100%??

αλλαξα το width σε ποσοστα αλλα σε ενα widjet εχω προβλημα.Στο flexslider το οποιο το εχω βαλει σε ενα apdiv

του δινω position:relative αλλα μ το τοποθετει στο τερμα τις σελιδας..πειραζω τα css rules του div και οχι του flexslider λες οτι πρεπει να αλλαξς και τισ ιδιοτητες του widjet?

ευχαριστω για την βοηθεια και συγνωμη για την ταλαιπωρια..

Naele · 30 Μαρτίου 2013

font-family: "Comic Sans MS", cursive; really?

Εκτός των άλλων, βγάλε το position: absolute από παντού..έχεις κολλήσει όλα τα div με το μάτι και βάση της οθόνης σου. Ξεκίνα με το να βγάλεις από το #content to position: absolute, βάλτου ένα width: 960px (ή όσο θες) και margin: 0 auto ώστε να πάει στη μέση. Είναι πολύ λάθος πάντως αυτό που έχεις φτιάξει..δε μπορείς να το συνεχίσεις έτσι.

maxairas7 · 31 Μαρτίου 2013

το contect δεν το θελω να ειναι στη μεση θελω να ειναι προς τα δεξια..οταν λες πολυ λαθος τι εννοεις?δεν ειπα οτι ειναι τελειο αυτο που εχω φτοιαξει το γνωριζω..οσο για το font family τυχαια το διαλεξα...

angmar · 31 Μαρτίου 2013

Προφανώς εννοεί ότι ο κώδικας έχει το μαύρο του το χάλι, αλλά δε φταίς εσύ, με το DW κανείς δεν έβγαλε κώδικα της προκοπής.

Naele · 31 Μαρτίου 2013

Δε σε έκρινα ή κάτι..φαίνεται πως ασχολήθηκες πρώτη φορά με αυτό και προσπαθείς να την παλέψεις, αλλά εκ των πραγμάτων ο κώδικας δεν είναι σωστός. Όντως το Dreamweaver δε βοηθάει..κι εγώ στην αρχή με αυτό ξεκίνησα και μπερδεύει πολύ. Όσο για το content.. πρώτον αυτό που θες να κάνεις, επειδή το είδα, είναι κακή τεχνική. Δεν είναι τυχαίο που όλες οι σελίδες έχουν το περιεχόμενο στη μέση και συμμετρικά. Εσύ έχεις βγάλει το logo "εκτος σελίδας". Αλλά έστω πως θες να το κάνεις έτσι, πάλι όπως σου είπα θα το κάνεις..φτιάξε ένα div που θα τα περιέχει όλα και βάλτου width: 1000px kai margin: 0 autο. Αν θες να το δεις πως θα φαίνεται σε άλλες οθόνες, απλά μίκραινε και μεγάλωνε το παράθυρο.

dewn735 · 31 Μαρτίου 2013

Για αρχή και γενικότερο μπούσουλα, θα πρότεινα να ξεκινήσεις από κάτι τέτοιο: http://layouts.ironmyers.com/

jawef · 2 Απριλίου 2013

Βασικά το DW ξέχνα το δεν είναι επαγγελματικό (ούτε καν ερασιτεχνικό δεν είναι αλλά αυτό είναι άλλο θέμα). Τα βήματα είναι απλά … μάθε HTML, μάθε CSS , μάθε JavaScript και μάθε και κάποια server side programming language (PHP για παράδειγμα ή JAVA ανάλογα σε τι server είσαι)

angmar · 2 Απριλίου 2013

Μέσες, άκρες, μόλις του είπες να γίνει front end dev. Το site του φίλου του προσπαθεί να κάνει το παιδί.

maxairas7 · 2 Απριλίου 2013

Ξεκίνησα με το dreamweaver γιατί είχαμε κάνει ένα μάθημα στη σχολή...λέτε να προσπαθήσω με κάποιο άλλο πρόγραμμα?Είναι ανάλογα και ποιον βολεύει τι..?πχ έκανα μια προσπάθεια σε joomla αλλά τζίφος..τώρα για το wordpress δεν έχω άποψη..

Σύνδεση

flexible ιστοσελιδα

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

maxairas7

migf1

TheELF

migf1

maxairas7

TheELF

maxairas7

Naele

maxairas7

angmar

Naele

dewn735

jawef

angmar

maxairas7

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

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

Σύνδεση

Σύνδεση