CSS: jak obniżyć obrazek? problem


(Mayerproject) #1

Witam,

otóż koduję sobie layout na portfolio. Jest to pierwszy kodowany przeze mnie layout od ostatnich dwóch lat. Przez ten czas wiedza pouciekała mi z głowy - i tutaj przez to napotykam problem.

Mam logo w lewym górnym rogu strony. I wstawiam pierwszy segment menu (czyli obrazek "strona główna") i spokojnie jest on już na swoim miejscu jeśli chodzi o pozycję względem osi X (czyli w poziomie). Zaś jeśli chodzi o położenie względem osi Y (czyli w pionie) to za chiny to nie chce ruszyć.

Na screenie wygląda to tak:

http://gallery.me.com/verex13#100006/ScreenShot001_1

Problem polega na tym, że zielony obrazek z napisem strona główna, ma być na poziomie napisu PORTFOLIO w logo.

Ani w logo, ani w tym "menu" nie działa mi komenda "top: X px". Nie wiem dlaczego, zawsze działało.

Podaję kod CSS:

body { background-image: url(background.png) }


.logo {

position:relative;

left: 0%;

top: 0%;

width: 384px;

height: 91px;

background-image: url(logo.png);

background-repeat: no-repeat;

float: left


}


.strgl {

position: relative;

left: 32%;

top: 15%;

width: 259px;

height: 39px;

background-image: url(str-gl.png);

background-repeat: no-repeat;


}

(kubut) #2

spróbuj margin-top. Jeśli nie zadziała to podaj może kod html, żebyśmy mogli sprawdzić jak masz to poustawiane w divach :wink:


(ziggurad) #3

Najlepiej daj linka do strony, można wtedy firebuga odpalić :wink:


(system) #4

Spróbuj tego narzędzia -> Layer Styles CSS Generator Creates Shadow, Background & Border Effects


(ziggurad) #5

To generuje kod CSSa?

Nigdy nie byłem za takimi wynalazkami. Nie wiem jak wygląda wygenerowany kod CSS ale pewnie później są problemy z edycją tego i dostosowaniem do większości przeglądarek :wink: A jak się klepie wszystko samemu można to później łatwo edytować :slight_smile:


(Mayerproject) #6

(system) #7

Sorry, ale ja potrafię Ci pomóc jedynie w taki sposób -> http://css-tricks.com/


(Drobok) #8

Co ty masz z tym position relative ? Ogólnie powinieneś zrobić diva menu a do niego wkładać te klasy z przyciskami. Potem wywalasz wszystkie relativy, left:0 co to kufa jest :slight_smile:

Ogólnie kod to jest totalny chaos. Po co ci float:left to menu, jak nie chcesz by przyciski były koło niego ? Daj se kontener do menu i do całości, napisz css do pozostałych klas bo jak nie masz szerokości to centrowanie ci nie zadziała. Od biedy możesz dać rysunek to ci powiem dokładniej co masz zmienić ;]

//edit, jednak dałeś rysunek sec :stuck_out_tongue:

To tak:

to co chcesz uzyskać (to co w tytule) dostaniesz wywalając śmieci i dodając margin-top:~50px

body {

    background-image: url("background.png");

}

body.background {

}

.logo {

    background-image: url("logo.png");

    height: 91px;

    width: 384px;

    float: left;

}

.strgl {

    background-image: url("str-gl.png");

    float: left;

    height: 39px;

    width: 259px;

}

.portfolio {

    background-image: url("portfolio.png");

    float: left;

    height: 35px;

    width: 159px;

}

.blog {

    background-image: url("blog.png");

    float: left;

    height: 36px;

    width: 85px;

}

#menu {

    height: 36px;

    width: 520px;

    float: left;

    margin-top: 50px;

}

#kontener {

    width: 950px;

    margin: 0px auto;

}

Natomiast cały html proponowałbym jw. Dodać kontener dla menu i dla całości (bo nie uzyskasz szarego tła obok, nie etc. Od siebie tylko powiem, cyferki dla kontenera i menu strzelałem, najlepiej mieć równą sumę reszty, ew piksel / dwa odstępu. A co do przycisków, to braknie ci miejsca przy takich dużych grafikach w stosunku do rozdzielczości by to tak zrobić jak na obrazku. A co do tła u mnie (1600/900) działa normalnie, po zmiejszeniu okna również. A co do samej grafiki bardzo długo się ładuje. Daj coś takiego uzyskasz podobny efekt co do twojego gradienta (tylko w przeglądarkach obsługujących css3)

background-color:#f2f5f5;

background-image: -moz-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);

background-image: -webkit-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);

background-image: -o-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);

background-image: -ms-radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px);

background-image: radial-gradient(50% 50%, circle contain, #f2f5f5 0%,#d1d8da 150px)

Niestety musisz dać kontener height 100% bo się będzie powtarzać / nie rozciągać do całości strony (taki urok css3)

To daj do body, oczywiście żaden ze mnie grafik, lamie strasznie w tej dziedzinie. Ale zawsze coś, kolory są dobre, ale z % musisz popracować. Oczywiście możesz pozostać przy grafice, ale jak już chcesz ją zostawić, wytnij tylko te kółko ze środka, i dał tło zewnętrzne jako tło w hex do body. Jednak to trzeba jakoś przesunąć, by było na środku.