- This topic is empty.
-
AuthorPosts
-
October 12, 2014 at 9:56 am #186089
Everton
ParticipantHello
I have a drop down list here (linked to a couple of external style-sheets):
I wish to incorporate that list into this page under ‘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.
October 13, 2014 at 9:35 am #186129shaneisme
ParticipantEssentially 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 :)
October 14, 2014 at 10:38 am #186208Everton
ParticipantHello 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:
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
October 14, 2014 at 11:20 am #186210shaneisme
Participant.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.October 14, 2014 at 4:29 pm #186243Everton
ParticipantI have reinserted that content now, but still no border. Not sure why it’s not visible!
October 14, 2014 at 5:04 pm #186247shaneisme
ParticipantOK, 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.October 14, 2014 at 6:18 pm #186249Everton
ParticipantSorry, shaneisme, my mistake. test2.html, which is here:
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!
- Rename
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.