[css-d] text near bottom of div?
Hi,
I have a background image for my header (banner), and would like to
put some text in the bottom right corner of the image. I can't figure
out how to align the text near the bottom of the picture (or header
div).
See below for the html and css I am using now.
My website
Isn't it awesome?
#header
{
background:url('my_banner.jpg') no-repeat;
}
# header h1 h2
{
text-align: right;
}
Thanks,
- Koen.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] HTMLdog website / Son of Suckerfish
Hi, I was trying to look at a tutorial about drop down menu's from http://www.htmldog.com (called Son of Suckerfish), but all I get are 403 errors (Forbidden, You don't have permission to access / on this server). Is this website still active, and if not, is there another place where I can find the Son of Suckerfish info? - Koen. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] HTMLdog website / Son of Suckerfish
It's working here now too. Must have been a glitch. - Koen. On Mon, Jun 27, 2011 at 11:39 AM, Nick Fitzsimons wrote: > On 27 June 2011 15:20, Koen van der Drift wrote: >> I was trying to look at a tutorial about drop down menu's from >> http://www.htmldog.com (called Son of Suckerfish), but all I get are >> 403 errors (Forbidden, You don't have permission to access / on this >> server). >> > > It's working for me at <http://www.htmldog.com/articles/suckerfish/>. > -- > Nick Fitzsimons > http://www.nickfitz.co.uk/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] nav bar: how to move one item all the way to the right?
Hi,
I have a working nab bar and want to move the right most item all the way to
the right. I tried the following:
…. [insert links here]
allright
nav ul
{
margin: 0; /* reset */
padding: 0; /* reset */
list-style-type: none; /* no bullets */
overflow: hidden;
}
nav li
{
display: inline;
float: left;
}
nav a.rightitem
{
float: right;
}
But that doesn't do what I am looking for.
Any suggestions?
Thanks,
- Koen.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav bar: how to move one item all the way to the right?
Thanks for the suggestions. I ended up solving it by taking the link out of the
unordered list in the nav bar and position it manually at the right side.
- Koen.
On Jul 23, 2011, at 9:17 AM, Chetan Crasta wrote:
> Try
>
> nav { position:relative; padding-right: 30px;}
> nav a.rightitem { postition: absolute; right: 0; }
>
> Make sure the padding-right on nav is sufficient.
>
> Regards,
> Chetan Crasta
>
> On Sat, Jul 23, 2011 at 6:29 PM, Koen van der Drift
> wrote:
> Hi,
>
> I have a working nab bar and want to move the right most item all the way to
> the right. I tried the following:
>
>
>
>…. [insert links here]
> class="rightitem">allright
>
>
>
> nav ul
> {
>margin: 0; /* reset */
>padding: 0; /* reset */
>list-style-type: none; /* no bullets */
>overflow: hidden;
> }
>
> nav li
> {
>display: inline;
>float: left;
> }
>
>
> nav a.rightitem
> {
>float: right;
> }
>
>
>
> But that doesn't do what I am looking for.
>
> Any suggestions?
>
> Thanks,
>
> - Koen.
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How to prevent the content to be wider than the header?
I'm building a website using responsive design and HTML5 and would
like the content not to exceed the width of the banner in the header.
The banner was provided by the client, and I am using the following
code to implement it:
background: url("../images/banner.png") left no-repeat;
Now if the window becomes large, the text in the content becomes wider
than the banner on the right side.
If I use:
background: url("../images/banner.png") center no-repeat;
the banner gets cut on the left side if the window is small, and an
important section of it gets cut off, which I don't want to happen. I
already tried max-width for the content, but that doesn't work either.
How do I make sure that the content becomes not wider than the width
of the banner, preventing the banner gets cut on the left side?
- Koen.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to prevent the content to be wider than the header?
After thinking a bit more about this, what I probably need to use is a
media query, that aligns the banner either to the left or in the
center based on the screen size.
- Koen
On Sun, Oct 7, 2012 at 10:56 PM, Jay Tanna wrote:
>
>
>
>> I'm building a website using
>> responsive design and HTML5 and would
>> like the content not to exceed the width of the banner in
>> the header.
>>
>> The banner was provided by the client, and I am using the
>> following
>> code to implement it:
>>
>> background: url("../images/banner.png")
>> left no-repeat;
>>
>> Now if the window becomes large, the text in the content
>> becomes wider
>> than the banner on the right side.
>>
>> If I use:
>>
>> background: url("../images/banner.png")
>> center no-repeat;
>>
>> the banner gets cut on the left side if the window is small,
>> and an
>> important section of it gets cut off, which I don't want to
>> happen. I
>> already tried max-width for the content, but that doesn't
>> work either.
>>
>> How do I make sure that the content becomes not wider than
>> the width
>> of the banner, preventing the banner gets cut on the left
>> side?
>>
>
> Without knowing your HTML structure, I can only give you the outline of how
> it could be done:
>
>
> Banner/Header
>
> Left
> Content
> Right
>
> Footer
>
>
> Now you can set the width of the container and everything falls into line
> with it. Set the width to match the width of the banner taking account of
> any paddings, borders and margins of other elements.
>
> Hope this gives you the idea.
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] no ul list style with reset.css
On Sun, Nov 4, 2012 at 9:42 AM, Beth Lee wrote: > By using the selector ".test ul", you are mistakenly targeting the ul > child of some element styled with class "test". But you want to target > the ul element that itself bears the class "test", so the proper > selector is "ul.test". Thanks, that did the trick! - Koen __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] bullets not behaving
By looking at the screenshot, one can assume they should all be lined up with each other. They are within each section, but there is an offset between some of the sections. - Koen. On Dec 14, 2012, at 9:13, Philip TAYLOR wrote: > > > Barney Carroll wrote: > >> What do you want them to line up with? > > Each other ? > https://picasaweb.google.com/Chaa006/ScreenCaptures03?authkey=Gv1sRgCK7Qpuuw3ZOHaw#5821804248092362898 > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Thanks for the pointers. I should have mentioned it is not for a WP page :-) - Koen. On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: > Here is a tutorial > > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ > > and a plug in for WP > http://wordpress.org/extend/plugins/responsive-select-menu/ > > > Hakan KIRKAN > IT Manager > http://miamirealestateinc.com > Miami/ FL > > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift > wrote: >> I am looking to transfer a navigation list into a menu that many >> Wordpress pages have on a small screen. Not sure where to start, >> though, any suggestions? >> >> Thanks, >> >> - Koen. >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
No, what I mean does not have that type of menu. The 'hongkiat' tutorial that Hakan posted is more what I had in mind. - Koen. On Jan 24, 2013, at 12:04, Tom Livingston wrote: > This? > > http://tinynav.viljamis.com/ > > > On Thu, Jan 24, 2013 at 11:37 AM, Koen van der Drift > wrote: >> Thanks for the pointers. I should have mentioned it is not for a WP page :-) >> >> - Koen. >> >> On Jan 24, 2013, at 11:35, Hakan Kirkan wrote: >> >> > Here is a tutorial >> > >> > http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/ >> > >> > and a plug in for WP >> > http://wordpress.org/extend/plugins/responsive-select-menu/ >> > >> > >> > Hakan KIRKAN >> > IT Manager >> > http://miamirealestateinc.com >> > Miami/ FL >> > >> > On Thu, Jan 24, 2013 at 11:22 AM, Koen van der Drift >> > wrote: >> >> I am looking to transfer a navigation list into a menu that many >> >> Wordpress pages have on a small screen. Not sure where to start, >> >> though, any suggestions? >> >> >> >> Thanks, >> >> >> >> - Koen. >> >> __ >> >> css-discuss [css-d@lists.css-discuss.org] >> >> http://www.css-discuss.org/mailman/listinfo/css-d >> >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> >> List policies -- http://css-discuss.org/policies.html >> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Interactive Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
On Jan 24, 2013, at 7:51 PM, Philippe Wittenbergh wrote: > Everybody seems to suggest those menu solutions. I personally find > those horrible to use > Have you looked into other design patterns ? For example some of those listed > under the 'navigation' heading: > http://bradfrost.github.com/this-is-responsive/patterns.html > > Many of those use a so-called 'off-canvas' approach - you don't really need > to put that navigation off-canvas when hidden, you could use absolute > positioning to open the navigation list over the content when 'open'. Thanks for the link, some nice ideas there. - Koen. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive navigation menu as in Wordpress
Actually, I am *not* looking for a menu solution, I don't like those either. I now understand what you meant by those. The examples in the link are nice, but unfortunately there is no code with it. So back to my original question, how do I make a navigation menu appear using css? I'm not sure what you mean by "off canvas" approach? - Koen. On Jan 24, 2013, at 19:51, Philippe Wittenbergh wrote: > > Le 25 janv. 2013 à 01:22, Koen van der Drift a > écrit : > >> I am looking to transfer a navigation list into a menu that many >> Wordpress pages have on a small screen. Not sure where to start, >> though, any suggestions? > > Everybody seems to suggest those menu solutions. I personally find > those horrible to use > Have you looked into other design patterns ? For example some of those listed > under the 'navigation' heading: > http://bradfrost.github.com/this-is-responsive/patterns.html > > Many of those use a so-called 'off-canvas' approach - you don't really need > to put that navigation off-canvas when hidden, you could use absolute > positioning to open the navigation list over the content when 'open'. > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com > > > > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Recommended css font settings
Check out this article:
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/,
it has a lot of useful info. There are also some good articles on the IA
website on typography.
- Koen.
On Feb 23, 2013, at 5:31, John wrote:
> Hi list,
>
> I had a break from designing websites for 5 years and I am aware that
> MANY things have changed since then so I have got a few basic questions
> regarding fonts/text display.
>
>
> I know there's no one-size-fits-all solution but as a good start, could
> anyone tell me what the recommended values are for thing like:
>
> font size, line-spacing, number of characters per line or any other css
> parameter that matters in this respect. Do you guys use a starting
> template for your websites, eg:
>
>
> h1 {...}
> h2 {...}
> ...
> p {}
>
>
> I have also noticed an interesting font solution which is @font-face
> with the fonts uploaded to a server. Is it wide spread and recommended?
> When I used to create websites mobile devices were so widespread so I
> definitely don't know about font issues related to that?
>
> I appreciate your tips.
> Thank you
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Recommended css font settings
Sorry for the confusion, IA is http://informationarchitects.net/ - Koen. On Feb 23, 2013, at 9:39, Charles Miller wrote: > > On Feb 23, 2013, at 7:46 AM, Koen van der Drift > wrote: > >> Check out this article: >> http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/, >> it has a lot of useful info. There are also some good articles on the IA >> website on typography. > > I notice that article is 3 1/2 years old. Some things (like me) get better > with age. But web practices and techniques have always seemed a marathon race > where I have been running continually without really catching up to the pack. > > Secondly, I'm among those who don't recognize "the IA website." > > TIA… Chuck M > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
