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

css design

xtremus13

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

 Share

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

xtremus13 Proficient

xtremus13

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

Γειά σας παιδιά,

 

Έχω μια εργασία και προσπαθώ να κάνω αλλάγες πάνω σε CSS...

Μήπως μπορεί κανείς να βοηθήσει?

 

 

παρακάτω δίνω html και css κώδικα καθώς και screen shot του πώς θέλω να το κάνω?

 

επίσης ξέρει κανείς πως μπορώ να επιλέγω πχ μικρογραφίες και να αλλάζει όλη οθόνη σε μικρογραφίες?

ποια είναι η εντολή που κάνει trigger αυτή τη διαδικασία.

 

Υγ δε θέλω να πειράξω καθόλου την Html... MONO με css..

 

ευχαριστώ εκ των προτέρων..!!!

 

 

 

 

 

 

<?xml version="1.0" encoding="utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<title>Απλή photo gallery</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

 

<h1>Απλή photo gallery</h1>

 

<div id="content">

<h2>Επιλογές προβολής:</h2>

<input type="radio" id="thumbnails" name="view" />

<label for="thumbnails">Μικρογραφίες</label>

 

<input type="radio" id="medium" name="view" checked="checked" />

<label for="medium">Μεσαίο μέγεθος</label>

 

<input type="radio" id="large" name="view" />

<label for="large">Μεγάλο μέγεθος</label>

 

<ul class="gallery">

<li>

<img src="pictures/linguine_porcini.jpg" alt="Linguine with porcini mushrooms" />

<p><a href=" Linguine with porcini mushrooms with porcini mushrooms</a></p>

</li>

<li>

<img src="pictures/Creme brulee.jpg" alt="Creme brulee" />

<p><a href=" creme brulee brulee</a></p>

</li>

<li>

<img src="pictures/sushi_variety.jpg" alt="Sushi" />

<p><a href=" Oh, Sushi Heaven!

</li>

<li>

<img src="pictures/mango_cheesecake.jpg" alt="Mango Cheesecake" />

<p><a href=" mango cheesecake Cheesecake</a></p>

</li>

<li>

<img src="pictures/salmon_teriyaki.jpg" alt="Salmon Teriyaki" />

<p><a href=" Salmon Teriyaki Teriyaki</a></p>

</li>

<li>

<img src="pictures/pancakes.jpg" alt="Pancakes with maple syrup" />

<p><a href=" pancakes @ breakfast with maple syrup</a></p>

</li>

<li>

<img src="pictures/seaweed_salad.jpg" alt="Seaweed salad" />

<p><a href=" Seaweed Salad salad</a></p>

</li>

<li>

<img src="pictures/apple_pie.jpg" alt="Apple pie with whipped cream" />

<p><a href=" Back from a relaxing week pie with whipped cream</a></p>

</li>

</ul>

</div>

 

<p id="footer">

©2010 Οικονομικό Πανεπιστήμιο Αθηνών

<small>Οι φωτογραφίες δημοσιεύτηκαν στο <a href="http://flickr.com">flickr</a> με δικαιώματα που επιτρέπουν τη διανομή τους για τις ανάγκες του μαθήματος</small>

</p>

 

</body>

</html>

post-218063-0-28943300-1353317876_thumb.jpg

post-218063-0-01843600-1353317892_thumb.jpg

post-218063-0-86666100-1353317911_thumb.jpg

post-218063-0-48872800-1353317922_thumb.jpg

post-218063-0-93542000-1353317931_thumb.jpg

post-218063-0-56747800-1353317943_thumb.jpg

post-218063-0-21149800-1353317951_thumb.jpg

post-218063-0-82307600-1353317958_thumb.jpg

post-218063-0-12821700-1353317976_thumb.jpg

Style.css

post-218063-0-54749200-1353318056_thumb.jpg

defacer Grand Master

defacer

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

Στήσε ένα JSFiddle με την σχετική HTML και CSS για να μπορούμε να το δούμε και περιέγραψε και με λόγια το τι ακριβώς θέλεις να κάνεις.

 

Πάντως με μια γρήγορη ματιά στα CSS βλέπω ότι υπάρχουν θέματα:

  • το img έχει ένα σκασμό properties που δεν καταλαβαίνω σε τι χρειάζονται και μάλλον απλά κάνουν κακό (π.χ. γιατί position: relative, γιατί display: block)
  • έχεις μπερδεμένα κάποια πράγματα όσον αφορά browser compatibility -- το filter: δεν χρειάζεται σε IE9, σε IE8 μπορείς να κάνεις το ίδιο πολύ προτιμότερα με -ms-filter και σε IE7 ναι μεν αυτό το effect δεν γίνεται διαφορετικά αλλά από την άλλη δεν υποστηρίζεται το display: inline-block και θέλει άλλα hacks για να πετύχεις το αποτέλεσμα -- γενικά δες στο reference του MDN για μια γρήγορη σύνοψη
  • τι νόημα έχει με filter να βάζεις opacity 0.5 και με το opacity το ίδιο να βάζεις 1;
  • "border: 1px solid none" => αυτό τι νόημα έχει;

xtremus13 Proficient

xtremus13

Δημοσ.
  • Μέλος
Δημοσ.

τα φίλτρα ξέχασα να τα βγάλω..!!! (απλά πειραματιζόμουν...)

 

η έκφωνηση της εργασίας μου είναι:

Καλείστε να γράψετε ένα αρχείο CSS (με όνομα style.css) που θα κάνει την εν λόγω HTML σελίδα να μοιάζει με τις εικόνες που βρίσκονται στον φάκελο screenshots.

 

 

Παρατηρήσεις & Παραδοχές

 

 

 Το CSS σας θα ελεγχθεί σε Firefox . Ορισμένα από αυτά που πρέπει να κάνετε δενυποστηρίζονται καν σε άλλους πλοηγητές ακόμα.

 

 Δεν επιτρέπεται να τροποποιήσετε την HTML ή να χρησιμοποιήσετε επιπλέον εικόνες

 

 Η εναλλαγή μεταξύ των προβολών (καθώς και οτιδήποτε άλλο στην σελίδα) θα πρέπει να

υλοποιείται μόνο με CSS και δεν επιτρέπεται η χρήση Javascript.

 

 Δεν επιτρέπεται χρήση ιδιοτήτων τιμών ή selectors που δεν υπάρχουν σε κανένα πρότυπο(ανεξαρτήτως κατάστασης του προτύπου). Επί παραδείγματι, δεν επιτρέπεται η χρήση των

 

ιδιοτήτων με πρόθεμα –moz- που αφορούν μόνο τον Firefox.

Style.css

defacer Grand Master

defacer

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

Όπως είπα, βάλ'το στο jsfiddle.

 

Πάντως αυτό το (γενικά ανεπιθύμητο) "stacking" effect που φαίνεται στην εικόνα (σα να έπαιζες tetris και η βαρύτητα να ήταν προς τα αριστερά της οθόνης) είναι χαρακτηριστικού των προσεγγίσεων με float: left και όχι αυτών όπως η δική σου με display: inline-block (που είναι συνήθως προτιμότερο).

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

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