Βοήθεια στησίματος Portofolio

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

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

Απάντηση
pgeo
Δημοσιεύσεις: 4
Εγγραφή: 07 Δεκ 2009 18:42

Βοήθεια στησίματος Portofolio

Δημοσίευση από pgeo » 08 Μάιος 2011 22:24

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

Θέλω να φτιάξω ένα δικό μου Portofolio αλλά αντιμετωπίζω κάποιες σοβαρές δυσκολίες.
Μια από αυτές είναι η λειτουργικότητα των "Tabs"... δείτε την παρακάτω εικόνα

Εικόνα

Θέλω τα "Tabs" να έχουνε 3 στάδια λειτουργικότητας (active,inactive,hover).
Ο κώδικας που προσπάθησα να χρησιμοποιήσω είναι ο παρακάτω:
#home {
display: block;
width: 70px;
height: 30px;
background:url(images/home_inactive.png) no-repeat 0 0;
}
#home:hover {
background:url(hover%20buttons/home_hover.png) no-repeat 0 0;
}

#our {
display: block;
width: 103px;
height: 30px;
background:url(images/our_inactive.png) no-repeat 0 0;
}
#our:hover {
background:url(hover%20buttons/our_hover.png) no-repeat 0 0;
}

#about {
display: block;
width: 90px;
height: 30px;
background:url(images/about_inactive.png) no-repeat 0 0;
}
#about:hover {
background:url(hover%20buttons/about_hover.png) no-repeat 0 0;
}
Το τελικό αποτέλεσμα της ιστοσελίδας θέλω να είναι όπως το έχω σχεδιάσει δηλ. κάπως έτσι:

Εικόνα


Ένα ακόμα πρόβλημα που αντιμετωπίζω είναι ότι η πρώτη εικόνα που έχω βάλει σε αυτό το πόστ εμφανίζετε τελείως διαφορετικά (πολύ χειρότερα) σε firefox, internet explorer και opera ενώ στο chrome εμφανίζετε όπως την βλέπετε.

Όλος ο κώδικας μέχρι στιγμής είναι αυτός, Html & Css

Html
<html>
<head>
<title>new website</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<link rel="stylesheet" href="style.css"/>
<style type="text/css">
#home {
display: block;
width: 70px;
height: 30px;
background:url(images/home_inactive.png) no-repeat 0 0;
}
#home:hover {
background:url(hover%20buttons/home_hover.png) no-repeat 0 0;
}

#our {
display: block;
width: 103px;
height: 30px;
background:url(images/our_inactive.png) no-repeat 0 0;
}
#our:hover {
background:url(hover%20buttons/our_hover.png) no-repeat 0 0;
}

#about {
display: block;
width: 90px;
height: 30px;
background:url(images/about_inactive.png) no-repeat 0 0;
}
#about:hover {
background:url(hover%20buttons/about_hover.png) no-repeat 0 0;
}
</style>
</head>
<body bgcolor="#cccc10" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (new website.psd) -->
<table id="Table_01" width="1090" height="891" border="0" cellpadding="0" cellspacing="0" align="center" vspace="100">

<tr>
<td width="1090" height="153" colspan="14">&nbsp;</td>
</tr>
<tr>
<td width="208" height="482" colspan="2" rowspan="4">&nbsp;</td>
<td colspan="2" rowspan="2" background="images/new-website_03.png"><img src="images/logo.png" id="logo" ></td>
<td colspan="7">
<img src="images/new-website_04.png" width="381" height="13" alt=""></td>
<td rowspan="4">
<img src="images/new-website_05.png" width="14" height="482" alt=""></td>
<td width="228" height="482" colspan="2" rowspan="4">&nbsp;</td>
</tr>
<tr>
<td >
<a id="home" href="home.html">
<p><b>HOME</b></p>
</a>
</td>

<td>
<img src="active buttons/new-website_08.png" width="3" height="30" alt=""></td>
<td >
<a id="about" href="about.html">
<p><b>ABOUT</b></p>
</a>
</td>

<td>
<img src="images/new-website_10.png" width="3" height="30" alt=""></td>
<td>
<a id="our" href="our.html">
<p><b>OUR WORK</b></p>
</a>
</td>

<td>
<img src="active buttons/new-website_12.png" width="3" height="30" alt=""></td>
<td background="active buttons/contact_active.png">
<a id="contact" href="contact.html">
<p><b>CONTACT US</b></p>
</a>
</td>

</tr>
<tr>
<td>
<img src="active buttons/new-website_14.png" width="13" height="1" alt=""></td>
<td colspan="8" rowspan="2">
<img src="images/new-website_15.png" width="627" height="439" alt=""></td>
</tr>
<tr>
<td>
<img src="images/new-website_16.png" width="13" height="438" alt=""></td>
</tr>
<tr>
<td width="205" height="255" rowspan="2">&nbsp;</td>
<td colspan="12">
<img src="images/new-website_18.png" width="659" height="65" alt=""></td>
<td width="226" height="255" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td width="659" height="190" colspan="12">&nbsp;</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="205" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="246" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="103" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="109" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="226" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Css
body {
background-image: url(images/bgwoods.jpg);
background-position:center top;
background-repeat: no-repeat;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
overflow:scroll;
position:absolute;
}

a {
font:"Arial Black", Gadget, sans-serif;
text-decoration:none;
text-shadow:#FFFBF0;
}
#portofolio{
width:134px;
height:37px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;

}

#logo {

margin-top:-45px;

}


p{font-family:"Sakkal Majalla";
color: #797979;
text-shadow: 0px 1px 0px #fff;
font-size:20px;
text-align:center;
position:static;
}
Οποιαδήποτε βοήθεια ευπρόσδεκτη και ευχαριστώ πολύ για το χρόνο σας. :D

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

Βοήθεια στησίματος Portofolio

Δημοσίευση από fafos » 08 Μάιος 2011 22:41

oso to prospatheis me tables tha exeis provlhmata... yparxoun oraia tutorials me css + divs gia tabs...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

pgeo
Δημοσιεύσεις: 4
Εγγραφή: 07 Δεκ 2009 18:42

Βοήθεια στησίματος Portofolio

Δημοσίευση από pgeo » 08 Μάιος 2011 23:30

Έχεις να μου προτείνεις κανένα καλό tutorial για το δικό μου site που θα με βοηθήσει;

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

Βοήθεια στησίματος Portofolio

Δημοσίευση από fafos » 08 Μάιος 2011 23:36

Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Βοήθεια στησίματος Portofolio

Δημοσίευση από korgr » 08 Μάιος 2011 23:39

Επίσης κοίτα να διορθώσεις αυτό το «Portofolio» που βγάζει μάτι
Portfolio είναι η λέξη :wink:

pgeo
Δημοσιεύσεις: 4
Εγγραφή: 07 Δεκ 2009 18:42

Βοήθεια στησίματος Portofolio

Δημοσίευση από pgeo » 09 Μάιος 2011 01:21

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

Απάντηση

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

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

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