First and for most I would like to say "Hello" to the community. I'm an entry level junior web designer fresh out of vocational school. Most of my styling in CSS I've taught myself so this has led me to some problems. Such as the one below.
This is a sample of my navigation bar that I'm using for my site. Each of the div boxes are supposed to slide out to their corresponding positions over 2 seconds. However with every browser aside from chrome they snap out quickly instead of a smooth transition.
http://jsfiddle.net/kwh71787/cxBxL/
If anyone has any insight please help
Try using this style instead:
#navbuttons div {
position: absolute;
left: 0px;
}
DEMO
Welcome to Stack Overflow!
This seems to fix it. What I've done is I've added top: 0px; and left: 0px; to each div.
Here's an updated jsfiddle
Hope that helps!
Related
Can anyone tell me how I fix the opentok call window in place on mobile (Tablet & Phone)? At the minute, users can 'drag' it across the screen. When in focus I would like it to be fixed in place.
I don't know if this is a opentok element fix, object fix or CSS fix.
Any helpfull suggestions would be greatly appreciated.
Thanks.
Have you tried using position: absolute?
HTML
<body>
<div id="publisher"></div>
</body>
CSS
#publisher {
position: absolute;
bottom: 0;
right: 0;
width: 320px;
height: 240px
}
That would fix the publisher div on the bottom right of the window.
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
I have this: http://jsfiddle.net/cN2pS/embedded/result/
And I'm looking for the best way to adapt the divs inside the circles (text and number) in order to these divs (text and number) don't overflow of the circles......I don't know if I'm explaining well, but in different resolutions, sometimes, text overflow of circles.....
When you visit the link above of jsfiddle, try to resize the window and you'll can see the left-bottom circle, that contains Zona de Información, its text overflow...
Regards, Daniel
EDIT: It looks like works better by adding overflow:hidden; and reducing the font-size to 14px. Live example: http://jsfiddle.net/cN2pS/8/embedded/result/
EDIT2: Only one question more: do you know any tutorial, live examples, etc, with efficient use of media queries in order to adapt to resolutions of mobile devices? in order to adapt these circulars divs...Or I have to resize my desktop browser window much times...Any magic tool for this? :) Thanks
Thanks very much for help.
May be you can use CSS word-wrap: break-word; property for this:
#divInfIzq {
bottom: 15%;
left: 15%;
position: absolute;
word-wrap: break-word;
}
Check this http://jsfiddle.net/cN2pS/5/embedded/result/
Are you asking for something like this?
http://www.we-are-gurus.com/tools/responsive-design-tester.php?url=http%3A%2F%2Fsmore.rvadv.com&d=320x480&scroll=off
I use this when I am designing for mobile devices and it works pretty well.
Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.
At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.
This works great in every browser I've tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it.
Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can't scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.
The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?
Any help with this annoyance is greatly appreciated, Many Thanks.
Update: Added Code
Basically the code is this as theres too much show it all. I would point you to the site but the client doesn't want it live yet. Here we go:
<nav id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</nav>
Then the css is this for a fullwidth browser bar as the link above:
html,body{
overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}
#menu{
position: relative;
background: blue;
}
#menu:before, #menu:after{
content:'';
position: absolute;
background: inherit;
top: 0;
bottom: 0;
width: 9999px; /*huge width to ensure bar fills browser*/
}
#menu:before{
right: 100%;
}
#menu:after{
left: 100%;
}
Just had a similar issue come up; my solution was to simply add:
html, body {height:100%;}
And that solved it. Just wanted to post it here 'cause this kept popping up in the search results.
OK, I sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren't working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a '.' inserted as the content. I removed this and then added
* html .clearfix { height: 1%; }
onto the end of the clearfix css block and it worked. No more horizontal scrolling, no more x2 vertical scrollbars in Firefox.
What fixed it for me was moving over the scrollbar code to html only instead of "body, html". I figured maybe it's making two scrollbars because its put in both html and body. Though this introduced some other problems. Think I'll go with an additional div instead.
html {
overflow-y: scroll;
scrollbar-color: #2A9FD6 rgba(0,0,0,1);
scrollbar-width: thin;
}
body, html {
}
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.