drop down selector issue [tangent, original reposted]

[chechu]

Hey all,
I have a css issue, which you can see here: http://www.rockyroadsnetwork.com on the top right: language selector.

This is the code:

<div id="lang_sel" >
<ul>
<li><a href="#" class="lang_sel_sel icl-nl">
<span class="icl_lang_sel_current">Nederlands</span></a>
<ul>
<li class="icl-en">
<a href="http://rockyroadsnetwork.com?lang=en">
<span class="icl_lang_sel_native">English</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Engels<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-fr">
<a href="http://rockyroadsnetwork.com?lang=fr">
<span class="icl_lang_sel_native">Français</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Frans<span class="icl_lang_sel_native">)</span></span> </a>
</li>
<li class="icl-de">
<a href="http://rockyroadsnetwork.com?lang=de">
<span class="icl_lang_sel_native">Deutsch</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Duits<span class="icl_lang_sel_native">)</span></span> </a>

</li>
<li class="icl-el">
<a href="http://rockyroadsnetwork.com?lang=el">
<span class="icl_lang_sel_native">Ελληνικα</span> <span class="icl_lang_sel_translated"><span class="icl_lang_sel_native">(</span>Grieks<span class="icl_lang_sel_native">)</span></span> </a>
</li>
</ul>
</li>
</ul>
</div>
This is the css:

#lang_sel {height:32px; position:relative; z-index:99; font-family: verdana, arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html #lang_sel {width:12em; w\idth:12em;}
/* remove all the bullets, borders and padding from the default list styling */
#lang_sel ul, #lang_sel li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
#lang_sel li:before{content:'' !important;}
#lang_sel ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#lang_sel li {float:left;width:149px;position:relative;}
/* style the links for the top level */
#lang_sel a, #lang_sel a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; background:#fff; padding-left:10px; line-height:24px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #lang_sel a, * html #lang_sel a:visited {width:149px; w\idth:138px;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#lang_sel ul ul {visibility:hidden;position:absolute;height:0;top:25px;left:0; width:149px;border-top:1px solid #cdcdcd;}
/* another hack for IE5.5 */
* html #lang_sel ul ul {top:18px;t\op:19px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
#lang_sel table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
#lang_sel ul ul a, #lang_sel ul ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:5px 10px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html #lang_sel ul ul a, * html #lang_sel ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
#lang_sel a:hover, #lang_sel ul ul a:hover{color:#000; background:#eee;}
#lang_sel :hover > a, #lang_sel ul ul :hover > a {color:#000; background:#eee;}
#lang_sel a.lang_sel_sel{
background:url(../img/nav-arrow-down.png) #fff right no-repeat;
color:#444;
}
#lang_sel a.lang_sel_sel:hover{
text-decoration: none;
color:#000;
}
/* make the second level visible when hover on first level list OR link */
#lang_sel ul li:hover ul,
#lang_sel ul a:hover ul{visibility:visible; }
#lang_sel img.iclflag{width:18px;height:12px;position: relative; top: 1px;}
#lang_sel_footer {
margin: 0;
padding: 7px;
text-align: center;
border: 1px solid #fff;
font: 11px Verdana, sans-serif;
height: 15px;
clear: both;
background-color: #fff;
border: 1px solid #cdcdcd;
}
#lang_sel_footer ul {
list-style: none;
margin:0;
padding:0;
}
#lang_sel_footer ul li img {
position: relative;
top: 1px;
width: 18px;
height: 12px;
}
#lang_sel_footer ul li {
display:inline;
margin:0 1px 0 0;
padding:0;
}
#lang_sel_footer ul li a, #lang_sel_footer ul li a:visited {
text-decoration: none;
padding: 5px 10px;
}
#lang_sel_footer ul li a:hover, #lang_sel_footer ul li a:active {}
#wpml_credit_footer { width: 100%; margin: 10px 0; padding: 0; text-align: center; font-size: 11px; }
#lang_sel_list {height:32px; position:relative; z-index:99; font-family: verdana, arial, sans-serif; width:149px;}
/* hack to correct IE5.5 faulty box model */
* html #lang_sel_list {width:12em; w\idth:12em;}
/* remove all the bullets, borders and padding from the default list styling */
#lang_sel_list ul, #lang_sel_list li {padding:0 !important; margin:0 !important; list-style-type:none !important;}
#lang_sel_list li:before{content:'' !important;}
#lang_sel_list ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#lang_sel_list li {float:left;width:149px;position:relative;}
/* style the links for the top level */
#lang_sel_list a, #lang_sel_list a:visited {display:block;font-size:11px;text-decoration:none !important; color:#444444; border:1px solid #cdcdcd; border-width:0 1px 1px 1px; background:#fff; padding-left:10px; line-height:18px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html #lang_sel_list a, * html #lang_sel_list a:visited {width:149px; w\idth:138px;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#lang_sel_list ul {/*visibility:hidden;position:absolute;*/height:0;top:19px;left:0; width:149px;border-top:1px solid #cdcdcd;}
/* another hack for IE5.5 */
* html #lang_sel_list ul {top:18px;t\op:19px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
#lang_sel_list table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* style the second level links */
#lang_sel_list ul a, #lang_sel_list_list ul a:visited {background:#ffffff; color:#444444; height:auto; line-height:1em; padding:3px 10px;}
/* yet another hack for IE5.5 */
* html #lang_sel_list ul a, * html #lang_sel_list ul a:visited {width:150px;w\idth:128px;}
#lang_sel_list a.lang_sel_sel{
background-image: none;
color:#444;
}
#lang_sel_list a.lang_sel_sel:hover{
text-decoration: none;
color:#000;
}
/* make the second level visible when hover on first level list OR link */
#lang_sel_list ul li:hover ul,
#lang_sel_list ul a:hover ul{visibility:visible; }
#lang_sel_list img.iclflag{width:18px;height:12px;position: relative; top: 1px;}
#lang_sel.icl_rtl{
text-align:right;
direction: rtl;
}
#lang_sel.icl_rtl .lang_sel_sel{
padding-right:14px;
}


There are two issues:
1/ the language should be beside the flags, and not half below it
2/ when the drop down unfolds, the Twitter and Facebook behind it are blocking from using the language selector

Can anyone help me out here, please ? Many thanks !

[chechu]

Hey all,
I resolved the issue with the transparant background, by removing the FB and TW ;)
But I still have the issue of the languages appearing below the flags, and not next to it.

Anyone ?

[philips]

Hello,

You have created a very good looking website.

I would like to know how I can create a grey line similar to the following one which shows after US POLITICS: http://www.thedailybeast.com/articles/2011/07/16/marcus-bachmann-gay-how-rumors-could-affect-michele-bachmann-s-campaign.html

I'll appreciate your advice. Thanks.

[chechu]

style="border-bottom: 5px solid #ddd;"
but that is not what this post is about ...

[philips]

Many thanks. I am sorry for posting this here. I was looking for help and no one was responding to my query. I posted the code you provided into the css style document and I did not see it taking effect on the html page. :confused:

Many thanks.

[chechu]

Post the whole code here; that might help people on the forum to see how we can help.

[philips]

Hi, thank you.

This is what I have written as far as the HTML is concerned:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="pages.css" rel="stylesheet" type="text/css" />
</head>


and this is the CSS part:


/*
CSS Credit: http://david.philips
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Times New Roman, sans-serif;
font-size: 13px;
color: #333333;
}

[chechu]

You should have content, Philips. You don't have a body in your html, so how can you expect something to be seen ?

[philips]

I mean what is it that can cause the css code you provided to appear or take effect on the html document?

As far as I know, CSS takes care of the formatting so if I take the css style sheet away from the folder that contains the website, I will only have text and pictures nothing more. The formatting will disappear. I have tested this with many of the free templates that are available on the internet.

I think I need to understand this in order to work in a meaningful way with CSS AND HTML.

[philips]

Content? Do you pictures and text?

[philips]

ok I added the following now to the html document and I still don't see anything:

<body>

style="border-bottom: 5px solid #ddd;"
</body>

[chechu]

I will only have text and pictures nothing more.
Well, were is it ? You don't have a body part in your html.

[philips]

As far as I know... I have to create the website using CSS before I add text and pictures:confused:

[chechu]

http://www.w3.org/Style/Examples/011/firstcss

[philips]

Many thanks. I will study this carefully and see what happens.

[philips]

The main issue with this lesson is that it does not show how one can create an actual website: They are just showing some very simple page that they have created in html and styled in css. I still don't know how to create the columns that are need to divide the website etc. I have no idea whether these have to be written in HTML or CSS.... I think I will probably have to go and take a course in web design and learn it from there.

[philips]

It would have been useful and practical if someone has created a video and demonstrated how an actual website is created from scratch.

[philips]

Many of the lessons on the following website: http://www.w3schools.com/html/html_examples.asp

talk about tables. I have heard from many people that tables are frowned upon and that css and not html should be used to create say a column.

[djr33]

w3schools is best avoided. They happen to have high search engine rankings so they're seen by many, but they are not associated with any official entity (despite what the name says) and there are many problems with the advice given there.
While it is possible to learn something from their tutorials, the problems with them make it probably not worth finding out what aspects to learn and which to ignore. There are lots of other tutorial sites out there.
If you're interested in knowing more about this topic, look for threads that mention why w3schools is best avoided.

Short answer: w3schools is wrong that tables are a good idea. (Well, according to many, it's a bad idea to use tables as recommended by w3schools. And there are cases where tables are useful, but not for doing layouts.)

[chechu]

I found this one, but also all tables ;) http://www.2createawebsite.com/build/html.html
You'd need to Google away !

But what about my css issue, please ?