The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> div
Bigjim
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 13 2020, 05:20 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,635
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 "*".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Bigjim
post Sep 13 2020, 06:46 AM
Post #3





Group: Members
Posts: 2
Joined: 13-September 20
Member No.: 27,537



QUOTE(Christian J @ Sep 13 2020, 12:20 PM) *

This is a typo:

QUOTE
CODE
zoom: 1;
*
display: inline;

There should be a curly brace after the "*".


Thanks, can you please send where i have to past the code, in the head?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 13 2020, 07:11 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,635
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 13 2020, 09:57 AM
Post #5


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



And another brace before it... The rule before the * selector lacks the closing brace.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 13 2020, 10:00 AM
Post #6


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
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;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 13 2020, 12:34 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



Good catches pandy! cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 14 2020, 12:00 AM
Post #8


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 1st December 2020 - 04:20 PM