kentrarisma layouut

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

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

Απάντηση
georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 07 Ιούλ 2007 13:47

paidia telika to layout apo to tutorial tis css pos tha to kentraro gia ton internet explorer

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

kentrarisma layouut

Δημοσίευση από xmavidis » 07 Ιούλ 2007 17:57

Βάλε το παρακάτω στο css του αντικειμένου που θέλεις να κεντράρεις.

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

margin: 0 auto;
I want to know God’s thoughts; the rest are details.
Albert Einstein

georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 08 Ιούλ 2007 00:34

basika thelo na kentraro to layout tu lunarmedia. pos tha to kano.

Άβαταρ μέλους
xmavidis
Honorary Member
Δημοσιεύσεις: 1217
Εγγραφή: 02 Δεκ 2003 19:59
Τοποθεσία: Ηράκλειο

kentrarisma layouut

Δημοσίευση από xmavidis » 12 Ιούλ 2007 13:48

αν μπορείς πόσταρε τον κώδικα που έχεις γιατί δεν μπορώ να καταλάβω τι θέλεις.
Αν κατάλαβα σωστά το θέλεις για το tutorial του lunarmedia. Νομίζω ότι αυτό είναι ήδη κεντραρισμένο. :-?
I want to know God’s thoughts; the rest are details.
Albert Einstein

georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 12 Ιούλ 2007 20:59

nai se ayto anaferomai. basika otan to trexo sto mozilla einai kentro. sto internet explorer omos den.

Άβαταρ μέλους
gaucho
Honorary Member
Δημοσιεύσεις: 2408
Εγγραφή: 22 Δεκ 2002 13:18

kentrarisma layouut

Δημοσίευση από gaucho » 12 Ιούλ 2007 22:08

"auto"

i magiki leksi

psakse bres pou tha tin baleis

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

kentrarisma layouut

Δημοσίευση από manolism » 13 Ιούλ 2007 10:07

Κάτι έχεις κάνει λάθος ή κάτι έχεις δεν έχεις βάλει σωστά.

Ρίξε τον κώδικα εδώ να δούμε.

georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 13 Ιούλ 2007 12:23

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

body
{
margin: 0;
background-image:url(background.gif);
background-repeat:repeat-x;
}

#container
{
margin: 0 auto;
padding: 0px;
width: 781px;
height: 800px;
background-image:url(main_back.gif);
}

#header 
{
background-image:url(main_banner.jpg);
width: 780px;
height: 117px;
margin: 0;
padding: 0;
}

#navigation {
background-image:url(navbar.jpg);
width: 780px;
height: 31px;
padding-top:9px;
}

#main_content {
background:none;
width: 741px;
height:600px;
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
}

#retouch {
float:left;
background-image:url(main_retouch.gif);
width: 218px;
height: 143px;
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

#content1 {
float:left;
background-image:url(main_content1.gif);
width: 480px;
height: 133px;
margin-left:20px;
padding-top:40px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

#funny {
float:left;
background-image:url(main_funny.gif);
width: 218px;
height: 143px;
margin-top:20px;   
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

#content2 {
float:left;
background-image:url(main_content2.gif);
width: 480px;
height: 133px;
margin-left:20px;
margin-top:20px;
padding-top:40px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
text-align:center;
}

#random {
float:left;
background-image:url(main_funny.gif);
width: 218px;
height: 143px;
margin-top:20px;   
padding-top:40px;
text-align:center;
line-height:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}

#footer {
float:left;
background-image:url(main_footer.jpg);
width: 781px;
height: 24px;
padding-top:10px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}

#menu {
        margin: 0;
        padding: 0;
        list-style-type: none;
}

#menu li {
  display: inline;
  padding-right: 15px;
  padding-left: 17px;
}

#menu a:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
text-decoration: none;
}

#menu a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#0099FF;
text-decoration:underline;
}

#menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# FFFFCC;
text-decoration: none;
}

#menu a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:# 99CCFF;
text-decoration: none;
}

img {
margin-bottom:5px;
}

.image {
margin-left:5px;
margin-right:5px;
}

.emphasis {
font-weight:bold;
color:#838181;
}

georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 13 Ιούλ 2007 12:24

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

<html>
<head>
<title>my first website</title>

<link href="index.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"><ul id="menu">
<li><a href=" #"  title="Home">Home</a></li>
<li><a href=" #"  title="Portfolio">Portfolio</a></li>
<li><a href=" #"  title="Gallery">Gallery</a></li>
<li><a href=" #"  title="Tutorials">Tutorials</a></li>
<li><a href=" #"title="Donate">Donate</a></li>
<li><a href=" #"  title="Forum">Forum</a></li>
<li><a href=" #"  title="About">About</a></li>
<li><a href=" #"  title="Admin panel">Admin panel</a></li>   
<li><a href=" #"  title="Contact">Contact</a></li>     
</ul></div>
<div id="main_content">
<div id="retouch"><img src="retouch.gif" alt="Image Retouch" />
 <br />
 Μάθετε πως να διορθώνετε<br />
 χρωματικά μία εικόνα <br />
 με το Photoshop</div>
<div id="content1"><span class="emphasis">Adobe Photoshop</span>, or simply <span class="emphasis">Photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">Adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">Photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office.</div>
<div id="funny"><img src="funny.gif" alt="Funny Creation" /><br />
Δημιουργήστε καταπληκτικά <br />
γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop </div>
<div id="content2"><img src="work1.jpg" alt="Work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="Work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="Work 3" width="134" height="111" class="image" /><br />
Δείγματα εργασιών</div> 
<div id="random"><img src="../random.gif" alt="Nike Bug" /><br />
Τυχαίας εμφάνισης εικόνα</div> 
</div>
<div id="footer">Copyright © 2003-2006 <span class="emphasis">Ilias Antonopoulos</span>. All Rights Reserved.
Template created by <span class="emphasis">EkLekTos</span>

<span class="emphasis">Λέξη που θέλουμε </span>

</div>
</body>
</html>

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

kentrarisma layouut

Δημοσίευση από manolism » 13 Ιούλ 2007 12:32

Έχεις ξεχάσει ένα </div> ακριβώς πάνω από το </body> στο τέλος της σελίδας.

Πρέπει να είσαι προσεκτικός που ανοίγει και που κλείνει κάθε tag.

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

<span class="emphasis">Λέξη που θέλουμε </span> 
</div>
</div> 
</body> 
</html>

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

kentrarisma layouut

Δημοσίευση από skeftomilos » 13 Ιούλ 2007 14:53

...και ένας καλός τρόπος να διατηρούμε τα tags σε τάξη είναι το indentation:

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

        <span class="emphasis">Λέξη που θέλουμε </span>
      </div>
    </div>
  </body>
</html>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.


georgeuk
Δημοσιεύσεις: 9
Εγγραφή: 26 Ιουν 2007 12:48

kentrarisma layouut

Δημοσίευση από georgeuk » 13 Ιούλ 2007 20:32

ebala to </div> opos eipate. to problima pu exo einai oti sto mozilla to layout einai sto kentro. omos otan to anigo me to internet explorer 7 to layout einai sta aristera. den einai kentro.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

kentrarisma layouut

Δημοσίευση από skeftomilos » 15 Ιούλ 2007 02:14

Βλέπω εδώ δύο κολλημένα attributes:

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

<li><a href=" #"title="Donate">Donate</a></li>
Θα πρότεινα να περάσεις την σελίδα από κανένα markup validator για να είσαι σίγουρος ότι δεν έχει λάθη. Οι browsers όταν βρίσκουν λάθη τα αντιμετωπίζουν συχνά με διαφορετικούς τρόπους.

- W3C Markup Validation Service
- W3C CSS Validation Service
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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