[CSS][XML][HTML]Problem z kodowaniem Opcje

[maciej916]

Mam Problem z zakodowaniem nagłówków do menu i ogulnie z kodowaniem

mój problem polega na tym że nie wiem jak zakodować napisu aby był na obrazku


moja strona testowa WWW


Kod Menu:

Kod

<div id="nav2" style="width:284px;">
        <div>
            <div id="panel"<b>>></b> Test</div>
            <div id="panelbg">
                wpółpraca
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>    
            <div id="panel"<b>>></b> Test</div>
            <div id="panelbg">
                reklama
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>
            <div id="panel"<b>>></b> Test</div>
            <div id="panelbg">
            statystyki strony    
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>
            <div id="panel"<b>>></b> Test</div>
            <div id="panelbg">
                tu nas znajdziesz
            </div>
        </div>
        <div id="panel_dul"></div>
</div>

A oto Moje Style

Kod

body {
background-image: url(images/bg.png);
margin:0px;
padding:0px
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:879px;
margin:0px auto;
}

#nav1 {
    float: left;


}
#nav2 {
    float: right;


}

a{
    font-family:Verdana;
    color:#ffffff;
    font-size: 11px;
    text-decoration:none;
}
a:hover{
    font-family:Verdana;
    color:#b629ff;
    font-size: 11px;
    text-decoration:none;
}

#news2 {
    padding:5px 10px 0px 5px;
    font-family:Tahoma;
    font-size: 11px;
    color:#ffffff;

}
#panelbg {
    background:url(images/img_15.jpg);
    padding:5px 10px 10px 10px;
    font-family:Tahoma;
    font-size: 11px;
    color:#000000;

}
#menunew {
    background:url(images/img_07.jpg) no-repeat;
    font-size: 11px;
    font-family:Tahoma;
    color:#000000;
    padding:7px 0px 12px 0px;

}
#pozdro {
    background:url(images/pozdrow_bg.png) no-repeat;
    font-size: 11px;
    font-family:Tahoma;
    color:#ffffff;
    padding:8px 0px 12px 15px;

}
.linki a{
    font-family:tahoma;
    font-size: 12px;
    padding:14px 15px 11px 15px;
    color:#000000;
    margin:1px 1px;
}
.linki a:hover{
    background-image: url('images/hover.png');
    background-repeat: no-repeat;
    color:#ffffff;
}

#nav3 {
    font-family:Tahoma;
    font-size: 11px;
    color:#777777;

}
#panel {
    background:url(images/panel_bg.png);
    background-repeat: no-repeat;
    padding:0px 0px 0px 20px;
    width: 284px;
    height: 50px;
    font-family:Arial;
    font-size: 15px;
    color:#000000;

}
#panel_dul {
    background:url(images/panel_dul.png);
    background-repeat: no-repeat;
    width: 284px;
    height: 18px;

}
#srodek_dul {
    background:url(images/srodek_dul.png);
    background-repeat: no-repeat;
    width: 568px;
    height: 18px;

}
#newsbg {
    background:url(images/img_18.jpg);
    width: 568px;
    font-family:Tahoma;
    font-size: 11px;
    color:#000000;

}
#news_info {
    background:url(images/news_info.png);
    background-repeat: no-repeat;
    padding:0px 0px 0px 40px;
    width: 568px;
    height: 31px;
    font-family:Arial;
    font-size: 12px;
    color:#ffffff;

}

#stopka {
    background:url(images/stopka.png);
    background-repeat: no-repeat;
    width: 879px;
    height: 56px;
    padding:25px 0px 0px 5px;
    font-family:Arial;
    font-size: 13px;
    color:#ffffff;

}

[Zidane]

Ja zawsze robię tak, że style dla obrazka robię oddzielnie i styl dla tekstu który ma być na nim też oddzielnie.
czyli np.:

Kod

#obrazek {
   background: url('./images/costam.png');
  width:200px;
  height:30px;
  margin:10px 0 0 10px;

}
.tekstobrazek {
  font-family:Verdana;
  font-size:10px;
  padding:5px 0 0 10px;

}

Coś takiego, mam nadzieję że o to Ci chodziło.

[maciej916]

Ja zawsze robię tak, że style dla obrazka robię oddzielnie i styl dla tekstu który ma być na nim też oddzielnie.
czyli np.:

Kod

#obrazek {
   background: url('./images/costam.png');
  width:200px;
  height:30px;
  margin:10px 0 0 10px;

}
.tekstobrazek {
  font-family:Verdana;
  font-size:10px;
  padding:5px 0 0 10px;

}

Coś takiego, mam nadzieję że o to Ci chodziło.

jak to wdrążyć w praktyke ?

[Zidane]

Dla obrazka dajesz margin a dla tekstu padding.
Następnie:

Kod

<div id="obrazek"class="tekstobrazek">
Lorem ipsum Pan Tadeusz litwo ojczyzno potępieni żarem słońca
</div>

Jak dalej nie będziesz wiedział to rusz głową i sam pokombinuj, i tak wystarczająco Cię naprowadziłem.

[maciej916]

Po zrobieniu Tworzą sie marginesy dziwne [od obrazkiem zobacz na tej stronie: http://pmf.xaa.pl/radio/ - strona testowa


Kod Obecny Menu

Kod

<div id="nav2" style="width:284px;">
        <div>
                <div id="panel"class="tekstpanel"><b>>></b>Test</div>
            <div id="panelbg">
                wpółpraca
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>    
                <div id="panel"class="tekstpanel"><b>>></b>Test</div>
            <div id="panelbg">
                reklama
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>
                <div id="panel"class="tekstpanel"><b>>></b>Test</div>
            <div id="panelbg">
            statystyki strony    
            </div>
        </div>
        <div id="panel_dul"></div>
        <div>
                <div id="panel"class="tekstpanel"><b>>></b>Test</div>
            <div id="panelbg">
                tu nas znajdziesz
            </div>
        </div>
        <div id="panel_dul"></div>
</div>

i style

Kod

body {
background-image: url(images/bg.png);
margin:0px;
padding:0px
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:879px;
margin:0px auto;
}

#nav1 {
    float: left;


}
#nav2 {
    float: right;


}

a{
    font-family:Verdana;
    color:#ffffff;
    font-size: 11px;
    text-decoration:none;
}
a:hover{
    font-family:Verdana;
    color:#b629ff;
    font-size: 11px;
    text-decoration:none;
}

#news2 {
    padding:5px 10px 0px 5px;
    font-family:Tahoma;
    font-size: 11px;
    color:#ffffff;

}
#panelbg {
    background:url(images/img_15.jpg);
    padding:5px 10px 10px 10px;
    font-family:Tahoma;
    font-size: 11px;
    color:#000000;

}
#menunew {
    background:url(images/img_07.jpg) no-repeat;
    font-size: 11px;
    font-family:Tahoma;
    color:#000000;
    padding:7px 0px 12px 0px;

}
#pozdro {
    background:url(images/pozdrow_bg.png) no-repeat;
    font-size: 11px;
    font-family:Tahoma;
    color:#ffffff;
    padding:8px 0px 12px 15px;

}
.linki a{
    font-family:tahoma;
    font-size: 12px;
    padding:14px 15px 11px 15px;
    color:#000000;
    margin:1px 1px;
}
.linki a:hover{
    background-image: url('images/hover.png');
    background-repeat: no-repeat;
    color:#ffffff;
}

#nav3 {
    font-family:Tahoma;
    font-size: 11px;
    color:#777777;

}


#panel {
    background: url('images/panel_bg.png');
    background-repeat: no-repeat;
  width: 284px;
  height: 50px;

}
.tekstpanel {
    font-family:Arial;
    font-size: 15px;
    color:#000000;
  padding:20px 0 0 10px;

}

#panelbg {
    background:url(images/img_15.jpg);
    padding:5px 10px 10px 10px;
    font-family:Tahoma;
    font-size: 11px;
    color:#000000;

}

#panel_dul {
    background:url('images/panel_dul.png');
    background-repeat: no-repeat;
    width: 284px;
    height: 18px;

}
#srodek_dul {
    background:url('images/srodek_dul.png');
    background-repeat: no-repeat;
    width: 568px;
    height: 18px;

}
#newsbg {
    background:url('images/img_18.jpg');
    width: 568px;
    font-family:Tahoma;
    font-size: 11px;
    color:#000000;

}
#news_info {
    background:url('images/news_info.png');
    background-repeat: no-repeat;
    padding:0px 0px 0px 40px;
    width: 568px;
    height: 31px;
    font-family:Arial;
    font-size: 12px;
    color:#ffffff;

}

#stopka {
    background:url('images/stopka.png');
    background-repeat: no-repeat;
    width: 879px;
    height: 56px;
    padding:25px 0px 0px 5px;
    font-family:Arial;
    font-size: 13px;
    color:#ffffff;

}

Odświerzam

Do Kosza