Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter

runboard.com       You are not logged in.

Page:  1  2 

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24792
Karma: 419 (+469/-50)
Reply | Quote
Re: PD Menu Navbar spacing


You're welcome. emoticon

It doesn't move as much as before, but you can use this as a placeholder for the non-hover state on things that get a border when they're hovered on:

border: 1px solid transparent;

If you ever want to use the svg gradient that's used in the navbar for one of your boards, feel free. svg doesn't work in every browser, but you can use it along with CSS gradients. If you generate the CSS with ]this site and also use the svg with that, it should cover most browsers.

The great thing about CSS gradients and svg gradients is they stretch to fit, regardless of height. The downside is you have to use extra code, because support for gradients and svg is probably about in the same place rounded corners were a few years ago.

The following probably won't show up in IE because they're in <img> tags, but it works in more browsers as a background. Even for those who can't see them, you might be able to see them if you click on them.

Note: These all use the same file.

in or sign up to see linked image content-- in or sign up to see linked image content--
in or sign up to see linked image content-- in or sign up to see linked image content--

---
Runboard Knowledge Base
Website Creation Tutorials
3/22/2013, 4:23 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 9706
Karma: 263 (+322/-59)
Reply | Quote
Re: PD Menu Navbar spacing


Oh that border transparent declaration is genius and worked like a charm. emoticon

---

Advertise Boards On TRDConceptsDE
3/23/2013, 4:25 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24792
Karma: 419 (+469/-50)
Reply | Quote
Re: PD Menu Navbar spacing


I'm glad! emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
3/23/2013, 4:47 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 9706
Karma: 263 (+322/-59)
Reply | Quote
Re: PD Menu Navbar spacing


Oddity, I used the site you suggested and then ]this site. For some reason the first site gives a different output/gradient image from the second site even though I used the same start/stop colors. The difference isn't big but it is noticeable...

---

Advertise Boards On TRDConceptsDE
1/11/2014, 3:15 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Global user (premium)
Head of Runboard staff

Registered: 11-2005
Posts: 24792
Karma: 419 (+469/-50)
Reply | Quote
Re: PD Menu Navbar spacing


Interesting. I tried both sites and the svg that's used in the navbar. The linear gradient and svg were fine, but the data URI failed when the width became smaller than the height, and got worse as it got narrower.

Try this:


CSS:

div {

   width: 20%; float: left; height: 150px;
}
#css3 {
   background-color: #ff0;
   background-image: -o-linear-gradient(bottom, #FF0000 0%, #0000FF 100%);
   background-image: -ms-linear-gradient(bottom, #FF0000 0%, #0000FF 100%);
   background-image: linear-gradient(to bottom, #FF0000 0%, #0000FF 100%);
}
#svg {
    background: #f00 url([sign in to see URL]
}
#data {
    background: #00f url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAwZmYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
    background-size: contain;
}


HTML:

<div id="css3">css3</div>

<div id="svg">svg</div>
<div id="data">data</div>


Re-size your browser slowly to make it narrower. The data URI fails when that div's width is less than its height, and gets worse as it gets narrower.

Also notice that I gave them all different background colors behind the gradients. In Firefox, a red line appears and disappears as I'm re-sizing, which is a flaw in the way Firefox displays the svg.

I'd say the linear-gradient wins, Except IE9- (and if I remember correctly, some older Android devices?) don't support it. See: ]W3Schools: CSS3 gradients.

---
Runboard Knowledge Base
Website Creation Tutorials
1/11/2014, 4:28 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


Add a reply

Page:  1  2 



You are not logged in (login)