Forum PHP.pl > [CSS]Graficzny "content" pytanko

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Graficzny "content" pytanko

Zielonkawy18

24.11.2012, 15:42:15

Mam pytanie odnośnie np. takiego layout-u

http://pieknowzdrowiu.pl/img1.png z tematu: Temat: Projekt logo oraz strony dla firmy outsourcingowej

Załóżmy, że mam taką grafikę ( mini box ) na zdjęciu. Jak w CSS ulokować taką grafikę i aby wyświetlić na niej tekst?

Oczywiście tekst umiem, chodzi mi po pomysł jak wy to realizujecie bo ja wyobrażam sobie to tak, że na te zdjęcie nakładam jakiegoś div-a.

tomi1985

24.11.2012, 15:50:48

najprosciej zrobic aby grafika byla backgroundem

np.

[HTML] pobierz, plaintext 
css
 
#logo {
background: url("grafa.png") no-repaet;
width:300px;
height:200px;
}
 
html
 
<div id="logo">
 
// jakiś tekst
 
</div>
 
[HTML] pobierz, plaintext

Zielonkawy18

24.11.2012, 16:22:46

Niby tak, ale wtedy ten tekst by najechał na nagłówek minibox czyli to jest jednoznaczne z tym, że nagłówek minibox trzeba zrobić osobno i także zdeklarować jako tło.

tomi1985

24.11.2012, 16:29:12

o jaki dokladnie obrazek chodzi ? zakrecilem sie i juz sam nie wiem o co dokladnie chodzi... zaznacz na zdjęciu o co dokladnie chodzi

Zielonkawy18

24.11.2012, 16:30:05

Mini box, a konkretnie ten Mini Box wyżej ( na zielonym tyle piszę ) i ma on pobrane jakieś nowiki czy newsy nie ważne :-)

tomi1985

24.11.2012, 16:48:50

aaaaaa

to ja bym to zrobil tak:

css

[HTML] pobierz, plaintext 
#mini {
width:250px;
text-align:left;
border-radius:5px;
}
 
#mini h1 {
background: url("box.png") no-repeat;
padding:10px;
width: 230px;
height:60px;
}
 
ul#nav {
list-style:none;
}
 
ul#nav li {
background: url("znaczek.jpg") no-repeat 0 10px;
}
 
<div id="mini">
 
<h1>Mini Box</h1>
<ul id="nav">
<li>1</li>
itd...
</ul>
</div>
 
[HTML] pobierz, plaintext

cos w tym kontekscie

choć zamiast obrazka pod tlo h1 wolalbym wstawic juz gradier

generator: http://www.colorzilla.com/gradient-editor/

Zielonkawy18

24.11.2012, 16:57:57

Możesz opisać "klasy" czy jak to się nazywa "#takie_cos" odnośnie obrazka, do którego się odnośiliśmy?? :-)

Co czego dotyczy. Pozdrawiam

tomi1985

24.11.2012, 17:05:14

Cytat

#mini {
width:250px;
text-align:left;
border-radius:5px;
}

#mini h1 {
background: url("box.png") no-repeat;
padding:10px;
width: 230px;
height:60px;
}

ul#nav {
list-style:none;
}

ul#nav li {
background: url("znaczek.jpg") no-repeat 0 10px;
}

<div id="mini">

<h1>Mini Box</h1>
<ul id="nav">
<li>1</li>
itd...
</ul>
</div>

a więc tak:

[HTML] pobierz, plaintext 
cały box :)
 
#mini {
    width:250px;
    text-align:left;
    border-radius:5px; - zaokrągla rogi 
    }
 
Twoje tło pod napis "Mini Box"
 
    #mini h1 {
    background: url("box.png") no-repeat;
    padding:10px;
    width: 230px;
    height:60px;
    }
 
 
Tutaj juz znajduje sie to co jest wewnatrz boxa :)
 
    ul#nav {
    list-style:none; - usuwanie kropek w li
    }
 
Nadanie obrazka po lewej stronie do opisów ( na zdjęciu masz zieloną szczałkę )   np. Loren impsum.... 
 
  ul#nav li {
    background: url("znaczek.jpg") no-repeat 0 10px; - ustawienie obrazka po lewej stronie w li 
    }
 
 
    <div id="mini">
 
    <h1>Mini Box</h1>
    <ul id="nav">
    <li>1</li>
    itd...
    </ul>
    </div>
[HTML] pobierz, plaintext

chyba o to chodzilo

Pawel_W

24.11.2012, 17:30:40

odwołując się do identyfikatora #nav niepotrzebnie stosujesz jeszcze to ul, identyfikator na stronie powinien być tylko 1

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.