Πως μπορω να κανω κατι τετοιο με css

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

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

Απάντηση
Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

Πως μπορω να κανω κατι τετοιο με css

Δημοσίευση από cyberfreak » 13 Μαρ 2010 19:19

Εικόνα

Προσπαθησα αλλα μου βγαινουν περιεργα :(

Εικόνα

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

				<div id="content">
					<div id="links"></div>
					<div id="ads"></div>
					<div id="ads2"></div>
				</div>
και css

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

#ads&#123;
	width&#58;150px;
	height&#58;150px;
	border&#58;solid 1px #000000;
	float&#58;right;
&#125;
#ads2&#123;
	width&#58;150px;
	height&#58;150px;
	border&#58;solid 1px #000000;
	float&#58;right;
&#125;

#links&#123;
	width&#58;500px;
	height&#58;500px;
	border&#58;solid 1px #000000;
	float&#58;left;
&#125;

starfish
Δημοσιεύσεις: 600
Εγγραφή: 15 Δεκ 2006 12:58

Πως μπορω να κανω κατι τετοιο με css

Δημοσίευση από starfish » 13 Μαρ 2010 19:59

βάλε τα ads μεσα σε ένα div που θα έχει το πλάτος που θες και θα είναι floated right.

Επίσης δεν ξέρω τι πλάτος έχεις ορίσει στο content.
Εάν το content είναι πάνω από 800px λογικό να μην σου παίζει και να "επιπλέουν" δίπλα.

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

Πως μπορω να κανω κατι τετοιο με css

Δημοσίευση από cyberfreak » 13 Μαρ 2010 20:05

ευχαριστω φιλε πετυχε ετσι :D

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως μπορω να κανω κατι τετοιο με css

Δημοσίευση από dimsis » 13 Μαρ 2010 20:21

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="el" lang="el">
<head>
<title>Green Blocks</title>
<style>
html, body &#123;
	margin&#58;0;
	padding&#58;0;
&#125;
#content &#123;
	background-color&#58;#c2ffc4;
	width&#58;660px;
	height&#58;430px;
	margin&#58;0 auto;
&#125;
#ads, #ads2 &#123;
	width&#58;175px;
	height&#58;170px;
	background-color&#58;#429344;
	display&#58;block;
	margin-bottom&#58;15px;
&#125;
#links &#123;
	float&#58;left;
	margin&#58;30px 0 30px 30px;
	width&#58;407px;
	height&#58;355px;
	background-color&#58;#429344;
&#125;
#rightcol &#123;
	float&#58;right;
	margin-top&#58;30px;
	width&#58;205px;
&#125;
</style>
</head>
<body>
<div id="content">
  <div id="links"></div>
  <div id="rightcol">
    <div id="ads"></div>
    <div id="ads2"></div>
  </div>
</div>
</body>
</html>

demo: http://www.avadaz.com/playground/greenblocks/

Άβαταρ μέλους
cyberfreak
Honorary Member
Δημοσιεύσεις: 3474
Εγγραφή: 08 Σεπ 2004 16:38
Τοποθεσία: Κρυα Βρυση
Επικοινωνία:

Πως μπορω να κανω κατι τετοιο με css

Δημοσίευση από cyberfreak » 13 Μαρ 2010 20:27

καλα απλα τελειος :D

Απάντηση

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

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

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