Comportamenti css inaspettati

Ho riscontrato un paio di problemi con il mio layout che non posso spiegare.Comportamenti css inaspettati

layout HTML

<!DOCTYPE html> 

<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>AuctionProject</title> 

    <script async type="application/dart" src="auctionproject.dart"></script> 
    <script async src="packages/browser/dart.js"></script> 

    <link rel="stylesheet" href="auctionproject.css"> 
    </head> 
    <body>  
    <div id="menu_bar"> 
     <div id="logo"></div> 
     <div class="menu_tab" id="123">Tab123</div> 
     <div class="menu_tab" id="upcomming">Tab456</div> 
    </div> 
    <div id="content_box"> 
     <div id="side_menu"> 
     <div id="open_menu_shadow"></div> 
     <div id="menu_content" class="hidden"> 
      <div id="account" class="side_label hidden"> 
      <p class="tiny">You are currently logged in as:</p> 
      <p id="current_user">Some User</p> 
      <p class="tiny">This is not you? 
       <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span> 
      </p> 
      </div> 
      <div id="login_box" class="side_label"> 
      <input type="text" name="login" placeholder="Login"> 
      <input type="text" name="password" placeholder="Password"> 
      <button type="button">Sign In</button> 
      <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span></p> 
      </div> 
      <hr> 
      <div class="side_label">Add Category</div> 
      <div class="side_label">Super category 1</div> 
      <hr> 
      <div class="side_label">Popular #tags: 
      <ol id="trendingTags"> 
       <li><div class="label">#Tag123</div></li> 
       <li><div class="label">#Tag456</div></li> 
      </ol> 
      </div> 
     </div> 
     <div id="open_menu"><p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p></div> 
     </div> 
     <div id="smart_box"> 

     </div> 
     <div id="auction_list"> 
     <div class="auction"> 
      <img src=""></img> 
      <div class="title">This is a sample title</div> 
      <div class="teaser">This is a sample teaser </div> 
     </div> 
     <div class="auction"> 
      <img src=""></img> 
      <div class="title">This is a sample auction title</div> 
      <div class="teaser">This is sample teaser </div> 
     </div>   
     </div> 
    </div> 
    </body> 
</html>

layout CSS

body { 
    background-color: #FFF; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1.2em; 
    margin: 0px; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

h1, p { 
    color: #333; 
} 

#menu_bar { 
    width: 100%; 
    height: 60px; 
    padding-bottom: 2px; 
    border-bottom: 1px solid #aaa; 
    background-color: #F8F8F8; 
} 

#logo { 
    height: 60px; 
    width: 200px; 
    margin-right: 40px; 
    background-color: blue; 
    display: inline-block; 
} 

.menu_tab { 
    margin-left: 25px; 
    padding: 4px 4px 0px 4px; 
    border-left: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
    font-size: 1.2em; 
    display: inline-block; 
    bottom: 0; 
    background-color: #ccc; 
} 

#menu_tab_selected { 
    margin-left: 20px; 
    padding: 4px 4px 0px 4px; 
    border-left: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
    font-size: 1.2em; 
    display: inline-block; 
    bottom: 0; 
    background-color: #fff; 
} 

#content_box { 
    boarder: 2px solid red; 
    width: 100%; 
    height: 100%; 
} 

#side_menu{ 
    boarder: 1px solid #aaa; 
    height: 100%; 
    position: absolute; 
    display: inline-block; 
    background-color: #F8F8FF; 
    float: left; 
} 

#open_menu { 
    border: 1px solid #aaa; 
    border-top: 0px solid #aaa; 
    display:inline-block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 15px; 
    height: 100%; 
    background-color: #eee; 
    z-index: 3; 
} 

#open_menu_shadow { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 15px; 
    height: 100%; 
    box-shadow: -7px 0px 5px #aaa; 
    position: absolute; 
    z-index: 1; 
} 

#open_menu p { 
    text-align: center; 
    vertical-align: bottom; 
} 

#menu_content { 
    width: 200px; 
    height: 100%; 
    display: inline-block; 
    float: right; 
} 

#menu_content hr { 
    border: 0; 
    border-bottom: 1px dashed #ccc; 
    background: #999; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 

.hidden { 
    display: none; 
} 

.tiny { 
    font-size: 0.7em; 
} 

.important { 
    color: red; 
} 

#login_box input { 
    width: 120px; 
    margin-bottom: 10px; 
} 

#current_user { 
    margin: 4px; 
} 

.side_label { 
    border: 1px solid #aaa; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius:4px; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    margin-left: 10px; 
    padding: 10px; 
    padding-right: 35px; 
    box-shadow: -7px 7px 5px #aaa; 
    position: relative; 
    background-color: #fff; 
    z-index: 2; 
} 

.label { 
    margin: 2px; 
    padding-left: 5px; 
    padding-right: 5px; 
    border-radius: 5px; 
    font-size: 0.8em; 
    font-weight: bold; 
    display: inline-block; 
    background-color: #ccc; 
} 

#auction_list { 
    margin-left: 200px; 
    padding: 20px; 
    position: absolute; 
    display: inline-block; 
    overflow: auto; 
    width: calc(100% - 250px); 
} 

.auction { 
    padding: 10px; 
    margin-bottom: 10px; 
    boarder: 1px solid #aaa; 
    border-bottom: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
} 

.auction img { 
    width: 60px; 
    width: 60px; 
} 

.auction .title { 
    font-size: 1.2em; 
    text-decoration: underline; 
} 

#smart_box { 
    margin: 10px; 
    width: 300px; 
    height: 200px; 
    float: right; 
    border: 1px solid #aaa; 
}

Il mio primo problema ha a che fare con la proprietà display:none Il menu si può vedere sulla sinistra (id = "side_menu") ha un div inside con id = "menu_content" e la barra a destra (id = "open_menu"). Per attivare il menu ho creato la classe .hidden contenente la proprietà display:none. Mi aspettavo che quando aggiungo questa classe al div "menu_content" scomparirà. Sfortunatamente non succede nulla layout menu

Penso che il mio altro problema abbia a che fare con la proprietà inline-block. Vorrei che la lista dei contenuti principale id = "auction_list" per riempire lo spazio come mostrato di seguito. layout content Il che significa che dovrebbe essere relativo al menu, quindi non devo cambiare il margine sinistro quando si cambia il menu. Inoltre non so come mantenere i post (class = "auction") dallo spostamento sotto div sulla destra (id = "smart_box")

Sarei molto grato per qualsiasi aiuto.

Disclaimer: Si prega di non assumere molte conoscenze pregresse. Sono un novizio html.

fonte

2015-05-03 Lukasz

1) in #side_menu, è scritto confine invece di confine.

#side_menu { 
    boarder: 1px solid #aaa; 
    height: 100%; 
    position: absolute; 
    display: inline-block; 
    background-color: #F8F8FF; 
    float: left; 
}

2) C'è un concetto con CSS che dà più o meno "peso" alle regole CSS. quando si scrive:

#menu_content { 
    display: inline-block; 
} 

.hidden { 
    display: none; 
}

Forse si pensa che il class="hidden" sovrascriverà id="menu_content". Questo è ciò che dovrebbe normalmente accadere perché .hidden è scritto nel file CSS dopo il #menu_conten. Ma non lo fa perché le regole CSS con #id hanno più peso di .class.

Se si vuole far funzionare le cose, si hanno due opzioni:

scrittura display: none !important nella classe .hidden. Lo !important dà la massima priorità alle regole ma non è una buona pratica.
è sufficiente scrivere:

#menu_content.hidden { display: none; }

Questa ultima opzione sarà il peso guadagno perché è più specifica: si dice di applicare la visualizzazione regola CSS a 1) un elemento class="hidden" 2) e quell'elemento contiene un attributo id="menu_content". Più specificità significa più peso.

#id è più specifico di .class, che è più specifico di <element>.

Per saperne di più su di peso CSS, vedere MDN o CSS-Tricks

3) Per il vostro ultimo problema, ecco un piccolo suggerimento, forse non perfetto, ma facile da capire.

Iniziare modificando HTML: inserire la smart box all'interno dell'elenco di aste, all'inizio.

<div id="auction_list"> 
    <div id="smart_box"></div> 
    <div class="auction">(blabla)</div> 
    <div class="auction">(blabla)</div> 
</div>

Non è il modo corretto (semanticamente, intendo) per risolvere il problema, ma ora, andiamo Edit CSS ... Per #auction_list, rimuovere la posizione, la visualizzazione e la larghezza.

#auction_list { 
    margin-left: 200px; 
    padding: 20px; 
    overflow: auto; 
}

Per .auction, basta aggiungere inline-block.

.auction { 
    padding: 10px; 
    margin-bottom: 10px; 
    border-bottom: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    display: inline-block; 
}

Ma si noti che la larghezza degli elementi .auction sarà molto a seconda del loro contenuto (che è come inline-block funziona se non si specifica alcun width). Significa che potresti incontrare 2 aste per "linea" nel rendering del browser. Credo che l'improvvisazione di questa struttura dipenda da cosa farai + scelte progettuali.

L'idea alla base di questa proposta è: non toccare al posizionamento #auction_list, lavorare meglio sugli elementi al suo interno.

Spero che abbia aiutato. :)

fonte

2015-05-03 13:56:46

@mdeduz Grazie per la tua ampia risposta. Ho solo una domanda in più. Sai se esiste un modo per impostare il margine di 'id = auction_list' relativo a' id = side_menu' e non a 'id = content_box'? Avrei bisogno di avvolgere il menu laterale con un altro div? Ciò sarebbe utile perché non dovrei cambiare il margine a livello di codice, quando comprimo il menu laterale. – Lukasz

Ciao @Lukasz. Penso di capire cosa intendi. Prova a mettere un 'margin-right: 10px' (10px è per l'esempio) sul' # side_menu', e imposta 'margin-left: 0;' (o rimuovi la proprietà * margin-left * su '# auction_list'. –

Ciao @Lukasz! Posso chiederti di contrassegnare la domanda come risolta e convalidare la risposta che pensi sia quella giusta ^^ –

Il tuo problema è risolto display: none; da display: none !important;

fonte

2015-05-03 13:30:42 SebHallin

@copeg, perché stai dicendo che questa non è una risposta? Per quanto posso vedere, ci sono due domande dell'OP, la prima riguarda esattamente questo aspetto ("Il mio primo problema riguarda il display: nessuna proprietà"). –

Grazie a @Sebastian. Questo insieme alle risposte di cui sopra è stato anche molto utile. Solo un'aggiunta da parte mia Se qualcuno prova questo, non dimenticare di impostare un 'min-width' per l'equivalente del mio' id = "side_menu" '. Altrimenti si romperà anche e la barra da aprire non sarà visibile. – Lukasz

per nascondere/mostrare la barra di navigazione avrete bisogno di un po 'di Javascript o jQuery. Ecco un esempio che non richiedono un sacco di modifiche al codice, in particolare il codice HTML ..

- Includere jQuery al progetto, nel mio esempio ho usato 2.1.3.

- Questa è la parte jQuery per nascondere/mostrare la barra laterale.

$(document).ready(function() { 
    $("#open_menu").click(function() { 
     $("#side_menu").toggleClass('open'); 
     //toggles full class on auction_list element (see snippet for live example) 
     $("#auction_list").toggleClass('full'); 
    }); 
});

2a - Ogni volta che si fa clic sul vostro elemento #open_menu, il codice di cui sopra viene eseguito e alterna una classe denominata open sul #side_menu.

- per rendere l'intera opera cosa, abbiamo anche bisogno di fare alcuni cambiamenti nel vostro CSS

#side_menu { 
    boarder: 1px solid #aaa; 
    height: 100%; 
    position: absolute; 
    display: inline-block; 
    background-color: #F8F8FF; 
    float: left; 
    /* the lines below were added */ 
    width: 14px; 
    transition: width 0.8s ease-in; 
    -webkit-transition: width 0.8s ease-in; 
    -moz-transition: width 0.8s ease-in; 
} 
/* this is new */ 
#side_menu.open { 
    width: 200px; 
}

3a - abbiamo impostato la larghezza di tutta la #side_menu elemento di 14px, in modo che solo l'elemento #open_menu è visibile. Alcuni in più: aggiungere un po 'di fantasia transizioni (per l'attributo width)

3b - Una nuova regola CSS per lo stato open, basta impostare la larghezza del vostro elemento #side_menu a 200px.

SNIPPET

$(document).ready(function() { 
 
    $("#open_menu").click(function() { 
 
    $("#side_menu").toggleClass('open'); 
 
    $("#auction_list").toggleClass('full'); 
 
    }); 
 
});

body { 
 
    background-color: #FFF; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.2em; 
 
    margin: 0px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h1, 
 
p { 
 
    color: #333; 
 
} 
 
#menu_bar { 
 
    width: 100%; 
 
    height: 60px; 
 
    padding-bottom: 2px; 
 
    border-bottom: 1px solid #aaa; 
 
    background-color: #F8F8F8; 
 
} 
 
#logo { 
 
    height: 60px; 
 
    width: 200px; 
 
    margin-right: 40px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
} 
 
.menu_tab { 
 
    margin-left: 25px; 
 
    padding: 4px 4px 0px 4px; 
 
    border-left: 1px solid #aaa; 
 
    border-top: 1px solid #aaa; 
 
    border-right: 1px solid #aaa; 
 
    font-size: 1.2em; 
 
    display: inline-block; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
} 
 
#menu_tab_selected { 
 
    margin-left: 20px; 
 
    padding: 4px 4px 0px 4px; 
 
    border-left: 1px solid #aaa; 
 
    border-top: 1px solid #aaa; 
 
    border-right: 1px solid #aaa; 
 
    font-size: 1.2em; 
 
    display: inline-block; 
 
    bottom: 0; 
 
    background-color: #fff; 
 
} 
 
#content_box { 
 
    boarder: 2px solid red; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#side_menu { 
 
    boarder: 1px solid #aaa; 
 
    height: 100%; 
 
    position: absolute; 
 
    display: inline-block; 
 
    background-color: #F8F8FF; 
 
    float: left; 
 
    width: 14px; 
 
    transition: width 0.8s ease-in; 
 
    -webkit-transition: width 0.8s ease-in; 
 
    -moz-transition: width 0.8s ease-in; 
 
} 
 
#side_menu.open { 
 
    width: 200px; 
 
} 
 
#open_menu { 
 
    border: 1px solid #aaa; 
 
    border-top: 0px solid #aaa; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 15px; 
 
    height: 100%; 
 
    background-color: #eee; 
 
    z-index: 3; 
 
} 
 
#open_menu_shadow { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 15px; 
 
    height: 100%; 
 
    box-shadow: -7px 0px 5px #aaa; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
#open_menu p { 
 
    text-align: center; 
 
    vertical-align: bottom; 
 
} 
 
#menu_content { 
 
    width: 200px; 
 
    height: 100%; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
#menu_content hr { 
 
    border: 0; 
 
    border-bottom: 1px dashed #ccc; 
 
    background: #999; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.tiny { 
 
    font-size: 0.7em; 
 
} 
 
.important { 
 
    color: red; 
 
} 
 
#login_box input { 
 
    width: 120px; 
 
    margin-bottom: 10px; 
 
} 
 
#current_user { 
 
    margin: 4px; 
 
} 
 
.side_label { 
 
    border: 1px solid #aaa; 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    padding-right: 35px; 
 
    box-shadow: -7px 7px 5px #aaa; 
 
    position: relative; 
 
    background-color: #fff; 
 
    z-index: 2; 
 
} 
 
.label { 
 
    margin: 2px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    border-radius: 5px; 
 
    font-size: 0.8em; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    background-color: #ccc; 
 
} 
 
#auction_list { 
 
    margin-left: 0; 
 
    padding: 20px; 
 
    position: absolute; 
 
    display: inline-block; 
 
    overflow: auto; 
 
    width: calc(100% - 250px); 
 
    transition: margin 0.8s ease-in; 
 
} 
 
#auction_list.full { 
 
    margin-left: 200px; 
 
} 
 
.auction { 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    boarder: 1px solid #aaa; 
 
    border-bottom: 1px solid #aaa; 
 
    border-top: 1px solid #aaa; 
 
} 
 
.auction img { 
 
    width: 60px; 
 
    width: 60px; 
 
} 
 
.auction .title { 
 
    font-size: 1.2em; 
 
    text-decoration: underline; 
 
} 
 
#smart_box { 
 
    margin: 10px; 
 
    width: 300px; 
 
    height: 200px; 
 
    float: right; 
 
    border: 1px solid #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu_bar"> 
 
    <div id="logo"></div> 
 
    <div class="menu_tab" id="123">Tab123</div> 
 
    <div class="menu_tab" id="upcomming">Tab456</div> 
 
</div> 
 
<div id="content_box"> 
 
    <div id="side_menu"> 
 
    <div id="open_menu_shadow"></div> 
 
    <div id="menu_content" class="hidden"> 
 
     <div id="account" class="side_label hidden"> 
 
     <p class="tiny">You are currently logged in as:</p> 
 
     <p id="current_user">Some User</p> 
 
     <p class="tiny">This is not you? <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span> 
 

 
     </p> 
 
     </div> 
 
     <div id="login_box" class="side_label"> 
 
     <input type="text" name="login" placeholder="Login"> 
 
     <input type="text" name="password" placeholder="Password"> 
 
     <button type="button">Sign In</button> 
 
     <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span> 
 
     </p> 
 
     </div> 
 
     <hr> 
 
     <div class="side_label">Add Category</div> 
 
     <div class="side_label">Super category 1</div> 
 
     <hr> 
 
     <div class="side_label">Popular #tags: 
 
     <ol id="trendingTags"> 
 
      <li> 
 
      <div class="label">#Tag123</div> 
 
      </li> 
 
      <li> 
 
      <div class="label">#Tag456</div> 
 
      </li> 
 
     </ol> 
 
     </div> 
 
    </div> 
 
    <div id="open_menu"> 
 
     <p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p> 
 
    </div> 
 
    </div> 
 
    <div id="smart_box"></div> 
 
    <div id="auction_list"> 
 
    <div class="auction"> 
 
     <img src=""></img> 
 
     <div class="title">This is a sample title</div> 
 
     <div class="teaser">This is a sample teaser</div> 
 
    </div> 
 
    <div class="auction"> 
 
     <img src=""></img> 
 
     <div class="title">This is a sample auction title</div> 
 
     <div class="teaser">This is sample teaser</div> 
 
    </div> 
 
    </div> 
 
</div>

fonte

2015-05-03 13:32:26

Comportamenti css inaspettati

risposta

Problemi correlati