div |
div |
Bigjim |
Sep 13 2020, 04:06 AM
Post
#1
|
Group: Members Posts: 2 Joined: 13-September 20 Member No.: 27,537 |
Here under the html from my dropdown. The right DIV shows lower than the left one.
i can't find how to fix it. <!DOCTYPE html> <html> <head> <style> h1 { color: #00ff61; } select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; background: #6D0448; background-image: none; border: 1px solid black; } select { width: 25%; height: 100%; margin: auto; padding: 0 uto0 0 .5em; color: #f9f91b; cursor: pointer; } select::-ms-expand { display: none; } .select::after { content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 1em; background: #34495E; pointer-events: none; } .select:hover::after { color: #F39C12; <!-- For different browsers --> .select::after { -webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease; } .container{ text-align: center; } .blok{ display: inline-block; zoom: 1; * display: inline; width: 100px; height: 200px; background: red; } .blok p{ float: left; width: 100px; } </style> </head> <hr> <hr> <body> <div class="container" align="left"> <p><font face="Lucida Calligraphy"><b>SELECT DOELGROEP</font></p> <select name="whichpage" id="whichpage" onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value"> <option value="">Select</a></br> <option value="https://www.natural-healing-shop.com/product-categorie/50/">50+</a></br> <option value="https://www.natural-healing-shop.com/product-categorie/baby-kind/">baby-kind</br> <option value="https://www.natural-healing-shop.com/product-categorie/bevallen/">bevallen</br> <option value="https://www.natural-healing-shop.com/product-categorie/man/">man</br> <option value="https://www.natural-healing-shop.com/product-categorie/sporter/">sporter</br> <option value="https://www.natural-healing-shop.com/product-categorie/student/">student</br> <option value="https://www.natural-healing-shop.com/product-categorie/vegetarier/">vegetarier</br> <option value="https://www.natural-healing-shop.com/product-categorie/vrouw/">vrouw</br> <option value="https://www.natural-healing-shop.com/product-categorie/wil-zwanger-worden/">wil-zwanger-worden</br> <option value="https://www.natural-healing-shop.com/product-categorie/zwanger/">zwanger</br> </select></div> <div class="blok" align="center"> <p><font face="Lucida Calligraphy"><b>SELECT INDICATIEGEBIED</font></p> <select name="whichpage" id="whichpage" onChange="if(this.selectedIndex!=0) self.location=this.options[this.selectedIndex].value"> <option value="https://www.natuur-healing.eu/">Select</a></br> <option value="https://www.natural-healing-shop.com/product-categorie/50/">50+</a></br> <option value="https://www.natural-healing-shop.com/product-categorie/accessoires/">accessoires</br> <option value="https://www.natural-healing-shop.com/product-categorie/additieven/</br> <option value="https://www.natural-healing-shop.com/product-categorie/afslanken/">afslanken</br> <option value="https://www.natural-healing-shop.com/product-categorie/allergie/">allergie</br> <option value="https://www.natural-healing-shop.com/product-categorie/allergie-en-ademhalingswegen/">allergie en ademhalingswegen</br> <option value="https://www.natural-healing-shop.com/product-categorie/anti-aging/">anti aging</br> <option value="https://www.natural-healing-shop.com/product-categorie/anti-insect/">anti-insect</br> <option value="https://www.natural-healing-shop.com/product-categorie/baby-kind/">baby-kind</br> <option value="https://www.natural-healing-shop.com/product-categorie/beenderen-en-gewrichten/">beenderen-en-gewrichten</br> <option value="https://www.natural-healing-shop.com/product-categorie/bevallen/">bevallen</br> <option value="https://www.natural-healing-shop.com/product-categorie/bijnier/">bijnier</br> <option value="https://www.natural-healing-shop.com/product-categorie/blaas-en-nieren/">blaas-en-nieren</br> <option value="https://www.natural-healing-shop.com/product-categorie/botten-en-spieren/">botten-en-spieren</br> <option value="https://www.natural-healing-shop.com/product-categorie/cbd/">CBD</br> <option value="https://www.natural-healing-shop.com/product-categorie/cholesterol/">cholesterol</br> <option value="https://www.natural-healing-shop.com/product-categorie/cosmetica/">cosmetica</br> <option value="https://www.natural-healing-shop.com/product-categorie/dag-en-nachtcremes/">dag-en-nachtcremes</br> <option value="https://www.natural-healing-shop.com/product-categorie/detox/">detox</br> <option value="https://www.natural-healing-shop.com/product-categorie/drainage/">drainage</br> <option value="https://www.natural-healing-shop.com/product-categorie/energie-focus/">energie-focus</br> <option value="https://www.natural-healing-shop.com/product-categorie/etherische-olien/">etherische-olien</br> <option value="https://www.natural-healing-shop.com/product-categorie/fertiliteit/">fertiliteit</br> <option value="https://www.natural-healing-shop.com/product-categorie/geef-boorstvoeding/">geef-boorstvoeding</br> <option value="https://www.natural-healing-shop.com/product-categorie/geurspray/">geurspray</br> <option value="https://www.natural-healing-shop.com/product-categorie/gewichtscontrole/">gewichtscontrole</br> <option value="https://www.natural-healing-shop.com/product-categorie/gewrichten-botten-spieren/">gewrichten-botten-spieren</br> <option value="https://www.natural-healing-shop.com/product-categorie/gezichtslotion/">gezichtslotion</br> <option value="https://www.natural-healing-shop.com/product-categorie/gezondheid-zenuwachtigheid/">gezondheid-zenuwachtigheid</br> <option value="https://www.natural-healing-shop.com/product-categorie/glucosemetabolisme/">glucosemetabolisme</br> <option value="https://www.natural-healing-shop.com/product-categorie/haarlotion/">haarlotion</br> <option value="https://www.natural-healing-shop.com/product-categorie/handcreme/">handcreme</br> <option value="https://www.natural-healing-shop.com/product-categorie/hart-bloedvaten/">hart-bloedvaten</br> <option value="https://www.natural-healing-shop.com/product-categorie/hart-en-bloedsomloop/">hart-en-bloedsomloop</br> <option value="https://www.natural-healing-shop.com/product-categorie/hennapoeder/">hennapoeder</br> <option value="https://www.natural-healing-shop.com/product-categorie/hormonale-balans/">hormonale-balans</br> <option value="https://www.natural-healing-shop.com/product-categorie/hpa-as/">hpa-as</br> <option value="https://www.natural-healing-shop.com/product-categorie/huid-nagels-haren/">huid-nagels-haren</br> <option value="https://www.natural-healing-shop.com/product-categorie/huidcreme/">huidcreme</br> <option value="https://www.natural-healing-shop.com/product-categorie/huidgel/">huidgel</br> <option value="https://www.natural-healing-shop.com/product-categorie/huidolie/">huidolie</br> <option value="https://www.natural-healing-shop.com/product-categorie/huidzalf/">huidzalf</br> <option value="https://www.natural-healing-shop.com/product-categorie/immuniteit/">immuniteit</br> <option value="https://www.natural-healing-shop.com/product-categorie/inflammatie/">inflammatie</br> <option value="https://www.natural-healing-shop.com/product-categorie/jacob-hooy/">jacob-hooy</br> <option value="https://www.natural-healing-shop.com/product-categorie/keel-oren/">keel-oren</br> <option value="https://www.natural-healing-shop.com/product-categorie/laboratoire-fenioux/">laboratoires-fenioux</br> <option value="https://www.natural-healing-shop.com/product-categorie/lever-galblaas/">lever-galblaas</br> <option value="https://www.natural-healing-shop.com/product-categorie/liftingkuur/">liftingkuur</br> <option value="https://www.natural-healing-shop.com/product-categorie/longen/">longen</br> <option value="https://www.natural-healing-shop.com/product-categorie/man/">man</br> <option value="https://www.natural-healing-shop.com/product-categorie/massage-olie/">massage-olie</br> <option value="https://www.natural-healing-shop.com/product-categorie/microbioom/">microbioom</br> <option value="https://www.natural-healing-shop.com/product-categorie/mitochondrien/">mitochondrien</br> <option value="https://www.natural-healing-shop.com/product-categorie/natuurlijke-weerstand/">natuurlijke-weerstand</br> <option value="https://www.natural-healing-shop.com/product-categorie/neus/">neus</br> <option value="https://www.natural-healing-shop.com/product-categorie/olie-en-vloeistoffen/">olie-en-vloeistoffen</br> <option value="https://www.natural-healing-shop.com/product-categorie/oogcreme/">oogcreme</br> <option value="https://www.natural-healing-shop.com/product-categorie/geneeskrachtige-orgonites/">geneeskrachtige-orgonites</br> <option value="https://www.natural-healing-shop.com/product-categorie/parasieten/">parasieten</br> <option value="https://www.natural-healing-shop.com/product-categorie/parasieten-schimmels/">parasieten-schimmels</br> <option value="https://www.natural-healing-shop.com/product-categorie/parfum-olie/">parfum-olie</br> <option value="https://www.natural-healing-shop.com/product-categorie/pijn/">pijn</br> <option value="https://www.natural-healing-shop.com/product-categorie/policicincep-q10/">policicincep-q10</br> <option value="https://www.natural-healing-shop.com/product-categorie/prostaat/">prostaat</br> <option value="https://www.natural-healing-shop.com/product-categorie/pure-powder/">pure-powder</br> <option value="https://www.natural-healing-shop.com/product-categorie/raw-pure-food/">raw-pure-food</br> <option value="https://www.natural-healing-shop.com/product-categorie/reinigingsmelk/">reinigingsmelk</br> <option value="https://www.natural-healing-shop.com/product-categorie/schildklier/">schildklier</br> <option value="https://www.natural-healing-shop.com/product-categorie/schimmels/">schimmels</br> <option value="https://www.natural-healing-shop.com/product-categorie/slaap-en-gemoedstoestand/">slaap-en-gemoedstoestand</br> <option value="https://www.natural-healing-shop.com/product-categorie/spijsverteringskanaal/">spijsverteringskanaal</br> <option value="https://www.natural-healing-shop.com/product-categorie/sporter/">sporter</br> <option value="https://www.natural-healing-shop.com/product-categorie/stress/">stress</br> <option value="https://www.natural-healing-shop.com/product-categorie/student/">student</br> <option value="https://www.natural-healing-shop.com/product-categorie/urinair-comfort-menopauze/">urinair-comfort-menopauze</br> <option value="https://www.natural-healing-shop.com/product-categorie/vegetarier/">vegetarier</br> <option value="https://www.natural-healing-shop.com/product-categorie/vermoeidheid/">vermoeidheid</br> <option value="https://www.natural-healing-shop.com/product-categorie/voedingssuplementen/">voedingssuplementen</br> <option value="https://www.natural-healing-shop.com/product-categorie/vrouw/">vrouw</br> <option value="https://www.natural-healing-shop.com/product-categorie/wil-zwanger-worden/">wil-zwanger-worden</br> <option value="https://www.natural-healing-shop.com/product-categorie/zeep/">zeep</br> <option value="https://www.natural-healing-shop.com/product-categorie/zenuwstel-en-hersenen/">zenuwstel-en-hersenen</br> <option value="https://www.natural-healing-shop.com/product-categorie/zwanger/">zwanger</br> </div> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value+".html"; } </script> </body> |
Christian J |
Sep 13 2020, 05:20 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
This is a typo:
QUOTE CODE zoom: 1; * display: inline; There should be a curly brace after the "*". |
Bigjim |
Sep 13 2020, 06:46 AM
Post
#3
|
Group: Members Posts: 2 Joined: 13-September 20 Member No.: 27,537 |
|
Christian J |
Sep 13 2020, 07:11 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
It's in the stylesheet.
I don't know if it fixes the DIV problem, it's just a typo I noticed. |
pandy |
Sep 13 2020, 09:57 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
And another brace before it... The rule before the * selector lacks the closing brace.
|
pandy |
Sep 13 2020, 10:00 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
Or wait, maybe the * is the typo? A rule that makes everything inline, 100px wide, 200px high and red doesn't make sense. Does the below belong to the rule above, .blok?
CODE display: inline; width: 100px; height: 200px; background: red; |
Christian J |
Sep 13 2020, 12:34 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
Good catches pandy!
|
pandy |
Sep 14 2020, 12:00 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
|
Lo-Fi Version | Time is now: 3rd June 2024 - 05:05 PM |