CSS Menu [Προβλημα]

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

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

Απάντηση
TheVirus
Δημοσιεύσεις: 1
Εγγραφή: 31 Αύγ 2009 21:42

CSS Menu [Προβλημα]

Δημοσίευση από TheVirus » 31 Αύγ 2009 21:56

Καλησπέρα !
Εχω φτιαξει μια ιστοσελίδα με Photoshop και τωρα αρχίζει το slicing

Ενω το menu φαίνεται μια χαρά όταν ο firefox ειναι σε ολόκληρη την οθόνη οταν τον αλλάξω στη μισή οθόνη χαλάει ...

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

div#page-warp{
	width:493;
	margin: 0 auto;
	margin-left:-30px;
	
	
}


ul#nav{
	height:69px;	width:493;
	margin-top:-105px;
	margin-left:860px;
	background-image:url(../images/nav-bg.gif);
	background-repeat:no-repeat;
	list-style:none;

}



ul#nav li a{
	padding-left:30px;
	display:block;
	width:90px;
	float:left;
	margin-top:15px;
	color:#fff;
	text-decoration:none;
	outline: none;
	font-size:24px;

}
Html

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

        <ul id="nav">
        	<div id="page-warp">
            <li><a href="#">» Home</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Blog «</a></li>
      		</div>
        </ul>
Καμία ιδέα ;

Άβαταρ μέλους
Aflex
Δημοσιεύσεις: 1769
Εγγραφή: 16 Δεκ 2007 16:40

CSS Menu [Προβλημα]

Δημοσίευση από Aflex » 03 Σεπ 2009 02:38

Έχω ακριβώς το ίδιο πρόβλημα και εγώ: http://www.aflets.com/website/index

Όποια βοήθεια χρήσιμη!!

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

CSS Menu [Προβλημα]

Δημοσίευση από Sermac » 03 Σεπ 2009 04:35

Αυτά τα μεγάλα margin στο ul και το page-wrap δεν τα κατάλαβα (κι ο κώδικας που μας δίνεις εμφανίζει μόνο μια κενή σελίδα), οπότε το έκανα από την αρχή το μενού:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-7" />
<meta http-equiv="Content-Language" content="el" />
<title>menu</title>
<style type="text/css">
body &#123;
    background-color&#58;#4E4E4E;
&#125;

* &#123;
    margin&#58;0;
    padding&#58;0;
&#125;

.inner &#123;
    margin&#58;0 auto;
    width&#58;960px;
&#125;

#nav &#123;
    color&#58;#FFF;
&#125;

#nav ul &#123;
    background&#58;#ADB6B8 url&#40;http&#58;//img232.imageshack.us/img232/4488/navbg.png&#41; repeat-x 0 0;
    height&#58;65px;
    border&#58;1px solid #DCF3FE;
    overflow&#58;hidden;
    list-style-type&#58;none;
&#125;

#nav ul li &#123;
    max-width&#58;200px;
    background&#58;transparent url&#40;http&#58;//img199.imageshack.us/img199/4419/navseperator.png&#41; no-repeat 0 0;
    margin&#58;2px 0 2px -2px; /*negative margin-left to hide the first seperator*/
    padding&#58;16px 24px 18px;
    display&#58;block;
    float&#58;left;
&#125;

#nav ul li a &#123;
    color&#58;#FFF;
    font-size&#58;24px;
    text-decoration&#58;none;
    outline&#58; none;
&#125;

#nav ul li a&#58;hover &#123;
    color&#58;#EFEFEF;
&#125;
</style>
</head>
<body>
    <br />
    <div id="nav">
        <div class="inner">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
Εικόνα

Απάντηση

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

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

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