- This topic is empty.
-
AuthorPosts
-
October 18, 2012 at 1:34 am #40363
bishtdbest
Memberhorizontal menu line break When Zoom in/out (CTRL+scroll) .. is there any perfect solution for this.. condition
plz give urs advice and solution.
stye:
body {
font: normal 1.1em/1.2 Arial, Helvetica, sans-serif
}
.page {
width: 720px;
margin: 0 auto;
}
.nav {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
background: #CCC;
}
.nav li {
float: left;
padding: 2px 10px;
background: #999;
color: white;
margin: 0 7px;
}
HTML :
<div class="page">
<ul class="nav">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
</ul>
</div>
October 18, 2012 at 12:12 pm #112204GMB
Participant???
Could you put your code up on CodePen so we can take a look?October 18, 2012 at 12:20 pm #112198Paulie_D
MemberI believe that that this is a webkit specific bug affecting pixel based media queries.
If you use ems instead of px in your queries…it seems to work.
October 19, 2012 at 1:47 am #112261ramkumarramaraj
MemberHi,
URL?
October 19, 2012 at 6:42 am #112246bishtdbest
Memberstye:
body {
font: normal 1.1em/1.2 Arial, Helvetica, sans-serif
}
.page {
width: 720px;
margin: 0 auto;
}
.nav {
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
background: #CCC;
}
.nav li {
float: left;
padding: 2px 10px;
background: #999;
color: white;
margin: 0 7px;
}
HTML :
<div class="page">
<ul class="nav">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
</ul>
</div>
October 19, 2012 at 7:02 am #112271Paulie_D
MemberVery simply, don’t use pixel values in your widths/padding/margins…use %.
October 29, 2012 at 6:41 am #112865bishtdbest
Memberdon’t use width in li …. text will change
October 29, 2012 at 8:01 am #112869Paulie_D
MemberI have no idea what that means…why would the text change?
October 29, 2012 at 1:26 pm #112873Senff
ParticipantTo my knowledge, there is no fool-proof solution for making sure something will look perfect when zoomed in or zoomed out. It will always distort somewhat, and sometimes that results in very funky layouts in some browsers.
This is the most obvious when you use pixels (zooming in/out will result in half-pixels and then the browser has to fix that by rounding up or down), but I’ve seen situations where other things are off when zooming.
November 6, 2012 at 2:26 am #113469bishtdbest
Memberi think we can use @ media query in css for all resolution..
yes this is prefect solution for this condition :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.