[CSS]Graficzny "content" pytanko Opcje

[Zielonkawy18]

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]

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]

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]

o jaki dokladnie obrazek chodzi ? zakrecilem sie i juz sam nie wiem o co dokladnie chodzi... zaznacz na zdjęciu o co dokladnie chodzi (IMG:style_emoticons/default/smile.gif)

[Zielonkawy18]

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]

aaaaaa (IMG:style_emoticons/default/smile.gif)
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 (IMG:style_emoticons/default/smile.gif)

choć zamiast obrazka pod tlo h1 wolalbym wstawic juz gradier (IMG:style_emoticons/default/smile.gif)

generator: http://www.colorzilla.com/gradient-editor/ (IMG:style_emoticons/default/smile.gif)

Ten post edytował tomi1985 24.11.2012, 16:53:22

[Zielonkawy18]

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]

#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 (IMG:style_emoticons/default/tongue.gif) 
    }
 
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 (IMG:style_emoticons/default/tongue.gif) 
    }
 
 
    <div id="mini">
 
    <h1>Mini Box</h1>
    <ul id="nav">
    <li>1</li>
    itd...
    </ul>
    </div>
[HTML] pobierz, plaintext 

chyba o to chodzilo (IMG:style_emoticons/default/tongue.gif)

[Pawel_W]

odwołując się do identyfikatora #nav niepotrzebnie stosujesz jeszcze to ul, identyfikator na stronie powinien być tylko 1 (IMG:style_emoticons/default/smile.gif)