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

CSS + DIVs

taspashal

Από τον taspashal
στο Web Design - Development

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

taspashal Proficient

taspashal

Δημοσ.
Δημοσ.

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

 

Θελω το παρακατω κομματι κωδικα να το κανω με την χρηση divs και μορφοποιηση μεσω css.

Δοκιμασα αλλα δε μπορω να το καταφερω, βγαινει οτι να ναι.

 

><table border=1>
<tr>
	<td align="right" valign="middle" rowspan="2">
		<p>
			δεξια<br>
			στοιχιση
		</p>
	</td>
	<td align="left" valign="middle" rowspan="2">
		<p>
			αριστερη<br>
			στοιχιση
		</p>
	</td>
	<td align="center">
		Τιτλος
	</td>
</tr>
<tr>
	<td align="center" valign="middle">
		<p>
			στοιχιση<br>
			στο κεντρο
		</p>
	</td>
</tr>
</table>

 

Ωστε να εμφανιζετε κατι σαν αυτο:

 

tablesp.png

wyldez Proficient

wyldez

Δημοσ.
Δημοσ.

Υπάρχουν αρκετοί τρόποι να κάνεις αυτό που θέλεις. Παρακάτω σου παραθέτω κώδικα με τρία fixed columns (δηλαδή το πλάτος έχει τεθεί ήδη στα x pixels για κάθε column):

 

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#container{text-align:left}
div#content p{line-height:1.4}
div#left{background:#B9CAFF}
div#right{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin-left: 300px}
div#left{float:left;width:150px;margin-left:-700px}
div#right{float:left;width:150px;margin-left:-550px}
div#footer{clear:left;width:100%}
</style>

</head>

<body>
<div id="container">
   <div id="header"><h1>Title</h1></div>
   <div id="wrapper">
      <div id="content">
         <p><strong>Center</strong>
      </div>
   </div>
   <div id="left">
      <p><strong>Left</strong> </p>
   </div>
   <div id="right">
      <p><strong>Right</strong> </p>
   </div>
   <div id="footer"><p>Footer</p></div>
</div>
</body>
</html>

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

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

Προς την λίστα θεμάτων
  • Δημιουργία νέου...