Προς το περιεχόμενο

css + τοποθέτηση εικόνων σε συγκεκριμένες θέσεις


ligos

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

Θέλω να τοποθετήσω 9 εικόνες (μικρού μεγέθους) σε μία σελίδα χωρίς να χρησιμοποιήσω tables.Ο τρόπος που σκέφτομαι να χρησιμοποιήσω ύστερα απο ψάξιμο είναι αυτό το css :

#photo1

{

position:absolute;

top: τιμή px;

left: τιμή px;

}

#photo2

{

position:absolute;

top: τιμή px;

left: τιμή px;

}

...

#photo9

{

position:absolute;

top: τιμή px;

left: τιμή px;

}

 

και στη συνέχεια στην html :

<div id="photo1"><img src="images/photo1.jpg" </div>

<div id="photo2"><img src="images/photo2.jpg" </div>

...

<div id="photo9"><img src="images/photo9.jpg" </div>

 

Είναι σωστός αυτός ο τρόπος ; Αν έχετε να προτείνετε κάποιον καλύτερο θα με βοηθούσε αρκετά.

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

den tha symfonousa me ton tropo pou pas na ta kaneis... alla kai ayto pou zhtas einai poly geniko kai aoristo.. an exeis kati sigkekrimeno sto myalo sou kalytera na to peis giati me to en logo paradigma oti kai na protino tha einai blakeia giati den ksero ti exeis skopo na kaneis... alla genikotera na apofeygeis to position: absolute;

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

episeis tha sou protina gia kaloupi na exeis to parakato..

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
/**
* CSS GOES HERE 
*/

-->
</style>
</head>

<body>
<!--
-- CONTENT GOES HERE
-->

</body>
</html>

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Εύχαριστώ για την απάντηση , βρήκα τη λύση απο βιβλίο γι' αυτό που ψάχνω και είναι η εξής :

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS photo album</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

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

</head>

<body>

<ul id="albumlist">

<li><img src="thumb1.jpg" alt="Garlic" width="180" height="130"

/>Garlic</li>

<li><img src="thumb2.jpg" alt="Muffin" width="180" height="130"

/>Muffin</li>

<li><img src="thumb3.jpg" alt="tomato" width="180" height="130"

/>Tomato</li>

<li><img src="thumb4.jpg" alt="chilli" width="180" height="130"

/>Chilli</li>

<li><img src="thumb5.jpg" alt="pear" width="180" height="130"

/>Pear</li>

<li><img src="thumb6.jpg" alt="pepper" width="180" height="130"

/>Pepper</li>

<li><img src="thumb7.jpg" alt="coffee beans" width="180"

height="130" />Coffee Beans</li>

<li><img src="thumb8.jpg" alt="lime" width="180" height="130"

/>Limes</li>

</ul>

</body>

</html>

 

body {

background-color: #FFFFFF;

color: #000000;

margin: 0;

padding: 0;

}

#albumlist {

list-style-type: none;

}

#albumlist li {

float: left;

margin-right: 6px;

margin-bottom: 10px;

font: bold 0.8em Arial, Helvetica, sans-serif;

color: #333333;

}

#albumlist img {

display: block;

border: 1px solid #333300;

}

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

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

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

  • Δημιουργία νέου...