Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

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

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

Απάντηση
qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από qpen » 18 Οκτ 2016 12:05

Μπορεί κάποιος να μου δείξει πως θα μπορούσαμε να προσθέσουμε στην αριστερή πλευρά αυτού του top nav menu ενα Logo και στη δεξιά μεριά τις κατηγορίες ; Ως εχει ολα στοιχίζονται αριστερά και δεν μου αρέσει γιατί δεν ξεχωρίζει το Logo απο τις κατηγορίες.

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

<!DOCTYPE html>
<html>
<head>
<style>
body &#123;margin&#58;0;&#125;
ul.topnav &#123;
  list-style-type&#58; none;
  margin&#58; 0;
  padding&#58; 0;
  overflow&#58; hidden;
  background-color&#58; #333;
&#125;

ul.topnav li &#123;float&#58; left;&#125;

ul.topnav li a &#123;
  display&#58; inline-block;
  color&#58; #f2f2f2;
  text-align&#58; center;
  padding&#58; 14px 16px;
  text-decoration&#58; none;
  transition&#58; 0.3s;
  font-size&#58; 17px;
&#125;

ul.topnav li a&#58;hover &#123;background-color&#58; #555;&#125;

ul.topnav li.icon &#123;display&#58; none;&#125;

@media screen and &#40;max-width&#58;680px&#41; &#123;
  ul.topnav li&#58;not&#40;&#58;first-child&#41; &#123;display&#58; none;&#125;
  ul.topnav li.icon &#123;
    float&#58; right;
    display&#58; inline-block;
  &#125;
&#125;

@media screen and &#40;max-width&#58;680px&#41; &#123;
  ul.topnav.responsive &#123;position&#58; relative;&#125;
  ul.topnav.responsive li.icon &#123;
    position&#58; absolute;
    right&#58; 0;
    top&#58; 0;
  &#125;
  ul.topnav.responsive li &#123;
    float&#58; none;
    display&#58; inline;
  &#125;
  ul.topnav.responsive li a &#123;
    display&#58; block;
    text-align&#58; left;
  &#125;
&#125;
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript&#58;void&#40;0&#41;;" style="font-size&#58;15px;" onclick="myFunction&#40;&#41;">&#9776;</a>
  </li>
</ul>

<div style="padding-left&#58;16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction&#40;&#41; &#123;
    var x = document.getElementById&#40;"myTopnav"&#41;;
    if &#40;x.className === "topnav"&#41; &#123;
        x.className += " responsive";
    &#125; else &#123;
        x.className = "topnav";
    &#125;
&#125;
</script>

</body>
</html>
Ειναι απο το w3c

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από qpen » 18 Οκτ 2016 14:37

Όταν λεω logo εννοώ κείμενο μια λέξη δηλαδή όχι εικόνα !
Πως το κάνουμε αυτό ;

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

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από geomagas » 20 Οκτ 2016 12:58

Γιατί δεν αντικαθιστάς το Home με το logo σου; Ούτως ή άλλως υποθέτω ότι το logo θα είναι και link στην κεντρική σελίδα, σωστά;

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από qpen » 07 Νοέμ 2016 20:07

Θα ήθελα τέρμα αριστερά να μπει ένα logo κειμένου ή εικόνας και οι κατηγορίες να πάνε τέρμα δεξιά.

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

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από geomagas » 08 Νοέμ 2016 02:18

Δύο πράγματα:

1) Πρόσθεσε ένα <li> με το logo σου σαν πρώτο στοιχείο της λίστας:

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

<li class="logo">Logo</li>
2) Πρόσθεσε το παρακάτω στο css σου:

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

ul.topnav li&#58;not&#40;&#58;first-child&#41; &#123;float&#58; right;&#125;

qpen
Δημοσιεύσεις: 12
Εγγραφή: 18 Οκτ 2016 11:58

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από qpen » 08 Νοέμ 2016 12:43

Δουλεύει όμως οι κατηγορίες της λίστας (τα li) εμφανίζονται στα δεξιά αντίστροφα δηλαδή η τελευταία κατηγορία είναι πρώτη η προ-τελευταία είναι δεύτερη κτλ γιατί συμβαίνει αυτό και πως μπορούμε να το διορθώσουμε ;

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

Top nav menu - Στην αριστερη πλευρα το logo και δεξια οι κατηγοριες !

Δημοσίευση από geomagas » 08 Νοέμ 2016 16:14

Μόνο αν το βάλεις όλο σε ένα ευρύτερο wrapper, να αφήσεις μόνο τις επιλογές του μενού σε <ul> και να κάνεις το <ul> float:right και όχι όλο το wrapper (ουτε τα <li>). Κάπως έτσι:

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

<div id="menu-wrapper">
  <span class="logo">Logo</span>
  <ul class="topnav" id="myTopnav">
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li class="icon">
      <a href="javascript&#58;void&#40;0&#41;;" style="font-size&#58;15px;" onclick="myFunction&#40;&#41;">&#9776;</a>
    </li>
  </ul>
</div>
και

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

ul.topnav &#123;
  display&#58; inline-block;
  float&#58; right;
&#125;
Το υπόλοιπο styling το αφήνω σε σένα...

Απάντηση

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

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

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