Dropdown-Boxen nebeneinander / untereinander und in verschiedenen Farben

qyubert

Hallo zusammen,
ich bin absoluter Neuling und arbeite mich gerade durch verschiedene Tutorials durch aber komme bei einem Punkt nicht mehr weiter:

Ich möchte gerne mehrere Dropboxen (6 Stück) entweder nebeneinander oder auf zwei Reihen verteilt 3 Dropboxen nebeneinander anlegen. Zudem soll jede Dropbox eine andere Farbe (in RGB codiert) erhalten:

Das sind die sechs Dropboxen, sie sind derzeit alle blau:

London Paris Rom Madrid Berlin Wien

Ich würde gerne die Dropboxen in unterschiedlichen Farben haben und im zweiten Schritt noch (falls mal weitere Dropboxen dazukommen sollten) die Dropboxen auf zwei Reihen verteilen.

Der HTML-Code lautet bisher so:

<ul dir="ltr">
<li dir="ltr"><br /></li>
</ul>
<table style="border-collapse: collapse; width: 920px; height: 49px;" dir="ltr" border="1">
<tbody>
<tr style="height: 18px;">
<td style="height: 18px; width: 735px; text-align: left; border-color: rgb(255, 255, 255); border-style: solid;" colspan="5"><img src="#" alt="" id="img_307151412291507531632212" lconnresourcetype="attachment" lconnattachedresourcetype="draft" style="width: 1036px; height: 190px;" /></td>
</tr>
<tr style="height: 13px;">
<td style="width: 173px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
<td style="width: 191px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
<td style="width: 180px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
<td style="width: 181px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
<td style="width: 10px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
<td style="width: 185px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px; border-color: rgb(255, 255, 255); border-style: solid; width: 735px;" colspan="5"><strong><img src="#” alt="" id="img_123648449361507531818868" lconnresourcetype="attachment" lconnattachedresourcetype="draft" /></strong></td>
</tr>
</tbody>
</table><br />
<style>
.dropbtn {
background-color: rgb(8, 66, 126);
color: white;
padding: 10px;
border: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 18px!important;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: darkcyan!important;
padding: 10px 10px;
text-decoration: none;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 14px;
}

.dropdown-content a:hover {
background-color: lightgrey;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
color: white;
background-color: rgb(14, 120, 197);
}
</style>
<div class="dropdown" dir="ltr"><button class="dropbtn"><span style="color: rgb(255, 255, 255);" background-color:="background-color:" rgb="rgb">... London</span></button>
<div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank">Link2</a> <a href="#" target="_blank">Link3</a></div>
</div>
<div class="dropdown" dir="ltr"><button class="dropbtn">... Paris</button>
<div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a> <a href="#" target="_blank"> Link 5</a> <a href="#" target="_blank"> Link 6</a></div>
</div>
<div class="dropdown" dir="ltr"><button class="dropbtn">... Rom</button>
<div class="dropdown-content"><a href="#" target="_blank">Link 1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a></div>
</div>
<div class="dropdown" dir="ltr"><button class="dropbtn">... Madrid</button>
<div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a> <a href="#" target="_blank="_blank""> Link 5</a></div>
</div>
<div class="dropdown" dir="ltr"><button class="dropbtn">Berlin</button>
<div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" _blank="_blank" target="_blank"> Link 4</a> <a href="#" target="_blank"> Link 5</a> <a href="#" target="_blank"> Link 6</a></div>
</div>
<div class="dropdown" dir="ltr"><button class="dropbtn">Wien</button>
<div class="dropdown-content"><a href="#" target="_blank">Link1.</a> <a href="#" _blank=" target=_blank" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a></div>
</div><br />
<table style="border-collapse: collapse; width: 100%; height: 126px;" dir="ltr" border="1">
<tbody>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>
</tr>
</tbody>
</table><br /><br /><br /><br /><br /><br /><br />
<div dir="ltr" align="left-centered">
<marquee direction="left" loop="15" scrollamount="1" scrolldelay="2" behavior="alternate" bgcolor="white" width="93%">
<font size="5" color="red">Latest news</font>
</marquee>
</div>

Vielen Dank für Eure freundliche Hilfe.

Schöne Grüße
qyubert

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Ich gehöre zu den Leuten, die sich Code am liebsten live und in Farbe anschauen, also am lebenden Objekt. Ein Link zur Problemseite wäre also klasse. Mit deinem Code oben kann ich so nicht viel anfangen.

mensmaximus

Bei derart viel inline css wird einem schwindelig. Warum macht man so etwas?

qyubert

Hallo Mensmaximus,
weil ich es nicht besser kann. Bin auch nicht glücklich damit, aber es wäre klasse, wenn trotdem geholfen werden könnte....

HTML

<ul dir="ltr">   <li dir="ltr"><br /></li> </ul> <table style="border-collapse: collapse; width: 920px; height: 49px;" dir="ltr" border="1">   <tbody>     <tr style="height: 18px;">       <td style="height: 18px; width: 735px; text-align: left; border-color: rgb(255, 255, 255); border-style: solid;" colspan="5"><img src="#" alt="" id="img_307151412291507531632212" lconnresourcetype="attachment" lconnattachedresourcetype="draft" style="width: 1036px; height: 190px;" /></td>     </tr>     <tr style="height: 13px;">       <td style="width: 173px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>       <td style="width: 191px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>       <td style="width: 180px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>       <td style="width: 181px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>       <td style="width: 10px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>       <td style="width: 185px; height: 13px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="height: 18px; border-color: rgb(255, 255, 255); border-style: solid; width: 735px;" colspan="5"><strong><img src="#” alt="" id="img_123648449361507531818868" lconnresourcetype="attachment" lconnattachedresourcetype="draft" /></strong></td>     </tr>   </tbody> </table><br /> <style>   .dropbtn {     background-color: rgb(8, 66, 126);     color: white;     padding: 10px;     border: none;     cursor: pointer;     font-family: Arial, Helvetica, sans-serif;     font-style: normal;     font-size: 18px!important;   }    .dropdown {     position: relative;     display: inline-block;   }    .dropdown-content {     display: none;     position: absolute;     background-color: white;     width: 100%;     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);     z-index: 1;   }    .dropdown-content a {     color: darkcyan!important;     padding: 10px 10px;     text-decoration: none;     display: block;     font-family: Arial, Helvetica, sans-serif;     font-style: normal;     font-size: 14px;   }    .dropdown-content a:hover {     background-color: lightgrey;   }    .dropdown:hover .dropdown-content {     display: block;   }    .dropdown:hover .dropbtn {     color: white;     background-color: rgb(14, 120, 197);   } </style> <div class="dropdown" dir="ltr"><button class="dropbtn"><span style="color: rgb(255, 255, 255);" background-color:="background-color:" rgb="rgb">... London</span></button>   <div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank">Link2</a> <a href="#" target="_blank">Link3</a></div> </div> <div class="dropdown" dir="ltr"><button class="dropbtn">... Paris</button>   <div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a> <a href="#" target="_blank"> Link 5</a> <a href="#" target="_blank"> Link 6</a></div> </div> <div class="dropdown" dir="ltr"><button class="dropbtn">... Rom</button>   <div class="dropdown-content"><a href="#" target="_blank">Link 1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a></div> </div> <div class="dropdown" dir="ltr"><button class="dropbtn">... Madrid</button>   <div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" target="_blank"> Link 4</a> <a href="#" target="_blank=&quot;_blank&quot;"> Link 5</a></div> </div> <div class="dropdown" dir="ltr"><button class="dropbtn">Berlin</button>   <div class="dropdown-content"><a href="#" target="_blank">Link1</a> <a href="#" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a> <a href="#" _blank="_blank" target="_blank"> Link 4</a> <a href="#" target="_blank"> Link 5</a> <a href="#" target="_blank"> Link 6</a></div> </div> <div class="dropdown" dir="ltr"><button class="dropbtn">Wien</button>   <div class="dropdown-content"><a href="#" target="_blank">Link1.</a> <a href="#" _blank=" target=_blank" target="_blank"> Link 2</a> <a href="#" target="_blank"> Link 3</a></div> </div><br /> <table style="border-collapse: collapse; width: 100%; height: 126px;" dir="ltr" border="1">   <tbody>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>     <tr style="height: 18px;">       <td style="width: 100%; height: 18px; border-color: rgb(255, 255, 255); border-style: solid;"><br /></td>     </tr>   </tbody> </table><br /><br /><br /><br /><br /><br /><br /> <div dir="ltr" align="left-centered">   <marquee direction="left" loop="15" scrollamount="1" scrolldelay="2" behavior="alternate" bgcolor="white" width="93%">     <font size="5" color="red">Latest news</font>   </marquee> </div>

mensmaximus

Zitat von qyubert

weil ich es nicht besser kann.

Dann must Du Dich damit tiefer beschäftigen. Ein Code wie dieser:

Code

[COLOR=#333333]<span style="color: rgb(255, 255, 255);" background-color:="background-color:" rgb="rgb">[/COLOR]

Kann nicht funktionieren.

qyubert

Ok, aber es geht ja jetzt erst mal nicht primär darum, dass der Code an der Stelle nicht funktioniert (auf dem Lifesystem funktioniert es, ich kann aber hier nicht verlinken, weil es ein Intranetseite ist), mir ist nur momentan wichtig, die Dropdown-Menus in unterschiedlichen Farben zu haben...
ich bin auch kein Programmierer oder so. Ich habe nur die Aufgbae bekommen, die Dropdowns auf der Intranetseite an das neue Unternehmenssytyleguide anzupassen. Und da komme ich halt nicht weiter.

Auf dem Screenshot unten sieht man, wie es derzeit aussieht: alle Dropdowns sind blau, sie sollen aber unterschiedliche Farben erhalten.

mensmaximus

Wenn Du das so weitermachen willst, must Du jedem Button eine eigene Hintergrundfarbe geben, denn aktuell werden alle mit einer Regel auf Blau gestellt:

Code

.dropbtn {
background-color: rgb(8, 66, 126);
}

Also fügst Du weitere Inline CSS Regeln hinzu:

Code

<button class="dropbtn" style="background-color:ff0000">... Paris</button>
<button class="dropbtn" style="background-color:ff9900">... Rom</button>

usw.

Aber wie gesagt, Inline CSS macht man eigentlich nur in Ausnahmefällen.

qyubert

Vielen Dank mensmaximus,
sagst Du mir bitte noch; an welcher Stelle meines html-Codes muss ich

Code

[COLOR=#333333]<button class="dropbtn" style="background-color:ff0000">... Paris</button>[/COLOR]
[COLOR=#333333]<button class="dropbtn" style="background-color:ff9900">... Rom</button>[/COLOR]

[COLOR=#333333]
[/COLOR][COLOR=#333333]usw.[/COLOR] eingeben?

Dann probiere ich es nachher gleich aus.

Vielen Dank!

mensmaximus

Zitat von qyubert

sagst Du mir bitte noch; an welcher Stelle meines html-Codes [...]

An der selben stellen an der der Code schon steht - wo denn sonst?

qyubert

Vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Dropdown-Boxen nebeneinander / untereinander und in verschiedenen Farben

Jetzt mitmachen!