CSS kérdésem van

[jagdtigger]

Nem nagyon értek a kód lelki világához de a My Animelist alap kinézetei nem valami jók viszont van lehetõség arra hogy sajétot csinálj, így utánanéztem pár dolognak de valami sehogy se akar sikeredni. Ezt a kódot adom be az oldalnak:

/*
// Self-explanatory
*/
BODY
    {
    margin: 0;
    color: #FFFFFF;
    font-size: 11.00px;
    font-family: Verdana, Arial;
    background-image: url("http://dl.dropbox.com/u/1201829/ghost_in_the_shell2.jpg";
    background-color: none;
    }

/*
// Determines the positioning of your list
*/

#list_surround
    {
    margin: 0 auto;    
    width: 920px;
    }

/*
// All links on your list
*/

a
    {
    color: #FFFFFF;
        text-decoration: underline;
    }

a:visited
        {
        color: #FFFFFF;
        text-decoration: underline;
        }

a:hover
    {
    color: #FFFFFF;
    text-decoration: none;
    }

/*
// Alternating row color 1 
*/

.td1
    {            
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none; 
    }
   
/*
// Alternating row color 2 
*/

.td2
        {            
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none; 
    }
   
/*
// This represents the "Anime Title", "Score", "# Eps" columns 
*/
   
.table_header
    {            
    color: #FFFFFF;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    background-color: none;
    padding: 2px;
    }
    
/*
// headerLink represents the color of the links inside the table_header 
*/
    
.table_headerLink
    {
    color: #FFFFFF;
        }

.table_headerLink:Visited
    {
    color: #FFFFFF;
    }

.table_headerLink:Hover
    {
    color: #FFFFFF;
    }

/*
// Controls the select form decoration (the drop down select box)
*/

.form
    {
    border: 1px solid #FFFFFF£;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
        border-style: solid;
    color: #FFFFFF;
    padding: 2px;
    font-size: 11.00px;
    font-family: Verdana, Arial;
    }
        

/* Which 'status' up top is selected? */

.status_selected
    {
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none;
    }

.status_not_selected
    {
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none;
    }

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_cw
    {

    }

.header_completed
    {

    }

.header_onhold
    {

    }

.header_dropped
    {

    }

.header_ptw
    {

    }

.header_title {
    font-size: 14px;
    font-weight: bold;
    }


.category_totals
    {

    }

#grand_totals
    {
    text-align: center;
    }

/* header_al is the div surrounding "User's Anime List" at the top */

.header_al
    {
    font-weight: bold;
    font-size: 16px;
}

/* header_al_links is the div with your "Profile" and "MyAnimeList home" links */
.header_al_links
    {

    }

/* controls what styles you can give to all the anime titles in your list */
.animetitle
    {
    font-weight: none;
    }

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright
    {
    padding-top: 6px;
    text-align: center;
    margin: 0 auto;
    width: 920px;
    }

De amikor megnézem hogy milyen lett akkor a hátteret nem hozza be, a css kód meg így néz ki:

/*
// Self-explanatory
*/
body
    {
    
    color: #FFFFFF;
    font-size: 11.00px;
    font-family: Verdana, Arial;
    background-image: url("http://dl.dropbox.com/u/1201829/ghost_in_the_shell2.jpg");
    background-color: none;
    }

/*
// Determines the positioning of your list
*/

#list_surround
    {
    margin: 0 auto;    
    width: 920px;
    }

/*
// All links on your list
*/

a
    {
    color: #FFFFFF;
        text-decoration: underline;
    }

a:visited
        {
        color: #FFFFFF;
        text-decoration: underline;
        }

a:hover
    {
    color: #FFFFFF;
    text-decoration: none;
    }

/*
// Alternating row color 1 
*/

.td1
    {            
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none; 
    }
   
/*
// Alternating row color 2 
*/

.td2
        {            
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none; 
    }
   
/*
// This represents the "Anime Title", "Score", "# Eps" columns 
*/
   
.table_header
    {            
    color: #FFFFFF;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    background-color: none;
    padding: 2px;
    }
    
/*
// headerLink represents the color of the links inside the_header 
*/
    
.table_headerLink
    {
    color: #FFFFFF;
        }

.table_headerLink:Visited
    {
    color: #FFFFFF;
    }

.table_headerLink:Hover
    {
    color: #FFFFFF;
    }

/*
// Controls the select form decoration (the drop down select box)
*/

.form
    {
    border: 1px solid #FFFFFFÃ���;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
        border-style: solid;
    color: #FFFFFF;
    padding: 2px;
    font-size: 11.00px;
    font-family: Verdana, Arial;
    }
        

/* Which 'status' up top is selected? */

.status_selected
    {
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none;
    }

.status_not_selected
    {
    color: #FFFFFF;
    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #FFFFFF;
    padding: 2px;
    background-color: none;
    }

/*
Header classes for Currently Watching, Completed, Dropped, etc...
*/

.header_cw
    {

    }

.header_completed
    {

    }

.header_onhold
    {

    }

.header_dropped
    {

    }

.header_ptw
    {

    }

.header_title {
    font-size: 14px;
    font-weight: bold;
    }


.category_totals
    {

    }

#grand_totals
    {
    text-align: center;
    }

/* header_al is thesurrounding "User's Anime List" at the top */

.header_al
    {
    font-weight: bold;
    font-size: 16px;
}

/* header_al_links is thewith your "Profile" and "MyAnimeList home" links */
.header_al_links
    {

    }

/* controls what styles you can give to all the anime titles in your list */
.animetitle
    {
    font-weight: none;
    }

/*
copyright contains the "Producted by Garrett Gyssler" text
DO NOT REMOVE OR HIDE THIS DIV
IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
*/

#copyright
    {
    padding-top: 6px;
    text-align: center;
    margin: 0 auto;
    width: 920px;
    }

Párszor átnéztem az eredetit de hibát nem láttam benne, minden átnézés után ugyanaz a hiba, nuku háttérkép, szerintetek mit rontok el?

[Pjotr]

body {
    margin: 0;
    color: #FFFFFF;
    font-size: 11.00px;
    font-family: Verdana, Arial;
    background: url('http://dl.dropbox.com/u/1201829/ghost_in_the_shell2.jpg');
}

 

Mivel szerkesztetted te ezt a css fájlt?

[jagdtigger]

Notepad++, miért?

 

SZERK

A weboldal másképp nem is engedi, elmenteném a -image nélkül visszaírja . Ok átírta, úgy néz ki van egy kis fáziskésése de még mindig átírja a háttér linkjét .

[payskin]

Gyorsan átfutva:

 

1. A bodyban a background végéről hiányzik a záró zárójel, és az url()-en belül nem használunk idézőjelet!

 

2. A fontméret beállításnál teljesen felesleges a két tizedesjegy, ha pixelben adod meg a méretet. Elég egyszer beállítani a betűméretet.

 

3. A background-colornak nincs none értéke! Vagy szín, vagy transparent.

 

4. A .form-ban az összevont bordernél hiba van a szín megadásánál, valamint felesleges utána a három további border-definíció, hiszen az összevont azokat tartalmazza.

 

 

[jagdtigger]

Köszi . Ez nagyon nagy segítség volt. Ami a kódot illeti magamat ismerve biztos hogy az egyszerûségre törekednék(még ha több mint 1 órán át kell keresgélnem a szükséges dolgokért ), de sajnos nem rajtam áll a dolog, idióta weboldal a saját alap beállításait teszi be ha valamit kihagyok .

[Kiskalóz]

Adott 1 üres oldal benne egy 500x200as div

hogyan tudnám vertikálisan és horizontálisan is középre igazítani.

 

margin auto; nem válik be

 

[payskin]

Vertikálisan nem tudod, css nem tud vertikálisan középre igazítani (nem, a vertical-align nem az!). Vízszintesen viszont simán, tehát egy

 

margin: akármennyi auto

mûködnie kell!

[Kiskalóz]

Valahogy sejtettem.. elég sokat keresgéltem és sehol semmi.. azt hittem bénán keresek..

[advanced]

Sziasztok! Sokszor lerágott csont a kérdésem....

Egy már mûködõ website-on szeretném fejleszteni a megoldást a "rounded buttons" körül....

El is készítettem egy nagyon egyszerû template-et hozzá.

A cross-browser tesztrõl készített screenshot itt látható.

 

Szeretném megoldani, hogy a különbözõ elemek (input, anchor, span, stb.) - újra felhasználható css segítségével az összes browser-en 99%-ban egyformán nézzenek ki (IE eltekinthet a shadow-tól).

A "rounded buttons" különbözõ színûek, különbözõ icon-t kell, hogy hordozhassanak, kölönbözõ font-color és font-size tulajdonságuk van néha.

Ez majdnem mind sikerül is, rém egyszerû CSS3 segítségével.

 

DE... Eddig a "border-radius.htc" használatát gondoltam legjobb megoldásnak arra, hogy IE is nagyjából hasonlóan mûködjön mint az összes többi browser. De még mindig nem sikerült megoldanom az iconok megjelenítését IE-n.

A border-radius.htc -ben található

fill.type = 'solid';

-ot próbáltam változtatni ez alapján - de nem találtam megfelelõ megoldást.

A

fill.type = 'tile';

ezt eredményezi.

A másik probléma az, hogy IE6 browser-en az input teljesen másképp viselkedik mint az összes többi browser.

(screenshot bal alsó)

Rém hálás lennék mindenféle ötletért. Talán valakinek van jobb ötlete IE megoldásra mint a htc file vagy valaki tud megoldást arra, hogyan változtassam ezt a htc file-t.

 

/*************************************************/

Közben elkészítettem egy másik variációt ami megoldás lehet, de várok hátha van jobb ötlete valakinek. Ebben a második variációban az input köré tettem egy "span"-t, az anchor-ba pedig helyeztem egy "strong"-t - s mindkét esetben ami kívül van az kapja a rounded corners-t és ami belül van az kapja az icon background image-t. S mindez csak IE miatt.... Mindegy, ez a megoldás máris ezerszer jobb mint ami a live site-on található, de a legjobbat akarom ha már ekkora változtatást készítek elõ.

Edited December 5, 2010 by advanced

[kléni]

Legegyszerűbb megoldás, ha egy előre elkészített háttérképet csinálsz, mivel IE alatt nem lehet kerekíteni a sarkokat (legalábbis még nem láttam a websuliban ). Ebben az esetben árnyékolást is tudsz csinálni.

[advanced]

Ami a különbözõ icon-okat illeti, feltétlenül image sprite-ot fogok alkalmazni. De a rounded corner eléréséhez nem akartam image-et használni, sem extra html tag-eket. Talán a legbarátibb a második megoldás lesz ahol végül is mindenki megkapja ami jár neki a különbözõ böngészõkön. Figyelembe kell venni az accessibility követelményt is miszerint fel és le 2 lépés betûméret változtatás mellett biztosítani kell a törésmentes és olvasható tartalmat (jelen esetben az input value és a link text).

Még keresgélek, de nem találtam jobb ötletet. Mindenképp fejlõdés már így is.

[arpsoft]

Ezt a kérdést több helyre is írhattam voilna, de talán itt fog megszületni leghamarabb a megoldás.

Van egy form, amiben vannak jobbra rendezett mezõk. Ezek szépen mûködnek is egészen addig, amíg nem IE8 alól (a többi IE-t nem néztem még) használja az ember. Tudnillik olyankor elveszik a kurzor. A fókusz rákerül a mezõre, de a user nem hiszi el, hogy gépelhet, mert nem látszik a kurzor.

 

A mezõhöz tartozó css (alapesetben jobbra van rendezve minden):

input{
  font-size: 12px;
  color: #698e4f;
  border: 1px solid;
  border-color: #698e4f;
  text-align: right;
}

Ezen kívül a mezõnél egy size és egy maxLength van megadva, mindkettõ 20.

Arra is gondoltam, hogy az azonos szöveg és keret szín az oka, de nem.

[Garono]

cursor: text;

?

[arpsoft]

Sajnos nem segített.

[Giraffe1]

Érdemes lenne egy kis (1-2px-es) vízszintes paddinggal megpróbálkozni, mert lehet, hogy a keretre tapad rá a kurzor.

[arpsoft]

Ez jó! Kapott egy ilyet:

padding-right: 1px;

és meggyógyult. De ez megint csak egy olyan dolog, amit az IE-re kell szabni.

[payskin]

Igen, de azért, mert a CSS hagyatkozik a böngészõk saját stíluslapjára.

 

Nem kéne.

 

Resettel kéne indítani, és mindent normálisan definiálni, így nagyságrenddel csökkenthetõ a böngészõk közötti különbség.

[arpsoft]

Mit tegyek még bele?

*{
  padding: 0px;
  margin: 0px;
  border: 0px;
}

Mert ezek szerint ennyi nem elég.

[Pjotr]

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent no-repeat;
}

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

 

Balázsnál leltem.

[arpsoft]

Beraktam, de nem oldotta meg a problémát. Ha kiveszem a padding-right-ot, akkor nincs kurzor IE alatt.

[kléni]

IE8 alatt ugyan ott látszik nekem a kurzor, mint FF alatt, pontosan a keret mellett szorosan, a különbség annyi, FF-ben zöld színû. Nem lehet, hogy kívülrõl hat rá valamit?

[payskin]

Beraktam, de nem oldotta meg a problémát. Ha kiveszem a padding-right-ot, akkor nincs kurzor IE alatt.

Nem jól közelíted meg a dolgot. A reset nem azt oldja meg, hogy padding-right nélkül is legyen kurzor, hanem azt, hogy (elméletileg*) minden böngészõben kell a padding-right, hogy látható legyen a kurzor, tehát helybõl így tervezed az input mezõdet, és nem futsz bele problémába.

 

*Gyakorlatilag lehet, hogy mégsem kell minden böngészõben. A form elemek a legjobban elcseszett dolgok az egész weboldalhistóriában. Ettõl én még simán beleraknám az input CSS definíciójába, hogy legyen paddingja.

[arpsoft]

Chrome alatt most van egy pixel lyuk a keretig, az IE alatt meg a keret mellett villog, hézag nélkül. Gondolom, amikor nincs padding, akkor az IE a keret 'alá' rakja a kurzort, ezért nem látom. Viszont ez nem logikus, mert ha balra van rendezve, akkor meg padding nélkül is látszik, ahogy kell, közvetlenül a keret mellett.

Mindegy, beletörődtem, benne marad a padding.

[Giraffe1]

Alapértelmezés szerint a böngészõk saját grafikus elemeikkel jelenítik meg az összes ûrlapelemet – aminek eredménye, hogy gyakorlatilag nem lehet komolyabb programozás nélkül egységesen kinézõ ûrlapokat készíteni –, ráadásul néha igen érdekesen értelmezik a különbözõ beállításokat. Pl. igen érdekes néz ki egy rádiógomb az input { border: 1px solid blue; } után Firefox alatt.

Nagy a valószínûsége, hogy van egy 1-2 pixeles csúszás IE alatt a grafikában, és emiatt tûnik el a jobbra igazított bevitelnél a szövegkurzor. Ma már igen sok lehetõség van arra, hogy IE-specifikus CSS-kiegészítéseket tegyünk, így a probléma viszonylag egyszerûen megoldható...

[bdavis85]

Sziasztok!

 

Egy vertikális drop down menüt szeretnék készíteni, csak egy kis problémába ütköztem .

Mégpedig. Kész a menü elsõ szintje (ez látszik elõször). Amint olyan menüpontra érek, aminek van almenüje, elõugrik az. Itt van a probléma. Amint egy ilyen pontra érek, nem csak az õ almenüje jelenik meg, hanem az al-al menük is ír: . Pedig ugyan úgy írtam meg a css-t az al-al menükre is, mint az almenükre.

Nem tudom, hogy hol lehet a hiba .

Mellékelem a forráskódot.

Köszönöm a segítséget elõre is!

 

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Honlap címe</title>

  <style type="text/css">
    #navigation {
        width:165px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
    }
    
    #navigation ul {
        margin:0px;
        padding:0px;
        background-color:#1584cc;
    }
  
      #navigation ul li {
        height:25px;
        line-height:25px;
        list-style:none;
        padding-left:10px;
        cursor:pointer;
        border-top: 1px solid #59a9dd;
        border-bottom: 1px solid #1584cc;
        background-color: #1584cc;
        display: block;
        color: #fff;
    }  

    #navigation ul li:hover {
        position:relative;
        border-bottom: 1px solid #08324d;
        background-color: #106399;
        color:#000;
        text-align:center;
    }
    
    #navigation ul ul {
        display:none;
        position:absolute;
        left:165px;
        top:0px;
        border:#fff solid;
        border-width:1px;
        background-color:#999;
    }  

    #navigation ul li:hover ul {
        display:block;
    }
    
    #navigation ul ul li {
        width:135px; 
        float:left; 
        list-style:none;
        padding-left:10px;
        cursor:pointer;
        border-top: 1px solid #59a9dd;
        border-bottom: 1px solid #1584cc;
        background-color: #1584cc;
        text-align: left;
        color: #fff;
    }
    
    #navigation ul ul li:hover {
        position:relative;
        border-bottom: 1px solid #08324d;
        background-color: #106399;
        color:#000;
        text-align:center;
    }
    
    #navigation ul ul ul{
        display: none;
        position: absolute;
        left: 145px;
        top: 0px;
        border: #fff solid;
        border-width: 1px;
        background-color: #999;
    }  

    #navigation ul ul li:hover ul {
        display:block;
    }
    
    #navigation ulul ul li {
        width:135px; 
        float:left; 
        list-style:none;
        padding-left:10px;
        cursor:pointer;
        border-top: 1px solid #59a9dd;
        border-bottom: 1px solid #1584cc;
        background-color: #1584cc;
        text-align: left;
        color: #fff;
    }
    
    #navigation ul ul ul li:hover {
        position:relative;
        border-bottom: 1px solid #08324d;
        background-color: #106399;
        color:#000;
        text-align:center;
    }
  </style>
</head>

<body>
<div id="navigation">
    <ul>
        <li>Menü 1</li>
        <li>Menü 2 +
            <ul>
                <li>Almenü 1</li>
                <li>Almenü 2</li>
                <li>Almenü 3</li>
            </ul>        
        </li>
        <li>Menü 3</li>
        <li>Menü 4 +
            <ul>
                <li>Almenü 4</li>
                <li>Almenü 5 +
                    <ul>
                        <li>Al-Almenü 1</li>
                        <li>Al-Almenü 2</li>
                        <li>Al-Almenü 3</li>
                    </ul>
                </li>
                <li>Almenü 6</li>
                <li>Almenü 7</li>
                <li>Almenü 8</li>
                <li>Almenü 9 +
                    <ul>
                        <li>Al-Almenü 4</li>
                        <li>Al-Almenü 5</li>
                        <li>Al-Almenü 6</li>
                        <li>Al-Almenü 7</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Menü 5</li>
    </ul>
</div>
</body>
</html>