ugrás a tartalomhoz

CSS probléma

bnc1995 · 2012. Jan. 26. (Cs), 20.09
Sziasztok!

Keret sarkait szeretném kerekíteni. A kerekítéssel nincs is baj, de a háttér kilóg a sarkaknál. Mi a megoldás?

Segítségeteket előre is köszönöm: bnc
‹ Xml dokumentum és JQuery vs JS Osztály és saját funkciók CSS leírások ›
 ■
1

A megoldás

Hidvégi Gábor · 2012. Jan. 26. (Cs), 20.13
a józan paraszti ész. Használd!
2

:S

bnc1995 · 2012. Jan. 26. (Cs), 21.41
Nem jön a szikra:S:S
3

kerekíts mindent...

Arnold Layne · 2012. Jan. 26. (Cs), 21.54
Kerekíts mindent, ami a "kereten" belül van. A keret kerekítése nem érvényes a benne lévő elemekre. Ellenben mondjuk a betű méretével. Amúgy meg firebug -- vagy valami hasonló -- van? Sokat tud segíteni ilyen helyzetben.
8

Ha a suliban a

Hidvégi Gábor · 2012. Jan. 27. (P), 10.04
Ha a suliban a történelemtanárnő azt a feladatot adja, hogy próbaérettségire dolgozd ki mondjuk a Rákóczi-féle szabadságharcot, és nem megy fejből, akkor hogyan oldanád meg a problémát?
9

Utána néznék a neten

bnc1995 · 2012. Jan. 27. (P), 10.26
Ennek is utána néztem, de nem találtam semmit:S
10

Hogyan néztél utána? A

Hidvégi Gábor · 2012. Jan. 27. (P), 10.32
Hogyan néztél utána? A kérdésedre négy válasz jött, tehát legalább ennyi embernek korábban sikerült találnia valamit a hasonló kérdésére. És ezt most ne vedd cseszegetésnek, rá szeretnélek vezetni a helyes módszerre.
11

Google

bnc1995 · 2012. Jan. 27. (P), 13.14
A Google-n néztem utána. Általában ott kezdem a keresést, vagy itt a weblaboron. Én is jobban szeretem, ha magamtól jövök rá dolgokra, mert így jobban bennem marad, és nagyobb a sikerélmény.
4

Leírod pontosan?

Poetro · 2012. Jan. 26. (Cs), 21.59
Leírod pontosan, mi is a probléma? Mert én csináltam egy HTML-t, amiben nem lóg ki a háttérkép sarka.
<!DOCTYPE HTML>
<html lang="en">
<head>
  <title><!-- Insert your title here --></title>
  <style type="text/css">
    .rounded {
      background: lightblue url(http://users1.ml.mindenkilapja.hu/users/britneyspears-vbarby/uploads/britney-spears-hairstyle-64_.jpg) center center no-repeat;
      width: 500px;
      height: 357px;
      line-height: 357px;
      font-size: 5em;
      color: white;
      border-radius: 20px;
      -moz-border-radius: 20px;
      -webkit-border-radius: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="rounded">Lorem ipsum</div>
</body>
</html>
5

html

bnc1995 · 2012. Jan. 26. (Cs), 22.09
<html>
     <head>
          <title></title>
          <style type="text/css">
		  li {
			  list-style-type: none;
			  text-align: center; 
		  }
		  
		  a:link {
			  color: #0000FF;
			  text-decoration: none;
			  padding: 0px 5px;
		  }
		  
		  a:visited {
			  color: #0000FF;
			  padding: 0px 5px;
		  }
		  
		  body ul li.menu {
			  float: left;
			  font-weight: bold;
			  background-color: #FF3300;
		  }
		  
		  body ul li ul {
			  display: none;
		  }
		  
		  body ul li:hover ul {
			  display: block;
			  margin: 0px;
			  padding: 0px;
			  border: 2px solid #0000FF;
			  border-top: 0px;
			  border-radius-bottomleft: 15px;
			  border-radius-bottomright: 15px;
			  -moz-border-radius-bottomleft: 15px;
			  -moz-border-radius-bottomright: 15px;
			  -webkit-border-radius-bottomleft: 15px;
			  -webkit-border-radius-bottomright: 15px;
			  background-color: #FF3300;
			  background-position: top left;
		  }
		  </style>
     </head>
     <body>
          <ul>
             <li class="menu">
                <a href="#">Kezdolap</a>
             </li>
             <li class="menu">
                <a href="#">Termékek</a>
                <ul>
                   <li>
                      <a href="#">...</a>
                   </li>
                   <li>
                      <a href="#">...</a>
                   </li>
                   <li>
                      <a href="#">...</a>
                   </li>
                </ul>
             </li>
          </ul>
     </body>
</html>
A probléma az, hogy ha ráviszed a kurzort a termékekre megjelenik egy almenü, ami be van keretezve, de a háttér kilóg a sarkaknál.
6

body ul li:hover {

Poetro · 2012. Jan. 26. (Cs), 22.21
body ul li:hover {
  background-color: transparent;
}
7

A background-clip a megoldás,

LeGaS · 2012. Jan. 26. (Cs), 23.45
A background-clip a megoldás, azon belül is a padding-box érték, ez akadályozza meg, hogy kilógjon a háttér.
https://developer.mozilla.org/en/CSS/background-clip