hallo , I to try the Color from Hover short to making , how the screenshot to show , the Color from left side on the Word Computer is outside from the Window
My question … what can i to do and it short to making…
Can Please anyone help me , Thanks !
Do you have the actual HTML/CSS up somewhere we can see it? Codepen, repl.it, anywhere?
yes my Css Code;
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;
}
my 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>
So what do you mean by “short to making?” I mean, what is it that you WANT it to do, as opposed to what it’s doing?
So what do you mean by “short to making?” I mean, what is it that you WANT it to do, as opposed to what it’s doing?
yes
because the Color from the left side , outside from Window it is , I will that it short to making…
Without the rest of your code (with just the HTML you provided), it seems to be fine.Take a look at this codepen. I would guess that one of the containers, perhaps your nav, is set to a left margin of zero or less.
Best trick I can suggest, use the Developer Tools in the browser of your choice, and inspect the UL element. Doing so will show you any margins or padding it, or any of its parents, have.
I would guess that one of the containers, perhaps your nav, is set to a left margin of zero or less.
but my problem is not on Nav but in #externalLinks …
My Code from Codepen
Your problem show on #externalLinks, but it’s a problem on the body – as you’ve set that to a grid, try giving the body a bit of padding-left. that will bump the externalLinks (and the nav) slightly into the page area.
try giving the body a bit of
padding-left. that will bump the externalLinks (and the nav) slightly into the page area.
I have to try with ;
#externalLinks ul {
list-style-type: none;
margin: 5px;
padding: 0px;
margin-left: -12px;
}
but without success ,
very thanks , what can does and this problem to solve ?
so why are you giving that a negative margin? Do you WANT it to start outside the view area?
Not , because with positive number not working i think maybe with negative …
From what I’m seeing, you have your margin set to -12 with no unit. Which won’t actuallyl work.
Try this for a margin on that, tell me if its closer to what you’re trying to do: margin: 0 -12px;
Honestly, I have a feeling this is a communication gap – I’m not sure if you’re trying to move the text further to the left, or the container a little to the right,or what exactly it is you’re looking for here.
when write;
#externalLinks ul:hover {
padding-left: 10px;
}
to move the word… but i will to move the color from left side … i will the place from #externalLinks short to making ,and them place give to main Tag…