Mia voithia gia CSS

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

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

Απάντηση
ertert
Δημοσιεύσεις: 195
Εγγραφή: 21 Αύγ 2004 16:30

Mia voithia gia CSS

Δημοσίευση από ertert » 24 Ιαν 2009 13:48

Kalispera...

Exo provlima me to parakato CSS

Ston IE to
<div style="width: 100%;">
pernei kanonika to fonto kai to border toy
<div class="tab">

Se Chrome kai Firefox to agnoei entelos.

Sas eyxaristo...

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#body &#123;
  color&#58; #000000;
  font-family&#58; Tahoma, Arial, Helvetica, sans-serif; 
  margin&#58; 0;
  padding&#58; 0;
  background-color&#58; #E6E6E6;
&#125;

.tab  &#123;
  background-color&#58; #CCCCCC;
  border-top&#58; 3px solid #FF3300;
  border-right&#58; 1px solid #B3B3B3; 
  padding&#58; 0px 0px 0px 0px;
&#125;

.tabtitle  &#123;
  font-size&#58; 17px;
  font-family&#58; Tahoma, Arial, Helvetica, sans-serif;
  font-weight&#58; bold;
  color&#58; #000000;
  padding&#58; 0px 0px 0px 10px;
  background-image&#58; url&#40;/images/tabtitle.gif&#41;;
  background-repeat&#58; no-repeat;
  background-position&#58; 0px 0px;
&#125;
.tabtitle a&#58;link, .tabtitle a&#58;visited &#123; color&#58; #000000; text-decoration&#58; none;&#125;
.tabtitle a&#58;hover &#123; color&#58; #FF0000; text-decoration&#58; underline;&#125;

.newslink &#123;
  font-size&#58; 11px;
  font-family&#58; Tahoma, Arial, Helvetica, sans-serif;
  color&#58; #003366;
&#125;
.newslink a&#58;link &#123; 
  color&#58; #003366;
  display&#58; block;
  border-bottom&#58; 1px solid #B3B3B3;
  padding&#58; 5px 0px 5px 18px;
  margin&#58; 0px 0px 0px 5px;
  background-image&#58; url&#40;/images/news.gif&#41;;
  background-repeat&#58; no-repeat;
  background-position&#58; -2px 5px;
  text-decoration&#58; none;
&#125;
.newslink a&#58;visited &#123; 
  color&#58; #666666;
  display&#58; block;
  border-bottom&#58; 1px solid #B3B3B3;
  padding&#58; 5px 0px 5px 18px;
  margin&#58; 0px 0px 0px 5px;
  background-image&#58; url&#40;/images/news_visit.gif&#41;;
  background-repeat&#58; no-repeat;
  background-position&#58; -2px 5px;
  text-decoration&#58; none;
&#125;
.newslink a&#58;hover &#123; color&#58; #FF0000; background-color&#58; #E6E6E6; text-decoration&#58; none;&#125;
</style>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
</head>

<body>

<div style="width&#58; 500px;">

<div class="tab">
<div class="tabtitle">Δήμοι</div>
<div style="width&#58; 100%;">
<div style="float&#58; left; width&#58; 49%;" class="newslink">
<a href="/dir/dimosindex.php/28/1/">Δήμος 1 &#40;20&#41;</a>
<a href="/dir/dimosindex.php/1/1/">Δήμος 2 &#40;58&#41;</a>
<a href="/dir/dimosindex.php/2/1/">Δήμος 3 &#40;33&#41;</a>
<a href="/dir/dimosindex.php/3/1/">Δήμος 4 &#40;27&#41;</a>
<a href="/dir/dimosindex.php/4/1/">Δήμος 5 &#40;38&#41;</a>
<a href="/dir/dimosindex.php/5/1/">Δήμος 6 &#40;45&#41;</a>
<a href="/dir/dimosindex.php/6/1/">Δήμος 7 &#40;14&#41;</a>
<a href="/dir/dimosindex.php/7/1/">Δήμος 8 &#40;13&#41;</a>
<a href="/dir/dimosindex.php/8/1/">Δήμος 9 &#40;10&#41;</a>
<a href="/dir/dimosindex.php/9/1/">Δήμος 10 &#40;48&#41;</a>
<a href="/dir/dimosindex.php/10/1/">Δήμος 11 &#40;40&#41;</a>
<a href="/dir/dimosindex.php/11/1/">Δήμος 12 &#40;37&#41;</a>
<a href="/dir/dimosindex.php/12/1/">Δήμος 13 &#40;43&#41;</a>
<a href="/dir/dimosindex.php/13/1/">Δήμος 14 &#40;17&#41;</a>
</div>
<div style="float&#58; left; width&#58; 49%;" class="newslink">
<a href="/dir/dimosindex.php/14/1/">Δήμος 15 &#40;12&#41;</a>
<a href="/dir/dimosindex.php/15/1/">Δήμος 16 &#40;39&#41;</a>
<a href="/dir/dimosindex.php/16/1/">Δήμος 17 &#40;71&#41;</a>
<a href="/dir/dimosindex.php/17/1/">Δήμος 18 &#40;15&#41;</a>
<a href="/dir/dimosindex.php/18/1/">Δήμος 19 &#40;53&#41;</a>
<a href="/dir/dimosindex.php/19/1/">Δήμος 20 &#40;41&#41;</a>
<a href="/dir/dimosindex.php/20/1/">Δήμος 21 &#40;22&#41;</a>
<a href="/dir/dimosindex.php/21/1/">Δήμος 22 &#40;46&#41;</a>
<a href="/dir/dimosindex.php/22/1/">Δήμος 23 &#40;16&#41;</a>
<a href="/dir/dimosindex.php/23/1/">Δήμος 24 &#40;45&#41;</a>
<a href="/dir/dimosindex.php/24/1/">Δήμος 25 &#40;539&#41;</a>
<a href="/dir/dimosindex.php/25/1/">Δήμος 26 &#40;15&#41;</a>
<a href="/dir/dimosindex.php/26/1/">Κοινότητα 27 &#40;1&#41;</a>
<a href="/dir/dimosindex.php/27/1/">Κοινότητα 28 &#40;8&#41;</a>
</div>
</div>
</div>
</div>		
			
</body>
</html>

[/img]
Συνημμένα
ie.gif
Internet Explorer
(8.76 KiB) Μεταφορτώθηκε 226 φορές
chrome.gif
Chrome
(5.17 KiB) Μεταφορτώθηκε 231 φορές

ertert
Δημοσιεύσεις: 195
Εγγραφή: 21 Αύγ 2004 16:30

Mia voithia gia CSS

Δημοσίευση από ertert » 24 Ιαν 2009 14:09

Enoeite oti mporo na alaxo to
<div style="width: 100%;">
kai na tou valo fonto kai border...
ALLA
olos o kodikas tou
<div style="width: 100%;">
ftiaxnete apo PHP
kai emfanizete kai se selides pou den xriazete na mpei mesa sto
<div class="tab">

eyxaristo

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

Mia voithia gia CSS

Δημοσίευση από dimsis » 24 Ιαν 2009 15:51

Εντόπισα το πρόβλημα χωρίς να μπορώ να το εξηγήσω όμως. Δεν ξέρω αν θα σε βοηθήσει, αλλά δοκίμασε από το div της δεύτερης στήλης να βγάλεις το float:left (δηλαδή το δεύτερο <div style="float: left; width: 49%;" class="newslink"> κάντο <div style="width: 49%;" class="newslink">) και θα δεις ότι ναι μεν χάνεις πλέον το δίστηλο σου (τα βγάζει όλα κάθετα), αλλά έπειτα δουλεύει το backround color του tab :p

Τι στο καλό γίνετε τώρα και μπερδεύεται ο FX είναι μυστήριο υπό έρευνα....

Στη θέση σου πάντως θα την έψαχνα να το κάνω με UL, LI την λίστα δήμων...

edit & solved: Βάλε ένα overflow:auto; στο .tab

ertert
Δημοσιεύσεις: 195
Εγγραφή: 21 Αύγ 2004 16:30

Mia voithia gia CSS

Δημοσίευση από ertert » 24 Ιαν 2009 18:52

se thermo eyxaristo !!!

Απάντηση

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

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

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