Databases
StackOverflow2013
Postsdbo
POResponsive Navigation with images
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive Navigation with images
    primarykey
    data
    text
    <p>I am trying to make a responsive navigation with fixed position in bottom, every li have a different image in it like home, features, tasks and so on..! it is fine on PC and ipad but on mobile phone it does not decrease the size of images in li but brings them into two lines which I dont want. I want them to always stay in one line but on mobile decrease the images size in li so they fit. I also dont know why nav elements are not center aligned, they are alot at right.</p> <p>HTML</p> <pre><code>&lt;body class="body"&gt; &lt;div class="top_bg"&gt; &lt;div class="logo"&gt;&lt;a href="http://www.onbreath.com"&gt;&lt;img src="images/logo.png" alt="Breath" border="0"&gt;&lt;/a&gt;&lt;/div&gt; &lt;a href=""&gt; &lt;div class="options"&gt;Options&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; All page content comes here &lt;div class="bottom_bar"&gt; &lt;nav&gt;&lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/home_r.png" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/tasks.png" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/checks.png" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/messages.png" &gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/toplist.png" &gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/nav&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS</p> <pre><code>body { background-color: #b00000; margin: 0px; height: auto; } img, embed, object, video { max-width:100%; height:auto; } .body { background-image: url(../images/bg.jpg); width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; clear: both; min-height: 100%; padding-bottom: 180px; height: auto; } .bottom_bar { background-image: url(../images/bottombar_bg.png); background-repeat: repeat-x; bottom: 0px; z-index: 1; clear: both; background-color: #af0007; height: 88px; width: 100%; position: fixed; } .bottom_bar_buttons { margin-right: auto; margin-left: auto; margin-top: 15px; width: 70px; height: 60px; } .bottom_bar nav { text-align: center; margin-top: 0; margin-right: auto; margin-left: auto; height: 88px; } .bottom_bar nav ul { list-style: none; margin-right: auto; margin-bottom: 0; margin-left: auto; margin-top: 0px; } .bottom_bar nav ul li { display: inline; margin: auto; } .bottom_bar nav a:link, .bottom_bar nav a:visited { color: #fff; display: inline-block; text-decoration: none; margin-right: 3%; margin-left: 0%; margin-top: 15px; margin-bottom: 0px; } .bottom_bar nav a:hover, .bottom_bar nav a:active, .bottom_bar nav .active a:link, .bottom_bar nav .active a:visited { color: #fff; text-shadow: none !important; } .bottom_bar nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPhiLho
    1. USuser2493253
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COImages must to fill 100% of the li's width?
      singulars
      1. POResponsive Navigation with images
      1. USGuilherme Oderdenge
    2. COtry : nav li a img {width:100%;height:auto;}
      singulars
      1. POResponsive Navigation with images
      1. USaudre7
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload