Ερώτηση για το navigation bar στην κορυφή

[foutzos]

Καλησπέρα σε όλους. θα ήθελα στο Navigation bar ( μενού) να έχω τα border μόνο μεταξύ 2 κελιών όπως το Insomnia. δηλαδή να μην έχει border στην αρχή και στο τέλος. Πως μπορώ να το κάνω;

 

Προς το παρόν το έχω με borders δεξιά και αριστερά

δηλαδή

border-right:1px solid #f6672e;border-left:1px solid #852601

[dewn735]

Αν υποθέσουμε ότι χρησιμοποιείς list:

<ul>
<li class='first'><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

css:

li{border-left:1px solid #000;float:left;}
li.first{border-left:0;}

[foutzos]

 

Αν υποθέσουμε ότι χρησιμοποιείς list:

<ul>
<li class='first'><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>

css:

li{border-left:1px solid #000;float:left;}
li.first{border-left:0;}

Καταρχήν ευχαριστώ για την απάντηση σου.

 

Στον blogger είναι έτσι :

#top a{display:block;text-decoration:none;font:normal 19px open sans;text-transform:none;color:#e3e4e4;border-right:1px solid #f6672e;border-left:1px solid #852601;padding:4px 12px 6px}

 

Για αρχή σβήνω το  border-right:1px solid #f6672e; . με το left τι κάνουμε;

[macabre_sunsets]

Δοκιμασε το ακολουθο:

 

#top a{display:block;text-decoration:none;font:normal 19px open sans;text-transform:none;color:#e3e4e4;border-right:1px solid #f6672e;border-left:1px solid #852601;padding:4px 12px 6px}
#top a:first-child{display:block;text-decoration:none;font:normal 19px open sans;text-transform:none;color:#e3e4e4;border-right:1px solid #f6672e;border-left:none;padding:4px 12px 6px}
#top a:last-child{display:block;text-decoration:none;font:normal 19px open sans;text-transform:none;color:#e3e4e4;border-right:none;border-left:1px solid #852601;padding:4px 12px 6px}

 

[foutzos]

με το συγκεκριμένο (το οποίο βρίσκω απόλυτα λογικό ) απλά βγάζει το τελευταίο border. το αρχικό μένει :/

το βρήκα!

 

για όσους θέλουν να κάνουν το ίδιο.

 

χωρίς πείραγμα στο css πάς στο Navigation bar και :

 

<li><a href='/' style="border-left: 0">αρχική</a></li>

<li><a href='#'>δευτερο</a></li>

<li><a href='/' style="border-right: 0">τρίτο</a></li>

 

Ευχαριστώ πολύ πάντως!

[geomagas]

Έτσι για την ιστορία, το css αλλάζεις κι εσύ.

Απλά το κάνεις inline.

 

Just my 2c.

[macabre_sunsets]

Εφόσον τα "a" είναι μέσα σε "li", τότε μπορείς να κάνεις το ακόλουθο (για να μην πειράζεις τον HTML κώδικα):

 

#top li:first-child a { border-left: none; }
#top li:last-child a {border-right: none; }

Το παραπάνω το τοποθετείς μετά το "#top a { ... }".

 

Εάν θέλεις να πειράξεις τον HTML κώδικα οπωσδήποτε, θα σου πρότεινα να βάλεις μια "class" στα "a" που θέλεις να αλλάξεις και να μην χρησιμοποιείς inline styling. Για παράδειγμα:

 

<li><a href='/' class="no-left-border">αρχική</a></li>
<li><a href='#'>δευτερο</a></li>
<li><a href='/' class="no-right-border">τρίτο</a></li>

 

#top a.no-left-border { border-left: none; }
#top a.no-right-border { border-right: none; }

[foutzos]

ωραίος!