nicht angemeldet liebewinter
Rolf B
liebewinter
Rolf B
liebewinter
Rolf B
liebewinter
Rolf B
hallo , ich versuche die Farbe der mit Hover bekomme auf dem Linke seite , kurze zu machen , wie auf dem screenshot zeigt , auf den Wort Computer , wird die Farbe
aus dem Fenter gezeigt..
Kannt bitte jemand hilfe und dieser Probleme zu lösen , Danke !
Ohne Beispiel bzw Code wird es schwer. Keiner weiß wie dein Code derzeit ausschaut.
sorry .. my code von codepen....
Mein Css Code:
body {
display: grid;
display: -ms-grid;
background-color: #ebf5d7;
grid-gap: 5px;
grid-template-columns: 9% 73% 17%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
body > header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/f409784856.png");
background-repeat: no-repeat;
padding: 80px;
margin-bottom: -8px;
}
body > nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
body > #externalLinks {
grid-area: linkBox;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 5;
grid-template-columns: 1;
grid-template-rows: 3/4;
margin: 1px;
background-color: #d2f3c6;
}
body > main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #eaf6e5;
}
body > #furtherInformation {
grid-area: infoBox;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
body > footer {
grid-area: footer;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 6;
-ms-grid-row-span: 6;
background-color: #99ee7a;
}
/* Nav */
nav {background-color: #d2f5c4;}
nav a{
color: black;
text-decoration: none;
display: inline;
padding: 0px 8px;
font-size: 17px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
nav ul {list-style-type: none;}
nav li {display: block;display:inline-block;}
/* ExternalLinks */
#externalLinks a {
text-decoration: none;
display: block;
text-align: center;
font-size: 15px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0;
margin: -12;
}
#externalLinks li{float: left}
/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */
li a, .dropbtn {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {background-color: #f1ebeb;}
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 160px; /* macht größer die Inneren Links */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none; /* Bekomme die Liks keine Unten Stricht ....*/
display: block;
}
.dropdown-content a:hover {
background-color: #9f9e9e;
}
/* Offnen die Innere Links */
.dropdown:hover .dropdown-content {
display: block;
left: 9em; /* zeigt wo dem innere link fenster gezeigt wird */
top: 20em; /* zeigt wo dem innere link fenster gezeigt wird */
}
/* Main */
input, textarea{
background:#d9d9d9;
border:1px solid rgba(220,220,220,0.75);
font:inherit;
border-radius:0.2941em;/*5px;*/
padding:0.4118em;/*7px;*/
/*farbigen Rahmen in Chrome und Safari abschalten.*/
outline:none;
}
input:focus, textarea:focus{
background:#fff;
border:1px solid #000;
outline: none; /* einige Browser add line auf input , das verhindert es... */
}
input[type=submit]{
background:#be633c;
border:none;
color:#fff;
border-radius:50% 50%;
box-shadow:inset 0 0 1em #fb9d23;
padding:0.5882em;/*10px*/
}
input[type=submit]:focus, input[type=submit]:active{
background-color:#A33202;
}
/* Footer */
#copry {
overflow: auto;
font-size: 10px;
list-style-type: none;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
}
#img1 {float: left; margin: 5px; }
#copry a {text-decoration: none; margin-bottom: 3px;}
#copry p {font-size: 10px; margin-bottom: 0px; }
/* Komment Button */
#comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
#comment {font-size: 11px;} /* Button from comment */
#form {font-size: 14px;} /* size from comment window */
#adderiren { /* Farbe für 'Add a new comment' */
width: 50px;
color:#006600;
padding: 8px 0px 5px 5px;
}
Meine html code;
<aside id="externalLinks">
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
</aside>
ich habe auch versuche Ein Bissen mit Padding zu machen , so..
#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0px;
margin-left: -12px;
}
aber ohne erfolgt...
Hallo liebewinter,
ich versuche die Farbe der mit Hover bekomme auf dem Linke seite , kurze zu machen
es tut mir leid, aber diese Beschreibung verstehe ich nicht. Das ist sehr merkwürdig formuliert, ich weiß nicht was Du meinst. Ich weiß, dass Dein Deutsch nicht so gut ist, bitte versuche mal, das anders zu formulieren.
Was ist das Problem? Die falsche Farbe? Die Größe des grauen Rechtecks?
Einen Fehler sehe ich: Das <li>, das <a>Computer</a> enthält, hat kein </li>. Vielleicht ist das schon das Problem.
Denke auch an die Leute mit Tastatur. Nicht jeder Anwender kann :hover erzeugen. Du musst auch :focus unterstützen.
Rolf
Hallo,
schau mal ins Beispiel:
https://codepen.io/mezb/pen/rPaeaR
Wenn du mit der Maus über Computer fährst geht der Hover links über den Rand und dieses soll soweit ich es verstanden haben behoben werden.
das ist das Problem....
Versuch es mal mit diesen beiden neuen Angaben
.dropdown a {
padding-left: 0;
}
li.dropdown {
margin-left: 12px;
}
Ich weiß, dass Dein Deutsch nicht so gut ist, bitte versuche mal, das anders zu formulieren.
Viel Danks ! , versuche es...
ich versuche der Größer(die Farbe) von meinem Hover , kleine auf linke seite machen...
Was ist das Problem? Die falsche Farbe? Die Größe des grauen Rechtecks?
wie mein Screenshot von Oben sehen kannst , die Hover Farbe auf linke Seite ist ausßen von dem Fenster , deshalb möchte ich die Hover Farbe auf linke Seite , kurze machen... Gestern habe 10 Stunden gegeben um dieser probleme zu lösen , aber ohne erfolgt ☹
Einen Fehler sehe ich: Das <li>, das <a>Computer</a> enthält, hat kein </li>. Vielleicht ist das schon das Problem.
jetzt habe so gemacht..
<ul>
<li class="dropdown">
<a href="#" class="dropbtn">Computer</a>
<div class="dropdown-content">
<a href="windows.php">Windows</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Bucher</a></li>
</ul>
aber das probleme bleibt....
Denke auch an die Leute mit Tastatur. Nicht jeder Anwender kann :hover erzeugen. Du musst auch :focus unterstützen.
Nach ich dieser Probleme lösen , ende meine Media Query , und der nächste Schritte wird Touchscreen... ☺️
Hallo ,
Hover Farbe auf linke Seite ist ausßen von dem Fenster
Entschuldige. Meine Brille taugt wohl nicht mehr. Und ich müsste sie mal wieder aufsetzen. In den Pen habe ich nicht hineingeschaut und im Screenshot habe ich es nicht gesehen.
Vermutlich hat Bernd recht, dass die negativen Margins zum Problem führen.
Rolf
und was kann mache um der Text ganz linke zu bringen ?
ich habe versuche mit float: left; aber der text bleibt in der Mitte ..ich möchte der frei Platz vom Tag <aside> zu <mein> Tag bringen..
Hallo ... Joseba? (sagt CodePen :) ) ,
in solchen Fällen öffnet man die Entwicklerwerkzeuge und schaut das Element an, das sich falsch verhält.
Ohne float:left sind die Texte in der Mitte, richtig, das liegt daran dass Du
#externalLinks a {
text-align:center;
}
geschrieben hast. Mit dem float sind die Menüpunkte nicht mehr untereinander, das ist auch schlecht.
Wenn Dich dieses center stört, dann lass es einfach weg. Wenn Du nur die Menüpunkte des dropdown-Menüs zentrieren willst, dann setze
.dropdown-content a {
text-align:center;
}
Statt display:inline-block in der Navigation könntest Du auch display:flex auf nav ul setzen.
Die Klassen "dropdown" und "dropbtn" brauchst Du nicht, wenn ich das richtig sehe. Statt dessen einfach li und a verwenden; eventuell noch #externalLinks davor schreiben.
Statt <div class="dropdown-content"> könnte man überlegen, <ul class="dropdown-content"> zu schreiben und die a Elemente in <li> zu kapseln. Es ist eine Liste von Menüpunkten. Was ist, wenn das CSS nicht geladen wird? Dann soll das ja auch wie eine Liste aussehen. Dein CSS reicht völlig aus, das muss dafür nicht geändert werden.
Rolf
Hallo ... Joseba? (sagt CodePen :) )
ja , ich heiße Joseba…
ich bedanke mich dir für deine bemüht ! , ich bin seit zwei Tage mit diesem Probleme , und habe "Ein Bissen" gesucht , ich denke gibt es keine lösung auf meiner Probleme , das ist , etwas der macht die hover Farbe seine größer zu verendert... , deshalb und wie ich denke ist nicht so "Traumatische" wie meine website aussiehst , ich möchte so lasen....
Ich wünsche dir eine schöne Wochenende !
Hallo Joseba,
wieso gibt es keine Lösung? Wenn Du das hier im Codepen änderst:
text-align: center; entfernenmargin: 0 -12px; ändern zu margin:0;dann ist es doch was Du brauchst, oder?
Rolf
dann ist es doch was Du brauchst, oder?
jaaaaaaaaaa , viellllllll Danks !
ich wünsche dir eine schöneeee Wochenende !!