[css-d] Menu bacground and width
Hello, this is my first post to this list. I am creating this website: http://klikerlab.pl/wordpress/ using WP Framework. I made a jpg image to illustrate what I want to achieve: http://klikerlab.pl/wordpress/wp-content/uploads/2009/07/klikerlab_glowna.jpg and now I'm working on the menu, which will appear at the bottom of the page, above the footer. In WP Framework it was under the header. Currently I have these problems with it: - the bacground is larger than the menu. I think that this is some kind of margin on top of the .nav or .ul class, but I can't find it. I tried to set the bacground color in different class (not in .menu) but then it disappears. - the menu is not as wide as the browser's window. There is a little margin on both sides, and I don't know how to remove it (this is different than in my design, I decided that the menu will look better with maximum width). - I don't know how to center the menu items (like in the "real" footer in this website). Also, Firebug says that there is a html.css file, and it finds some more css in this file. But in Wordpress Editor I have only style.css and php templates. So where would be that html.css? Thanks! Ania __ css-discuss [cs...@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] Menu bacground and width
> > To center an element using "auto" left/right margins, the element must > have a width - either specified or intrinsic (as in the case of a > "shrink-to-fit" property like an inline-block). Now the list elements have "auto" width. Should it be fixed? But then they wouldn't look good with different length of titles... when I turn off the margin-left, it moves a little bit to the center, but together with the border...and turning off margin-right doesn't change anything. > Setting margin-top to zero on your menu ULs will rid you of the band of > gray across the top. Indeed :) > As someone who avoids drop-down/ fly-out menus like the plague, I'm not > the person to ask about them. I see another problem with this menu - the submenus should unfold upwardsto be useful... of course I don't know how to do it. I only changed it that the submenu appears above the menu, but next categories will go under the first one. So, what menus do you prefer? :) > My browsers report that you are using UTF-8. Sadly, many client-side > editors do not support UTF-8 very well. Dreamweaver prior to CS3 did > not, for example. Also, FTP clients may need to be set to transmit code > as "binary". I use only Wordpress editor. I asked my hosting support, maybe they'll have an idea. > Well, some things seem to be missing from the framework. In addition to > the resetting of margins and padding, the background-color has not been > set. Mind you, I like the light tan background I see this end... :) I left the bacground white, not to have trouble with bacground of my flash animation at the top. Where is the tan bacground? ;) Thank you again, Ania __ css-discuss [cs...@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] Menu bacground and width
>
> It's the entire list that you are trying to center, not the individual list
> items (I think). Give the UL a width, then the auto left/right margins on
> the UL will center it.
> [...]
I wrote:
.nav ul { width: 80%; margin-left: auto; margin-right: auto; }
but the browser ignored it. Firebug doesn't see this line, it sees only .nav
class. So I added the 80% width here:
/* Lists: (ul, ol, dl) */
ul, ol, dl { margin-left: 15px; }
.nav { margin-left: auto; margin-right: auto; width: 80% }
and it shrinks somehow to the center, but the menu items stay aligned to the
left (with margin), and the border shrinks too :(
My opinion, not universally shared, is that many visitors will only move
> their mouse towards a link that appears to take them closer to what they are
> looking for, so that hiding links is counter-productive. If the link is
> important, I make it visible; if it is not important, I leave it off and
> reduce the noise.
>
That's right... if I can't find something on the page which I opened, I
usually go back to Google ;))
But this menu will be more like a footer, anyway...
__
css-discuss [cs...@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] Columns flying around!
Hello, I was editing the front page of my website: http://klikerlab.pl/wordpress/ trying to fit the post info (category, author, date, etc.) into the third column. When I copied the tags from the article to the third column, the third and fourth column dropped down. They are not wider than necessary, so maybe I forgot to close one div? I was checking it in Notepad++ but I haven't found any open div... Here is how they should look like - 1st column - a picture 2nd column - the blog post 3rd column - rss icon, a logo image, and meta data about the post 4th column - excerpt of the post and archives Also, the footer is now above the 3rd and 4th column, but below the first two... Thanks for any ideas! Ania __ css-discuss [cs...@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] Columns flying around!
Yes, because I repaired it somehow... I had a moment of enlightenment ;) sorry for panicking about this too early. I know that there are some errors and probably too much unnecessary code... I will try to clean this up. I should also align the columns to the top of their container (so the article's title would be aligned to top of the chicken illustration and the excerpt)... thanks anyway. 2009/7/17 David Laakso > Andzia wrote: > >> Hello, >> I was editing the front page of my website: >> http://klikerlab.pl/wordpress/ >> trying to fit the post info (category, author, date, etc.) into the third >> column. When I copied the tags from the article to the third column, the >> third and fourth column dropped down. They are not wider than necessary, >> so >> maybe I forgot to close one div? I was checking it in Notepad++ but I >> haven't found any open div... >> Here is how they should look like - >> 1st column - a picture >> 2nd column - the blog post >> 3rd column - rss icon, a logo image, and meta data about the post >> 4th column - excerpt of the post and archives >> Also, the footer is now above the 3rd and 4th column, but below the first >> two... >> >> Thanks for any ideas! >> Ania >> >> > > > > > I may be missing something, but it looks pretty much the way you describe > it all my browsers. The exceptions are IE 6/7: the footer/nav is broken. The > page had a number of markup errors several days ago when I looked at it. And > it still has errors. Might be worthwhile to validate... > > > > > > > > > > > > > > > > > > > > > __ css-discuss [cs...@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] My menu - finally centered but doesn't look good in other browsers than Firefox...
Hello again,
my website looks finally like I wanted... but not in other browsers. I would
like you to help me in changing this, without destroying the nice look in
Firefox... ;)
For some reason I must have the call for the menu inside the header.php
file, because otherwise my wordpress-based website turns upside down... so I
have this in header.php:
and this at the bottom of any other page template:
The result is here (Firefox, please!):
http://klikerlab.pl/
I was very happy and proud, until I opened it in other browsers ;) like
Internet Explorer, Safari and Opera. All of them see two menus... what
should I do, without letting Firefox know, that the other browsers are quite
right? ;)
This is the css code for menu and the footer, which have to stay together
forever in header.php...:
/* Menu */
.menu { background-color: #3d3d3d; }
.nav { line-height: 2px; }
.nav, .nav * { list-style: none; text-align: center; }
.nav li { padding: 0; position: relative; text-align: center; display:
inline; }
.nav ul li { width: 100% display: inline; }
.nav a { display: inline; position: relative; padding: 4px 10px; }
.nav ul { display: inline; }
.nav { margin-left: auto; margin-right: auto; width: 100% }
/* Default Skin */
.menu { border: 1px solid; border-color: #aaa #3d3d3d #3d3d3d #3d3d3d;
margin-top: 0; }
.nav ul { border: 1px solid #ddd; border-bottom: none; }
.nav ul li a { border-bottom: 1px solid #ddd; }
.nav li:hover ul,
.nav li.nav-hover ul { background: #fff; }
.nav a { color: #D3E0E0; border-right: 1px solid #ccc; }
.nav a:hover { text-decoration: none; background: #fafafa; }
.nav ul a { border-right: none; }
.nav li:hover, .nav li.nav-hover,
.nav a:focus { background: #fafafa; }
/* Footer */
.footer { position: absolute; width: 100%; display: block; bottom: 0; left:
0; right: 0; text-align: center; margin-bottom: -40px; }
I would be grateful for any ideas.
Also, feel free to comment any other layout and code issues if you want...
the website is almost finished at this point, only without a content
(everything is a placeholder text), and the gallery doesn't work, but it's
because of some database permissions...
Regards,
Ania
__
css-discuss [cs...@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] My menu - finally centered but doesn't look good in other browsers than Firefox...
Well, I removed the call for menu from footer.php and now it doesn't double, and I removed width: 100% from .menu and .nav and .footer, and now only IE has some trouble with displaying bacground under the menu, while Opera doesn't show the footer but it looks good in Firefox and Safari so I'm quite happy about it... two browsers are better than one ;) I even like the Opera-look without footer. Now only the gallery doesn't work, because I can't point the correct path to photo albums, or something doesn't have permission to read them... but it's not css-related ;) 2009/7/21 David Laakso > Andzia wrote: > >> Hello again, >> my website looks finally like I wanted... but not in other browsers. I >> would >> like you to help me in changing this, without destroying the nice look in >> Firefox... ;) >> > > > > > Your page looks relatively similar in IE 6/7/8, FF, Camino, Safari, > SeaMonkey. It draws a little horizontal scrollbar in all browsers currently > known within the universe It is a little tight at the bottom in Opera, and > the menu is a little clipped at the top in IE 6/7. Validating the markup is > always a nice touch. > > PS > I would not take a coil of rope to the woods over any of the above matters. > > > __ css-discuss [cs...@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] Timing with css?
Hello, I have this website almost finished: http://klikerlab.pl/ and I had an idea, that maybe I could make it more active, by changing the image to the left, each day. Can it be done with css? For example, that the chicken would be displayed on Monday, something else on Tuesday, etc or should I use a different method? Thank you Ania __ css-discuss [cs...@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] Margin only in Firefox
Hello, I added a photo background to my header and I noticed a margin between this header and the top menu, which doesn't appear in Opera, IE or Safari, only in Firefox. I found that there is an issue with Firefox creating margins and I tried using border-collapse property to fix it, but with no success. What can I do? I think that Firefox can be creating more of these margins, but the website has mostly white background so they are not visible. Here is the url: http://klikerlab.pl/ Thanks in advance. Ania __ css-discuss [cs...@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] Strange display in Safari
Hello, recently I have added two banners to the right of a centered column on my website, and since then, the rest of the content (which should be below) appears to the right in Safari. Other browsers display it correctly (I'm using Firefox). Before Safari was the only browser where the website looked identically like in Firefox... so what is wrong now? Here is the url: http://klikerlab.pl/ Thanks in advance, Ania -- "The customs of your tribe are not laws of nature." George Bernard Shaw __ css-discuss [cs...@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] Strange display in Safari
Hello, I reduced the number of errors to 9: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fklikerlab.pl%2F and now I have some questions. First, what is a "column" in this report? Like: " *Line 170, Column 4*". I found somewhere that it refers to the database, is that correct? Or does it refer to layout? Second: "end tag for element "p" which is not open". This is about the excerpt, I couldn't find such tag in my html, but the excerpts are created by a plugin and maybe it has some wrong html code. Anyway, I can't find this element in page source. And this: "XML Parsing Error: Opening and ending tag mismatch: div line 181 and p". What does it mean? Again, this error seems to be located in the excerpt code and I can't find it in page source... And now Firefox displays different colors for some links (excerpt titles and some tags from tag cloud), and there is too much padding on the top of two banners (which are to the right from the article). Safari and Opera display these things like before. Thanks in advance, Ania __ css-discuss [cs...@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] Strange display in Safari
Thanks everyone, now errors are 6 so at least there is some progress:
http://validator.w3.org/check?uri=http%3A%2F%2Fklikerlab.pl%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
I found where are the "p" tags ("**end tag for element "p" which is not
open"). In page source it looks like this:
http://klikerlab.pl/2009/12/13/targetowanie-i-kilka-nowosci/";>Targetowanie
i kilka nowoĊci
So indeed, too many end tags... but the code that generates it, looks like
this:
and here "p" tags look ok... so I don't know what to change. As for divs, I
tried adding or removing them but it just created more errors. Still the
excerpt titles are blue in Firefox, while I wanted them to be brown like in
Safari ;) and the shadow around two banners looks too large in Firefox.
And I can't find newer archives from css-d, here the latest is from
September:
http://archivist.incutio.com/viewlist/css-discuss/
Thanks again!
Ania
__
css-discuss [cs...@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] Strange display in Safari
> We're a little off-topic here as these are markup rather than CSS issues; > but, nevertheless the extra may be generated by your WP php script. > I think so too. Now I restored the backup because there were too many little errors popping up. I'll try again. Sorry for offtopic! Ania __ css-discuss [cs...@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/
