πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

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

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

Απάντηση
dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 17:53

Κώδικας css

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

.news_greece #right-in { 
	float: left; width: 267px; background-color: #fff; margin-right: 5px; padding: 0px 5px 0px 10px; border: 0px; border-left: 1px solid #f4f4f4; background: none; min-height: 330px;
}
.news_greece #right-in .text { float: left; padding-bottom: 10px; }
.news_greece #right-in .text .title { float: left; }
.news_greece #right-in .text .title .time { float: left; color: #6d6e71; font-weight: 700; padding-right: 10px; }
.news_greece #right-in .text .title a { float: left; text-decoration: none; color: #000; font-family: "Roboto", sans-serif; font-size: 12px; line-height: 20px; font-weight: 700; }
.news_greece #right-in .text .title a:hover { float: left; text-decoration: none; color: #ff9500; font-family: "Roboto", sans-serif; font-size: 12px; font-weight: 700; }


HTML

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

            	<div id="right-in">
                	<div class="text">
                    	
                        <div class="title"><div class="time">13&#58;59</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><div class="time">13&#58;43</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><div class="time">13&#58;38</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><div class="time">13&#58;30</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><div class="time">13&#58;28</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><div class="time">13&#58;24</div><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                    </div><!-- end text -->
                </div><!-- end right-in -->

Παιδιά έχω αυτόν τον κώδικα και μου εμφανίζει την ώρα επάνω και τον τίτλο κάτω.

Εγώ θέλω ο τίτλος να είναι δίπλα γιατί δεν μου το κάνει ???
τι έχω κάνει λάθος ???

ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από alou » 07 Νοέμ 2013 18:39

Τα div αν δεν τα δηλώσεις αλλιώς, είναι block elements. Η μία λύση είναι

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

div.time &#123;display&#58;inline-block;width&#58;120px&#125;
ας πούμε και η άλλη λύση είναι το div class="time" να γίνει span class="time" (το span είναι inline element).

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 19:04

δεν μου δουλεύει !!!

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 19:14

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

.news_greece #right-in &#123; 
	float&#58; left; width&#58; 267px; background-color&#58; #fff; margin-right&#58; 5px; padding&#58; 0px 5px 0px 10px; border&#58; 0px; border-left&#58; 1px solid #f4f4f4; background&#58; none; min-height&#58; 330px;
&#125;
.news_greece #right-in .text &#123; float&#58; left; padding-bottom&#58; 10px; &#125;
.news_greece #right-in .text .title &#123; float&#58; left; &#125;
.news_greece #right-in .text .title .time &#123; display&#58; inline-block; width&#58; 150px; color&#58; #6d6e71; font-weight&#58; 700; padding-right&#58; 10px; &#125;
.news_greece #right-in .text .title a &#123; float&#58; left; text-decoration&#58; none; color&#58; #000; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; line-height&#58; 20px; font-weight&#58; 700; &#125;
.news_greece #right-in .text .title a&#58;hover &#123; float&#58; left; text-decoration&#58; none; color&#58; #ff9500; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; font-weight&#58; 700; &#125;

το έβαλα και δεν δουλεύει

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από alou » 07 Νοέμ 2013 19:18

Τι είναι αυτό που δεν σου δουλεύει ακριβώς?

http://jsfiddle.net/8hcJD/

προσθέτοντας μόνο αυτό που σου είπα στο css είναι μια χαρά. Κάτι έκανες λάθος ή υπάρχει και κάτι άλλο που επηρεάζει.

note: div.time όχι ... .time

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 19:31

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

        <div style="clear&#58;both;"></div>
        <div class="line"></div>
		<div class="news_greece">
        
        	<div id="header_domain"><a href="#" target="_blank" title="">PROTOTHEMA</a><div id="arrow"></div></div>
        	<div id="header_category"><a href="#" target="_blank" title="">Ελλάδα</a></div>
        	<div id="more_articles"><a href="#" target="_blank" title="">Όλες οι ειδήσεις για Ελλάδα &raquo;</a></div>
        	<div style="clear&#58;both;"></div>
            
            
            <div id="left-in">
            
                <div class="box">
                	<div class="image"><a href="#" target="_blank" title=""><img src="images_articles/germenis.png" width="580" height="330" alt="" /> </a></div>
                    <div class="text">
                    	<h1><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></h1>
                        <p>Την τελευταία στιγμή μεταφέρθηκε ο ιατρικός εξοπλισμός σε ασφαλές και στεγνό μέρος  ... </p>
                    </div>
                </div>
                <div style="clear&#58;both;"></div>
                
                <div class="box">
                	<div class="image"><a href="#"target="_blank" title=""><img src="images_articles/germenis.png" width="150" height="100" alt="" /> </a></div>
                    <div class="text">
                    	<h1><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></h1>
                        <p>Την τελευταία στιγμή μεταφέρθηκε ο ιατρικός εξοπλισμός σε ασφαλές και στεγνό μέρος  ... </p>
                    </div>
                </div>
                
                <div class="box">
                	<div class="image"><a href="#" target="_blank" title=""><img src="images_articles/germenis.png" width="150" height="100" alt="" /> </a></div>
                    <div class="text">
                    	<h1><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></h1>
                        <p>Την τελευταία στιγμή μεταφέρθηκε ο ιατρικός εξοπλισμός σε ασφαλές και στεγνό μέρος  ... </p>
                    </div>
                </div>
            
            
            
            	</div><!-- end left-in -->
                
            	<div id="right-in">
                	<div class="text">
                    	
                        <div class="title"><span class="time">13&#58;59</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><span class="time">13&#58;43</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><span class="time">13&#58;38</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><span class="time">13&#58;30</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><span class="time">13&#58;28</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        <div class="title"><span class="time">13&#58;24</span><a href="#" target="_blank" title="">Κατέρρευσε το ιατρείο στις εγκαστάσεις του ΣΕΓΑΣ στον Άγιο Κοσμά</a></div>
                        
                    </div><!-- end text -->
                </div><!-- end right-in -->
                
            
        </div><!-- end news_greece -->


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


/* flow news greece box */
.news_greece &#123;
	float&#58; left; width&#58; 1198px;	padding&#58; 0px; margin&#58; 10px 0px 10px 0px; background-color&#58; #fff; border&#58; 1px solid #ccc;
&#125;
.news_greece #header_domain &#123;
  float&#58; left;
  padding&#58; 10px;
  background&#58; #f37600;
  position&#58; relative;
  color&#58; #fff; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; normal; font-size&#58; 20px; 
&#125;
.news_greece #header_domain .arrow &#123; position&#58;absolute; background&#58; url&#40;../images/arrow_1.png&#41; center center no-repeat; width&#58;5px; height&#58;8px; right&#58; -5px; top&#58; 20px; z-index&#58; 999; &#125;

.news_greece #header_domain a, .news_greece #header_domain a&#58;hover &#123;
	float&#58; left; text-decoration&#58; none;	color&#58; #fff; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; normal; font-size&#58; 20px;
&#125;


.news_greece #header_category &#123;
  float&#58; left; padding&#58; 10px; background&#58; #000; position&#58; relative;
  color&#58; #fff; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; normal; font-size&#58; 20px; 
&#125;
.news_greece #header_category a &#123;
	float&#58; left; text-decoration&#58; none;
	color&#58; #fff; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; italic; font-size&#58; 20px;
&#125;
.news_greece #header_category a&#58;hover &#123;
	float&#58; left; text-decoration&#58; none;
	color&#58; #f37600; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; italic; font-size&#58; 20px;
&#125;

.news_greece #more_articles &#123; 
	padding&#58; 10px 10px 10px 10px; float&#58; right; display&#58;block; color&#58; #000; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-style&#58; italic; font-size&#58; 15px;	line-height&#58; 30px;
&#125;
.news_greece #more_articles a &#123;
	text-decoration&#58; none; color&#58; #000; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-size&#58; 15px;
&#125;
.news_greece #more_articles a&#58;hover &#123;
	float&#58; left; text-decoration&#58; none; color&#58; #f37600; font-weight&#58; 700; font-family&#58; Roboto, sans-serif; font-size&#58; 15px;
&#125;


.news_greece #left-in &#123; 
	float&#58; left; width&#58; 890px; background-color&#58; #fff; padding&#58; 5px;
&#125;
.news_greece #left-in .box&#58;first-child	 	&#123; float&#58; left; &#125;
.news_greece #left-in .box&#58;first-child .image &#123; float&#58; left; &#125;
.news_greece #left-in .box&#58;first-child .text &#123; display&#58; inline-block; margin-left&#58; 15px; &#125;
.news_greece #left-in .box&#58;first-child h1 a &#123; text-decoration&#58; none; &#125;
.news_greece #left-in .box&#58;first-child h1 a&#58;hover &#123; text-decoration&#58; none; color&#58; #f37600;  &#125;

.news_greece #left-in .box &#123; 
	float&#58; left; width&#58; 375px; padding&#58; 10px; border&#58; 0px;
&#125;

.news_greece #left-in .box .image &#123; float&#58; left; &#125;
.news_greece #left-in .box .text &#123; float&#58; left; margin-left&#58; 15px; &#125;

.news_greece #left-in .box .text h1 a &#123; 
  	text-decoration&#58; none;
	color&#58; #000;
	font-family&#58; "Roboto", sans-serif;
	font-size&#58; 12px;
	line-height&#58; 18px;
&#125;
.news_greece #left-in .box .text h1 a&#58;hover &#123; 
	text-decoration&#58; none;
	color&#58; #ff9500;
	font-family&#58; "Roboto", sans-serif;
	font-size&#58; 12px;
&#125;
.news_greece #left-in .box .text p &#123; 
	font-family&#58; "Roboto", sans-serif;
	font-size&#58; 12px;
&#125;
.news_greece #right-in &#123; 
	float&#58; left; width&#58; 267px; background-color&#58; #fff; margin-right&#58; 5px; padding&#58; 0px 5px 0px 10px; border&#58; 0px; border-left&#58; 1px solid #f4f4f4; background&#58; none; min-height&#58; 330px;
&#125;
.news_greece #right-in .text &#123; float&#58; left; padding-bottom&#58; 10px; &#125;
.news_greece #right-in .text .title &#123; float&#58; left; &#125;
.news_greece #right-in .text .title .time &#123; display&#58; inline-block; width&#58; 150px; color&#58; #6d6e71; font-weight&#58; 700; padding-right&#58; 10px; &#125;
.news_greece #right-in .text .title a &#123; float&#58; left; text-decoration&#58; none; color&#58; #000; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; line-height&#58; 20px; font-weight&#58; 700; &#125;
.news_greece #right-in .text .title a&#58;hover &#123; float&#58; left; text-decoration&#58; none; color&#58; #ff9500; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; font-weight&#58; 700; &#125;
span.time &#123; display&#58; inline-block; &#125;
/* flow news_greece box */


Δεν μου δουλεύει το έκανα και span μου έχει σπάσει τα νεύρα
Συνημμένα
a.png

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 20:02

Ρε φίλε με τα css με το float: left δεν το στοιχίζεις το ένα δίπλα στο άλλο γιατί γίνεται αυτό ???


σε ευχαριστώ πολύ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6237
Εγγραφή: 30 Νοέμ 2004 03:09

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από fafos » 07 Νοέμ 2013 21:04

To float efoson den exei oristei width tha parei toso width oso to keimeno, ta paddings klp.. efoson periosrizeis to mhkos ths dexias sthlhs fysiko einai to div "title" na parei to 100% tou width kai na synexisei apo kato me apotelesma to time na mhn mporei na ginei float sta aristera kai na vgainei apo pano...

1h lysh.. vale to time me ena span mesa sto div title..

2h lysh.. dose ligotero keimeno sto title

EDIT.. tora eida kala ton kodika:

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

.news_greece #right-in .text &#123; float&#58; left; padding-bottom&#58; 10px; &#125;
.news_greece #right-in .text .title &#123; float&#58; left; &#125;
.news_greece #right-in .text .title .time &#123;  float&#58; left;  color&#58; #6d6e71; font-weight&#58; 700; padding-right&#58; 10px; &#125;
.news_greece #right-in .text .title a &#123;  text-decoration&#58; none; color&#58; #000; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; line-height&#58; 20px; font-weight&#58; 700; &#125;
.news_greece #right-in .text .title a&#58;hover &#123; text-decoration&#58; none; color&#58; #ff9500; font-family&#58; "Roboto", sans-serif; font-size&#58; 12px; font-weight&#58; 700; &#125; 
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 21:31

eyxaristo file

mou dineis lyseis panta


alla ta css mou spane ligo ta neura

meiose to padding apo to platos, meiwse to border meiwse to margin kai prepei na kaneis olo ypologismous

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 07 Νοέμ 2013 21:33

otan douleueis me pososto to padding pws to afereis ???

px width 300px

arra orizw width: 290px kai padding: 5px;

an douleuw me width: 100%; padding: ?

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από burnmind » 08 Νοέμ 2013 02:26

Το box-sizing θα σου λύσει τα χέρια.

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 08 Νοέμ 2013 19:10

Σας ευχαριστώ πολύ όλους παιδιά

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

πρόβλημα με κείμενο δεν εμφανίζεται δίπλα δίπλα

Δημοσίευση από dpa » 08 Νοέμ 2013 19:36

Παιδιά λέει ότι σε περίπτωση που χρησιμοποιήσεις min-width δεν ισχύει.

Σε περίπτωση που χρησιμοποιήσω min-width: σε ποσοστό πόσο padding και border θα πρέπει να αφαιρέσω σε ποσοστό. ???

Απάντηση

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

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

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