Incorporating drop-down list into HTML page

[Everton]

Hello

I have a drop down list here (linked to a couple of external style-sheets):

Drop down list

I wish to incorporate that list into this page under ‘Our Timetable’:

Our Timetable

Both Web pages are stylised with ‘Container’ in the CSS.

What would be the best place to start, please – I’ve not done that before – and Web tutorials I have come across haven’t really been what I was looking for.

Thanks for any guidance.

[shaneisme]

Essentially you have a few options:

• Rename .container in the drop down list into something more semantic like .dropdown-container. You’d need to do that inside the HTML and CSS of course.
• Add a second class to the .container on the drop down and then adjust the CSS to include both only
• Add another wrapper and add that wrapper to the selectors in your CSS to make it even more specific

Out of all those options (and there are probably a few more), the first one is definitely the best. You get a much more meaningful container name + it makes it easier to modify long-term.

This is solved in other languages with namespacing, and in the future we can solve it by manipulating the shadow DOM, but that might be getting ahead of ourselves :)

[Everton]

Hello shaneisme

Many thanks for your reply.

I have done as you suggested and renamed .container in the drop down list as dropdown-container and made the changes in my HTML and CSS. I wasn’t sure how to do this:

_•Add a second class to the .container on the drop down and then adjust the CSS to include both only
•Add another wrapper and add that wrapper to the selectors in your CSS to make it even more specific
_

but I have managed to position the drop-down list to where I wanted:

Link

As it compromised other objects (three images and three lots of text), I deleted those and renamed holder_content to holder_content_middle.

Basically, I wanted to draw a line around that new content holder so that I could see what I was working with and how to reinsert the text/images I had deleted previously, so I drew a border around the holder but it is not visible:

.holder_content_middle {
        margin-top:-10px;
        margin-bottom:16px;
        margin-left:26px;         
                border-style: solid;
                border-width: 5px;
                border-color: BD2CBB;
}

I have been on this all day and would be grateful for any further advice.

Many thanks

[shaneisme]

.holder_content_middle doesn’t really have any content in it, so it’s got a height of 0 which is why nothing is showing.

[Everton]

I have reinserted that content now, but still no border. Not sure why it’s not visible!

[shaneisme]

OK, so first, I don’t see a border set on .holder_content_middle. Second, because the content is all floating, it’s still got a height of 0 because floats won’t fill up the parent.

[Everton]

Sorry, shaneisme, my mistake. test2.html, which is here:

test2.html

has two style sheets (some of it still repetitious – haven’t got round to tidying it yet). the women_test.css has this:

 .holder_content_middle {
        margin-top:-10px;
        margin-bottom:16px;
        margin-left:26px;         
                border-style: solid;
                border-width: 5px;
                border-color: BD2CBB;
}

But you say it still won’t provide a border because it is floating? Do you mean this in style1.CSS:

float: right;        
background:transparent;

It’s all getting very complicated!

[Author]

Posts