¿Es esta estructura HTML y CSS lo suficiente en este menú de selección de país? -- html campo con css camp codereview Relacionados El problema

Is this HTML structure and CSS DRY enough in this country selection menu?


5
vote

problema

Español

He construido este diseño conceptual de un menú de localización en este codepen

concept 2

Me pregunto si debería haber estructurado MI GET0 S MEJOR o si se debe envolver en un 99887776655443311 , en su lugar, ya que 99887776655443312 podría ser reducido en el CSS con GET3 .

html

  GET4  

css

  GET5  
Original en ingles

I have built this conceptual design of a localization menu on this CodePen

Concept 2

I am wondering if I should have structured my <div>s better or if this should be wrapped in a <ul> instead since <div class="locale"> could be reduced in the CSS with .international li.

HTML

<div class="international">      <div class="locale">     <a href="#"> <!-- link pending -->       North America       <div class="americas"></div>     </a>   </div>    <div class="locale">     <a href="#"> <!-- link pending -->       Europe       <div class="europe"></div>     </a>   </div>    <div class="locale">     <a href="#"> <!-- link pending -->       Korea       <div class="korea"></div>     </a>   </div>    <div class="intlButton">     <a href="#"> <!-- link pending -->       <i class="fa fa-globe"></i>     </a>   </div>   <!-- Planned functionality for production is not shown in this project -->  </div> <!--/ .international --> 

CSS

.international {   background-color: rgb(36, 30, 30);   color: #fff;   letter-spacing: 1px;   padding: 12px 0;   width: 100%; }  .locale {   display: inline-block;   margin-left: 6px;   vertical-align: middle; } .locale a { color: #fff; text-decoration: none; }  .americas, .europe, .korea {   background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flags-small.png');   background-repeat: no-repeat;   margin-top: 3px; } .americas {   background-position: 0px 0px;    height: 11px;   width: 48px; }  .europe {   background-position: -48px 0px;    height: 11px;   width: 48px; } .korea {   background-position: -96px 0px;    height: 11px;   width: 16px; }  .intlButton {    float: right;   font-size: 24px;   margin-right: 6px; }  .intlButton a { color: #444; } .intlButton i {   background-color: rgba(225, 225, 225, .7);    border-radius: 3px;   padding: 4px;  } 
     

Lista de respuestas

3
 
vote
vote
La mejor respuesta
 

Esto debe ser un ul . Incluso sin CSS tendrás una estructura de navegación. ¿Qué tal si le da a su navegación un nombre mejor adecuado como .nav-localization ?

¡También supongo que el div dentro de sus enlaces actuará como como Sub Navegations? Estos serían ul también.

He agregado comentarios para deshacerse del espacio en blanco entre los artículos de lista, ya que está usando display: inline-block; . Esto se ve bastante sucio , pero es la mejor solución para el problema del espacio en blanco y el bloqueo en línea.

Aquí está el marcado, me gustaría:

  <ul class="nav-localization">     <li class="locale">         <a href="#">             North America         </a>         <ul class="sub-nav americas"></ul>     </li><!--  --><li class="locale">         <a href="#">             Europe         </a>         <ul class="sub-nav europe"></ul>     </li><!--  --><li class="locale">         <a href="#">             Korea         </a>         <ul class="sub-nav korea"></ul>     </li><!--  --><li class="intlButton">         <a href="#">             <i class="fa fa-globe"></i>         </a>     </li> </ul>   

cómo seleccionaría:

  .nav-localization {}  .nav-localization > li {}  .nav-localization > li > a {}  .nav-localization .sub-nav {}   
 

This should be an ul. Even without CSS you will have a navigational structure. How about giving your nav a better suited name like .nav-localization?

Also I guess the div's inside your links will act like as sub navigations? These would be ul's as well then.

I've added comments to get rid of the whitespace between the list-items, since you're using display: inline-block;. This looks quite dirty, but it's the best solution for the whitespace issue and inline-block.

Here is the markup, I'd go for:

<ul class="nav-localization">     <li class="locale">         <a href="#">             North America         </a>         <ul class="sub-nav americas"></ul>     </li><!--  --><li class="locale">         <a href="#">             Europe         </a>         <ul class="sub-nav europe"></ul>     </li><!--  --><li class="locale">         <a href="#">             Korea         </a>         <ul class="sub-nav korea"></ul>     </li><!--  --><li class="intlButton">         <a href="#">             <i class="fa fa-globe"></i>         </a>     </li> </ul> 

How you would select:

.nav-localization {}  .nav-localization > li {}  .nav-localization > li > a {}  .nav-localization .sub-nav {} 
 
 

Relacionados problema

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...

8  Div en la lista desordenada - buena práctica?  ( Div in unordered list good practice ) 
Quiero hacer un formulario que se parece a esto: public interface IAds { void ShowVideoAd(); void PreLoadVideoAd(); bool IsAdAvailable(); } 3...

5  CSS & JS PIECHART  ( Css js piechart ) 
Hice un public class Question { public static void main(String[] args) { //A hypothetical list of tasks to run asynchronously List<Call...

2  Abriendo una navegación  ( Opening a navigation ) 
El objetivo de esta función es abrir un menú con una clase CSS (la animación se realiza a través de la transición CSS), llame a una superposición en la parte ...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

4  Desplazamiento horizontal receptivo en la posición del mouse  ( Responsive horizontal scroll on mouse position ) 
Estoy haciendo un Responsive Scroll Horizontal Ui . La posición de desplazamiento horizontal se calcula de acuerdo con la posición horizontal del mouse: ...

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...

6  ¿Cómo optimizar mi página web CSS / HTML?  ( How to optimize my css html webpage ) 
Estoy trabajando en un sitio web (HTML / CSS) para mejorar mis habilidades, pero no estoy seguro de si lo estoy haciendo de la manera correcta, porque tengo m...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos