Μενου με διπλα κειμενο

kflabouris · 4 Φεβρουαρίου 2011

respect πολλα ευχαριστω κατι τελευταιο(προς το παρον ;P) μπορω να βαλω το μενου στην μεση της σελιδας? διοτι τωρα ειναι πανω πανω

nik1992 · 5 Φεβρουαρίου 2011

χμμ αυτό δεν το ξέρω.. κάπου είχα διαβάσει ότι βάζεις αυτό

>vertical-align: middle;

μέσα στο style="" αλλά δεν είμαι σίγουρος ότι λειτουργεί έτσι.

kflabouris · 11 Φεβρουαρίου 2011

οχι μαλλον δεν λειτουργει,εχουμε καμια αλλη δοκιμη/?

kflabouris · 3 Μαρτίου 2011

λοιπον παιδια παλι θελω βοηθεια γιατι οσο προχωραω αν κ εχω παρει ξανα μπρος αντιμετωπιζω καποια προβλιματα!

1)στο αριστερο σκελος που εχω το μενου εχω ψαξει 1000τροπους και δεν ξερω μεσα στο div πως να βαλω εικονα φοντο!!!

2)επειδη εχω φτιαξει και αλλο ενα μενου δεξια οταν το αποθηκευω σαν εικονα μου το βγαζει μισο πανω και το αλλο κατω η αν κανω ctrl και να ρολλαρο για ζοομ στον explorer,δηλαδη αν το στησω και οποιος μπαινει και εχει μικροτερη οθονη θα του βγαινουν τα μισα πανω και τα αλλα κατω>???

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

dewn735 · 3 Μαρτίου 2011

1) Κάπως έτσι:

><div style="background-image: url(../images/test-background.gif);"> </div>

2) Αν το πλάτος της σελίδας σου είναι μεγαλύτερο από αυτό της ανάλυσης του επισκέπτη, τότε σίγουρα θα έχεις προβλήματα. Το πιο σωστό θα ήταν να τα σχεδιάσεις όλα αναλογικά και υπολογισμένα σε ποσοστό επί της οθόνης (πχ 30% η αριστερή στήλη, 50% η μεσαία και 20% η δεξιά) - για βοήθεια, θα μπορούσες να χρησιμοποιήσεις ένα online layout generator (βλ google για περισσότερα) σαν κι αυτό

kflabouris · 4 Μαρτίου 2011

1)Δεν μου λειτουργει και δεν ξερω τι κανω λαθος ασ πουμε πως φτιαχνω ενα div στο δεξι κομματι με 100χ100 και θελω background image απο το pc μου,υπαρχει συγκεκριμενως κωδικας που να δουλευει?

2)Και πως θα το ξερω αν θα ειναι μεγαλυτερη απο την αναλυση του αλλου?Δεν μπορω να το υπολογισω δυστηχως εχω ενα λογο στην μεση και 2 στηλες μενου δεξια αριστερα και στην μεση τα κειμενα που θα εχω

dewn735 · 4 Μαρτίου 2011

1) Ποιος είναι ο κώδικας που χρησιμοποιείς; Που είναι η σελίδα σου και που η εικόνα που θες;

2) Δεν το ξέρεις. Σα γενικό κανόνα υποθέτεις ότι ο χρήστης θα έχει μια ελάχιστη οριζόντια ανάλυση 1024px, οπότε και φιξάρεις σελίδα και εικόνα γύρω στα 1000px

kflabouris · 8 Μαρτίου 2011

><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-7">

</head><body>
<p align="left"><img src="index2_files/sxoli%2520autognosias3.jpg" width="1236" height="170"></p>



<div style="float: left; width: 210px;"><img src="index2_files/photo1.jpg" width="200" height="600"><br></div>

 
 <div style="float: left; width: 817px; height: 600px; background-color: rgb(206, 218, 234);" ;="">
 
 
</div>
<div style="float: right; width: 210px;"><img src="index2_files/photo1.jpg" width="200" height="600">
</div>
        
</body></html>

λοιπον εδω ειναι το κομματι για να δεις στο αριστερο και δεξι κομματι που ειναι η ιδια φωτο δεν μπορω να την βαλω σαν background γιατι θελω αν γραψω πανω

οσο για την αναλυση δεν ξερω πως να την ρυθμισω,χρησιμοποιω dreamweaver αν σε βοηθαει να μου πεις αν εχω καποια επιλογη!!

ευχαριστω

dewn735 · 8 Μαρτίου 2011

Δε ξέρω πως γίνεται από dreamweaver, αλλά χρησιμοποιώντας το link που σου είχα παραθέσει, έφτιαξα αυτό (πλάτος 1000px, αριστερή και δεξιά στήλη με πλάτος 200px, κεντρική στήλη 600px και επικεφαλίδα με ύψος 170px):

><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
       <title>test</title>
       <meta http-equiv="content-type" content="text/html; charset=ISO-8859-7" />
           <style type="text/css">
               /* ******************************************************************** */
               /*                  Generated by: http://csscreator.com                 */
               /* ******************************************************************** */
               html, body{
                   margin:0;
                   padding:0;
                   text-align:center;
               }

               #pagewidth{
                   width:1000px;
                   text-align:left;
                   margin:0 auto;
               }

               #header{
                   position:relative;
                   height:170px;
                   background-color:#7F9090;
                   width:100%;
                   display:block;
                   overflow:auto;
               }

               #leftcol{
                   width:200px;
                   float:left;
                   position:relative;
                   /*background-color:#701F2F; */
                   background-image: url(pic.jpg);
               }

               #twocols{
                   width:800px;
                   float:right;
                   position:relative;
               }

               #rightcol{
                   width:200px;
                   float:right;
                   position:relative;
                   /*background-color:#DFE39C;*/
                   background-image: url(pic.jpg);
               }

               #maincol{
                   background-color: #AC997C;
                   float: left;
                   position: relative;
                   width:600px;
               }




               /* ******************************************************************** */
               /* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
               /* ******************************************************************** */
               .clearfix:after {
                   content: ".";
                   display: block;
                   height: 0;
                   clear: both;
                   visibility: hidden;
               }

               .clearfix{display: inline-block;}

               /* Hides from IE-mac \*/
               * html .clearfix{height: 1%;}
               .clearfix{display: block;}
               /* End hide from IE-mac */




               /* ******************************************************************** */
               /*                      printer styles                                  */
               /* ******************************************************************** */

               @media print{
                   /*hide the left column when printing*/
                   #leftcol{display:none;}

                   /*hide the right column when printing*/
                   #rightcol{display:none;}
                   #twocols, #maincol{width:100%; float:none;}
               }

           </style>

   </head>

   <body>
       <div id="pagewidth" >
           <div id="header"><h2>Head</h2> 
               <!-- ΕΔΩ ΕΙΝΑΙ Η ΕΠΙΚΕΦΑΛΙΔΑ ΣΟΥ-->
               <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p></div>
               <!--ΕΔΩ ΤΕΛΕΙΩΝΕΙ Η ΕΠΙΚΕΦΑΛΙΔΑ -->
           <div id="wrapper" class="clearfix">
               <div id="twocols">
                   <div id="maincol">
                       <!-- ΚΕΝΤΡΙΚΗ ΣΤΗΛΗ -->
                       <h1>Main Content Column</h1>
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                       <!-- ΤΕΛΟΣ ΚΕΝΤΡΙΚΗΣ ΣΤΗΛΗΣ -->
                   </div>
                   <div id="rightcol"> 
                       <!-- ΔΕΞΙΑ ΣΤΗΛΗ -->
                       <h2>right Column</h2>
                       <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                       <!-- ΤΕΛΟΣ ΔΕΞΙΑΣ ΣΤΗΛΗΣ -->
                   </div>
               </div>
               <div id="leftcol">
                   <!-- ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ -->
                   <h2>Left Column</h2>
                   <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
                   <!-- ΤΕΛΟΣ ΑΡΙΣΤΕΡΗΣ ΣΤΗΛΗΣ -->
               </div>

           </div>
       </di

</html>

Αποθήκευσέ το και στον ίδιο φάκελο με αυτό βάλε και μια εικόνα με ονομασία pic.jpg

kflabouris · 10 Μαρτίου 2011

ωραιο δειχνει αλλα δυστηχως αν το κρατησω φοβαμαι πως δεν θα μπορω να το επεξεργαστω γιατι ο κωδικας μου φαινετε λιγο δυσκολος,

Οσο για το background το εφτιαξα αλλα πρεπει να εχω ακριβως της διαστασεις για μου την κανει διπλη και δεν ξερω γιατι...

kflabouris · 14 Μαρτίου 2011

Δε ξέρω πως γίνεται από dreamweaver, αλλά χρησιμοποιώντας το link που σου είχα παραθέσει, έφτιαξα αυτό (πλάτος 1000px, αριστερή και δεξιά στήλη με πλάτος 200px, κεντρική στήλη 600px και επικεφαλίδα με ύψος 170px):

><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
       <title>test</title>
       <meta http-equiv="content-type" content="text/html; charset=ISO-8859-7" />
           <style type="text/css">
               /* ******************************************************************** */
               /*                  Generated by: http://csscreator.com                 */
               /* ******************************************************************** */
               html, body{
                   margin:0;
                   padding:0;
                   text-align:center;
               }

               #pagewidth{
                   width:1000px;
                   text-align:left;
                   margin:0 auto;
               }

               #header{
                   position:relative;
                   height:170px;
                   background-color:#7F9090;
                   width:100%;
                   display:block;
                   overflow:auto;
               }

               #leftcol{
                   width:200px;
                   float:left;
                   position:relative;
                   /*background-color:#701F2F; */
                   background-image: url(pic.jpg);
               }

               #twocols{
                   width:800px;
                   float:right;
                   position:relative;
               }

               #rightcol{
                   width:200px;
                   float:right;
                   position:relative;
                   /*background-color:#DFE39C;*/
                   background-image: url(pic.jpg);
               }

               #maincol{
                   background-color: #AC997C;
                   float: left;
                   position: relative;
                   width:600px;
               }




               /* ******************************************************************** */
               /* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
               /* ******************************************************************** */
               .clearfix:after {
                   content: ".";
                   display: block;
                   height: 0;
                   clear: both;
                   visibility: hidden;
               }

               .clearfix{display: inline-block;}

               /* Hides from IE-mac \*/
               * html .clearfix{height: 1%;}
               .clearfix{display: block;}
               /* End hide from IE-mac */




               /* ******************************************************************** */
               /*                      printer styles                                  */
               /* ******************************************************************** */

               @media print{
                   /*hide the left column when printing*/
                   #leftcol{display:none;}

                   /*hide the right column when printing*/
                   #rightcol{display:none;}
                   #twocols, #maincol{width:100%; float:none;}
               }

           </style>

   </head>

   <body>
       <div id="pagewidth" >
           <div id="header"><h2>Head</h2> 
               <!-- ΕΔΩ ΕΙΝΑΙ Η ΕΠΙΚΕΦΑΛΙΔΑ ΣΟΥ-->
               <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p></div>
               <!--ΕΔΩ ΤΕΛΕΙΩΝΕΙ Η ΕΠΙΚΕΦΑΛΙΔΑ -->
           <div id="wrapper" class="clearfix">
               <div id="twocols">
                   <div id="maincol">
                       <!-- ΚΕΝΤΡΙΚΗ ΣΤΗΛΗ -->
                       <h1>Main Content Column</h1>
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                       <!-- ΤΕΛΟΣ ΚΕΝΤΡΙΚΗΣ ΣΤΗΛΗΣ -->
                   </div>
                   <div id="rightcol"> 
                       <!-- ΔΕΞΙΑ ΣΤΗΛΗ -->
                       <h2>right Column</h2>
                       <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
                       <!-- ΤΕΛΟΣ ΔΕΞΙΑΣ ΣΤΗΛΗΣ -->
                   </div>
               </div>
               <div id="leftcol">
                   <!-- ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ -->
                   <h2>Left Column</h2>
                   <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
                   <!-- ΤΕΛΟΣ ΑΡΙΣΤΕΡΗΣ ΣΤΗΛΗΣ -->
               </div>

           </div>
       </di

</html>

Αποθήκευσέ το και στον ίδιο φάκελο με αυτό βάλε και μια εικόνα με ονομασία pic.jpg

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

dewn735 · 14 Μαρτίου 2011

Άλλαξε αυτό:

>#pagewidth{
width:1000px;
text-align:left;
margin:0 auto;
}

σε αυτό:

>#pagewidth{
width:1000px;
text-align:left;
}

Xaralambos · 14 Μαρτίου 2011

Όπως σου είπαν και πιο πρίν ξεκίνα με το http://www.w3schools.com/

διάβασε-μάθε-κάνε τις ασκήσεις σε: html - CSS για αρχή...

Ύστερα βάλε στο πισί σου το frontpage (είναι απίστευτα εύχρηστο)

και σου δίνει τη δυνατότητα να δουλέψεις σε split-screen δηλαδή

γράφεις κώδικα βλέπεις τις αλλαγές ή

κάνεις τις αλλαγές σε γραφικό περιβάλλον και ο κώδικας φτιάχνεται μόνος του..

Μόλις συνηθίσεις το frontpage και έχεις ασχοληθεί αρκετά με το www.w3schools.com

Βάζεις στο πισί σου το dreamweaver......

kflabouris · 18 Μαρτίου 2011

Όπως σου είπαν και πιο πρίν ξεκίνα με το http://www.w3schools.com/

διάβασε-μάθε-κάνε τις ασκήσεις σε: html - CSS για αρχή...

Ύστερα βάλε στο πισί σου το frontpage (είναι απίστευτα εύχρηστο)

και σου δίνει τη δυνατότητα να δουλέψεις σε split-screen δηλαδή

γράφεις κώδικα βλέπεις τις αλλαγές ή

κάνεις τις αλλαγές σε γραφικό περιβάλλον και ο κώδικας φτιάχνεται μόνος του..

Μόλις συνηθίσεις το frontpage και έχεις ασχοληθεί αρκετά με το www.w3schools.com

Βάζεις στο πισί σου το dreamweaver......

ευχαριστω το εχω κοιταξει αρκετα ειναι πολυ ενδιαφερον και εχει βοηθησει να φρεσκαρω τα παλια και να τα προχωρησω,ομως εχω ενα θεματακι ακομα που δεν μπορω να βρω καπου την απαντηση,

εχω φτιαξει πινακα με 2 στηλες αριστερα εχω εικονα και δεξια κειμενο αλλα επειδη το κειμενο ειναι πιο μεγαλο μου βαζει την εικονα στην μεση υπαρχει καποια λυση να παει πανω??

επισης εχω κανει μια στηλη δεξια απο το κεντρικο μενου με ενα div και ενω εχω βαλει κενα και καονικα αλλα και με κωδικα να ξεκιναει λιγο πιο μεσα δεν το δειχνει σε κανενα browser εκτος του internet explorer

kflabouris · 22 Μαρτίου 2011

καποιος που να ξερει???

Σύνδεση

Μενου με διπλα κειμενο

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

kflabouris

nik1992

kflabouris

kflabouris

dewn735

kflabouris

dewn735

kflabouris

dewn735

kflabouris

kflabouris

dewn735

Xaralambos

kflabouris

kflabouris

Αρχειοθετημένο

Σύνδεση