Πρόβλημα με τα CSS

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

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

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

Πρόβλημα με τα CSS

Δημοσίευση από dpa » 16 Ιαν 2014 18:14

Παιδιά δείτε λίγο αυτό!

http://jsfiddle.net/4d7rs/1/

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

<style type="text/css">
img &#123;
   max-width&#58; 100%;
&#125;
/* &#91; box_epikerotita &#93; */
.box_epikerotita &#123;
	height&#58; 27px;
	max-width&#58; 1200px;
	width&#58; 100%;
	margin&#58; 5px 0px 0px 0px;
	background&#58; #d5d2cd;
	float&#58; left;
	position&#58; relative;
	display&#58; block;
&#125;
.box_epikerotita .title
&#123;
    background&#58; #d5d2cd url&#40;../images/epikerotita.png&#41; center left no-repeat;
    width&#58; 115px;
    height&#58; 15px;
    padding&#58; 6px 5px 6px 15px;
	font-size&#58; 13px;
	font-weight&#58; 600;
	font-style&#58; normal;
	color&#58; #fff;
	display&#58; block;
	float&#58; left;

&#125;
.box_epikerotita .articles
&#123;
    float&#58; left;
    display&#58; block;
    width&#58; 400px;
    padding&#58; 0px;
    margin&#58; 0px;
    overflow&#58; hidden;
&#125;
.box_epikerotita .articles span a
&#123;
    display&#58; inline-block;
    margin-right&#58; 5px;
    font-size&#58; 12px;
	font-weight&#58; 600;
	padding&#58; 2px;
	color&#58; #000; text-decoration&#58; none;
	float&#58; left;
&#125;
.box_epikerotita .articles span a&#58;hover
&#123;
    color&#58; #e12273;
&#125;


</style>

[/code]
<div class="box_epikerotita">
<div class="title">
Επικαιρότητα
</div>
<div class="articles">
<span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a><span><a href="#">box_epikerotita</a></span>
</div>
</div>

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


Γιατί δεν μου κρύβει το κείμενο ??
Έχω βάλει στο div articles overflow&#58;hidden ώστε να μου κρύψει το περιττό κείμενο.

Αλλά δεν δουλεύει μου έσπασε τα νεύρα.


geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Πρόβλημα με τα CSS

Δημοσίευση από geomagas » 16 Ιαν 2014 18:24

[offtopic]Τα spans σου είναι ανοιχτά.[/offtopic]

Μια χαρά το κάνει. Απλά, το div.articles δεν έχει σταθερό height με αποτέλεσμα να προσαρμόζεται στο περιεχόμενο (βάλτου ένα height: 30px να καταλάβεις τι εννοώ).

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

Πρόβλημα με τα CSS

Δημοσίευση από dpa » 16 Ιαν 2014 18:38

Φίλε έχεις δίκιο μου είχε ξεφύγει αυτό για δες το εδώ

http://jsfiddle.net/4d7rs/2/

Αν γίνεται resize το div articles πηγαίνει στην κάτω γραμμή γιατί ???

Αφού υποτίθεται ότι το display: inline-block είναι σε μια γραμμή

Ευχαριστώ πολύ για τον χρόνο σου

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Πρόβλημα με τα CSS

Δημοσίευση από geomagas » 16 Ιαν 2014 18:44

Αφού ο τίτλος είναι float:left, όταν αλλάζει το πλάτος του container (box_epikairotita) οτιδήποτε δεν χωράει θα πάει από κάτω.
Βάλε ένα min-width στο container (σε μονάδα μέτρησης, όχι %).

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

Πρόβλημα με τα CSS

Δημοσίευση από dpa » 16 Ιαν 2014 18:54

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

&#91;url&#93;http&#58;//jsfiddle.net/4d7rs/3/&#91;/url&#93;
Για δες το έβαλα έβγαλα και το float αλλά μόλις γίνει resize πάλι τα ίδια

ρε φίλε με έχουν σκάσει τα css καλύτερα τα table

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

Πρόβλημα με τα CSS

Δημοσίευση από alou » 16 Ιαν 2014 19:14

To .box_epikerotita .articles είναι 300px, το .box_epikerotita .title 115px + 20px padding. Όταν το container τους γίνει μικρότερο από το σύνολό τους φυσικά θα πάει το ένα κάτω από το άλλο.

Ή θα κάνεις το container 435px και θα κάνει scroll (ή θα κρύβεται με overflow:hidden) ή θα χρησιμοποιήσεις media queries για max-width 440 px

Υπάρχουν και άλλοι τρόποι, αυτό είναι το πιο κοντινό σε ότι έχεις ήδη φτιάξει.

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

Πρόβλημα με τα CSS

Δημοσίευση από geomagas » 16 Ιαν 2014 19:15

Αφού ο τίτλος είναι 115px και τα articles άλλα 200, συν κάτι margin/padding x2, θα πρέπει να του βάλεις min-width:250 περίπου, υποθέτω. Εσύ του έχεις βάλει 200.

Edit: Ούπς! Με πρόλαβε ο alou! :D :D

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

Πρόβλημα με τα CSS

Δημοσίευση από dpa » 16 Ιαν 2014 19:46

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

Δεν παίζει όμως πάλι το σπάει από κάτω

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

Πρόβλημα με τα CSS

Δημοσίευση από dpa » 16 Ιαν 2014 19:51

έκανα και τα div τα εσωτερικά span αλλά πάλι δεν παίζει πάλι το σπάει από κάτω

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

Πρόβλημα με τα CSS

Δημοσίευση από fafos » 16 Ιαν 2014 21:04

height:1em; sto .articles
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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