[HTML][CSS] Pomoc przy stworzeniu nagłówka Opcje

[Majkelo23]

Witam!

Mam banalny problem, jednak potrzebuję Waszej pomocy.
Otóż chcę stworzyć coś mniej więcej takiego:
(IMG:http://s4.ifotos.pl/img/testpng_napheap.png)
W sumie to to już mam. Chodzi mi o małą poprawkę. Po pierwsze chciałbym, aby div przystosowywał swoją szerokość do długości tekstu, czyli jeśli mam tam 'Aktualności' to div będzie tak długi jak sam napis. Wartość 'width: auto;' powoduje, że div rozciąga się na 100%. Obecnie ustawiłem na sztywno wartość w px, co jest niewygodne bo jeśli kiedyś będę chciał wrzucić jakąś dłuższą frazę to będzie trzeba grzebać w .css i powiększać te piksele.
Drugą rzeczą, którą chciałbym osiągnąć to wyśrodkowanie tego napisu w pionie.

Mój obecny kod CSS:

Kod

#info {
width: 100%;
height: 35px;
padding: 2px;
color: #fff;
border-bottom: 2px solid #33A1DE;
margin: 1.5% 0 10px 0;
padding: 0;
}

#info_info {
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
text-align: center;
margin: 0 0 0 10px;
padding: 0;
height: 100%;
background: #33A1DE;
width: 100px;
}

Kod HTML:

[HTML] pobierz, plaintext 
<div id="info"><div id="info_info">Aktualności</div></div>
[HTML] pobierz, plaintext 

Dziękuję za pomoc! (IMG:style_emoticons/default/wink.gif)

[klima06]

Jeśli to ma być menu, to powinieneś zapakować to w <ul> i <li>.

[HTML] pobierz, plaintext 
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Aktualności</a></li>
</ul>
[HTML] pobierz, plaintext 

Takie ułożenie tagów da Ci możliwość dodania efektu dla a:hover.

Ten post edytował klima06 20.10.2013, 09:34:13

[Majkelo23]

Nie, to ma oddzielać wątki na stronie, takie jakby belki. Przykładowo:

Nowości [BELKA]
tutaj jakiś tekst, długi

Aktualności [BELKA]
tutaj jakiś tekst długi

itd.

[klima06]

Ups, sorry za moje domysły. W takim razie tutaj masz swój CSS poprawiony. Powinno być ok. Wyśrodkowanie w pionie możesz również padding'iem uzyskać.

Kod

#info {
width: 100%;
height: 35px;
padding: 2px;
color: #fff;
border-bottom: 2px solid #33A1DE;
margin: 1.5% 0 10px 0;
}

#info_info {
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
text-align: center;
margin: 0 0 0 10px;
padding: 0 12px;
height: 100%;
background-color: #33A1DE;
float:left;
line-height: 35px;
}