Forum PHP.pl > valign dla obrazka

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: valign dla obrazka - nie działa

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

gniotek

30.11.2013, 23:24:28

Witam wszystkich na forum.

Próbowałem już prawie wszystkich sposób, od positionów pod marginy i paddingi, i nie mogłem wpaść na konkretne rozwiązanie.

Na stronie:
http://czekson.krdc.com.pl/wd/index.html

logo po lewo, w pasku najwyżej nie chce mi się wyrównać do środka (paska #header), musi to być równo vertical-align: middle.
O to CSS:

Kod

#header
{
position:relative;
height: 100px;
line-height: 100px;
background: #353535;
vertical-align:middle;
}

#header img
{
margin-left: 15%;
}

a tak wygląda html

Kod

<div id="header">
        <a href="index.html"><img src="img/logo_artraf.png"/></a>
        <div id="menu">
        <ul class="header_menu">
        <li><a href="index.html">HOME</a></li>
        <li>O NAS</li>
        <li>OFERTA</li>
        <li>PORTFOLIO</li>
        <li>REALIZACJE</li>
        <li>KONTAKT</li>
        </ul>
        </div>
    </div>

Proszę o pomoc, jak to wypozycjonować żeby było równiutko na środku paska #header.
Pozdrawiam

com

30.11.2013, 23:38:09

co to znaczy na środku paska? w pionie, poziomie?

może to Cie zadowoli o ile o tym mowa:

[CSS] pobierz, plaintext 
#header img {
margin-left: 15%;
margin-top: 25px;
}
[CSS] pobierz, plaintext

gniotek

1.12.2013, 00:03:37

Hmm, skoro mowa o vertical-align = mowa o pionie

Nie interesuje mnie rozwiązanie w "px", zależy mi bardzo na dokładnym wyśrodkowaniu w pionie, oraz raczej wyjaśnienie i wniosek dlaczego vertical-align nie działa.

com

1.12.2013, 00:12:11

no to inaczej niż poprzez ustawienie marginesu tego nie zrobisz bo vertical-align działa na tekście a Ty masz tam blok div na który musisz go nałożyć na powierzchnie w której się on znajduje, bo logo i menu są w oddzielnych linach

gniotek

1.12.2013, 00:16:50

No są już jakies konkrety

A mógłbyś mi wyjaśnić, jakim sposobem udało by mi się wypozycjonować za pomocą valign?

com

1.12.2013, 00:22:21

http://jsfiddle.net/HBuQf/

gniotek

1.12.2013, 00:38:23

Kod

#header
{
background: #353535;
width: 100%;
height:100px;
}

#logo
{
display:inline;
margin-left: 15%;
line-height:100px;
background: #353535;
}

img
{
vertical-align:middle;
}

Co robię źle, nadal przyssany do góry

com

1.12.2013, 00:52:04

http://jsfiddle.net/HBuQf/2/

Efekt
http://jsfiddle.net/HBuQf/2/show

gniotek

1.12.2013, 01:04:40

Najwidoczniej mam jakiś błąd w CSS.

Próbowałem metodą zrozumienia użyć CSS który dałeś, com - lecz niestety efekt ten sam, logo jest na górze.
Więc mówię ze jaki to ja głupi nie jestem i skopiowałem cały CSS z jsfiddle i to samo.

Masakra, widzicie co jest problemem?

MountainDew

1.12.2013, 01:19:44

Cytat(gniotek @ 1.12.2013, 01:04:40 )

Masakra, widzicie co jest problemem?

Problemem jest float:right; w #menu

com

1.12.2013, 01:26:32

niestety nie mam pojęcia skopiowałem 1 do 1 z twojego kodu http://jsfiddle.net/q9eXk/ i efekt jest poprawny... ustaw sobie najwyżej reset na początku bo może to wina domyślnych ustawień gdzieś

@up owszem, ale z tym czy bez powinno działać co widać na jsfiddle

gniotek

1.12.2013, 01:32:42

dzięki panowie - rzeczywiście float right był problemem, mógłbym wiedzieć jak zdiagnozowałeś problem?

com

1.12.2013, 01:35:24

metodą prób i błędów... nie ma na to reguły

a skoro float odpowiada za pozycje to najłatwiej obstawić to.. nie wiem czy zauwazyłeś usunąłem jeden float:left żeby zaczęło wgl na jsfiddle działać

gniotek

1.12.2013, 01:40:00

Skoro już mowa o float, to macie teraz jakis prosty pomysł żeby menu dosunąć do prawej, logo do lewej?

MountainDew

1.12.2013, 02:10:53

Proponuję wrzucić #logo i #menu w dodatkowy kontener który ogarnie marginesy, #logo i #menu zamienić na display: inline-block; o szerokości 50%, wtedy w #menu ustawiasz text-align: right;
Co do diagnozy problemu, floaty źle stosowane zawsze sprawiają problemy, stąd wiadomo gdzie szukać. Proponuję poczytać google pod frazą 'float issues' i stosować zgodnie z przeznaczeniem.
No i z doświadczenia dodam, że takie pozycjonowanie logo na vertical-align na prawdę rzadko ma sens, polecam korzystać z marginesów, pozdrawiam

gniotek

1.12.2013, 02:23:10

Mountain, skoro twierdzisz że vertical-align nie ma sensu dla loga, to może rozważmy opcje, aby sam margin-top: 50%; centrował, tylko znowu bajka, bo pamiętam że ostatnio jak dodawałem to cała strona szła w dół o 50%, a nie samo #logo na środek #header'a.

Jakieś propozycje?

PS. Zrobiłem na razie na test to co mówiłeś, znowu się rozjeżdza...

Kod

#header
{
background: #353535;
width: 100%;
height:100px;
}

#headcont
{
margin-left:15%;
margin-right:15%;
}

#menu
{
display:inline-block;
line-height:100px;
width:50%;
text-align: right
}

#logo
{
display:inline-block;
line-height:100px;
width:50%;
}

MountainDew

1.12.2013, 12:36:24

To dlatego że między #logo i #menu pojawia się extra przestrzeń wynikająca z zawartości inline. Rozwiązaniem jest 'white-space: nowrap;' dla #headcont.
Margin-top:50% jest również bezcelowy, poczytaj trochę o modelu pudełkowym, ja sugerowałbym rozwiązanie zaproponowane przez com w jego pierwszym poście.

gniotek

1.12.2013, 13:16:58

Dziękuję panowie za pomoc, i pozdrawiam.

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.