eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwZawijanie tekstu wokół diva
Ilość wypowiedzi w tym wątku: 3

  • 1. Data: 2013-01-13 17:27:20
    Temat: Zawijanie tekstu wokół diva
    Od: Marcin <m...@s...wp.pl>

    Jest sobie teraz div#content:
    ----------------------------------------------------
    ---
    | Lorem ipsum dolor sit amet, consectetur adipiscing |
    | elit. Nulla facilisis lobortis tellus at accumsan. |
    | Donec blandit viverra purus, at dictum nisl |
    | consequat sed. Pellentesque odio elit, tempus ac |
    | lobortis sit amet, facilisis vel sapien. Phasellus |
    | non justo sit amet orci semper fermentum id |
    | lobortis purus. Donec condimentum enim ac felis |
    | interdum euismod. Integer egestas orci quis justo |
    | vulputate faucibus interdum sem tincidunt. Donec at |
    | neque at sem scelerisque pharetra in id nibh. Morbi |
    | convallis velit pharetra augue congue commodo. Donec|
    | in velit urna. Fusce consectetur aliquam mauris, |
    | non consequat sapien cursus nec. |
    ----------------------------------------------------
    ---


    Chciałbym w nim zrobić menu "podręczne" (#submenu) wyświetlane od
    prawego górnego rogu. Tekst który siedzi w #content powinien się
    sprytnie zawijać do nowych wierszy, jak poniżej:

    ----------------------------------------------------
    ---
    | Lorem ipsum dolor sit amet, ------------|
    | consectetur adipiscing elit. Nulla | xx xxxxx ||
    | facilisis lobortis tellus at accumsan. | xx xxxxx ||
    | Donec blandit viverra purus, at dictum | xx xxxxx ||
    | nisl consequat sed. Pellentesque odio | xx xxxxx ||
    | elit, tempus ac | xx xxxxx ||
    | lobortis sit amet, facilisis vel sapien.| xx xxxxx ||
    | Phasellus non justo sit amet orci semper| xx xxxxx ||
    | fermentum id lobortis purus. Donec | xx xxxxx ||
    | condimentum enim ac felis interdum | xx xxxxx ||
    | euismod. Integer egestas orci quis just ------------|
    | vulputate faucibus interdum sem tincidunt. Donec |
    | at neque at sem scelerisque pharetra in id nibh. |
    | Morbi convallis velit pharetra augue congue commodo.|
    | Donec in velit urna. Fusce consectetur aliquam |
    | mauris, non consequat sapien cursus nec. |
    ----------------------------------------------------
    ---


    Jak zrobię jak poniżej, to główny tekst wchodzi pod diva #submenu -
    myślę, że słusznie, ale nie bardzo wiem jak zrobić aby #submenu
    powodowało zawijanie tekstu.

    HTML:

    <div id="content">

    Lorem ipsum dolor sit amet...

    <div id="submenu">
    xx xxxxx
    xx xxxxx...
    </div>

    </div>

    i CSS:

    #content {
    position: relative;
    width: 1000px
    }

    #submenu {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    }

    Kombinowałem z paddingami i marginami ale to nie przynosi oczekiwanego
    efektu.

    Div #submenu musi siedzieć u dołu. Jeśli go przeniosę na sam początek
    #content i dam #submenu float: right, to wizualnie jest OK. Ale nie jest
    to poprawne semantycznie - #submenu jest podrzędne i jego miejsce ma być
    u dołu strony.
    Ma ktoś pomysł jak to zrobić zgodnie ze sztuką?


  • 2. Data: 2013-01-13 18:47:12
    Temat: Re: Zawijanie tekstu wokół diva
    Od: rePeter <n...@s...no>

    Sun, 13 Jan 2013 17:27:20 +0100
    Marcin <m...@s...wp.pl> napisał(a):


    > Div #submenu musi siedzieć u dołu. Jeśli go przeniosę na sam początek
    > #content i dam #submenu float: right, to wizualnie jest OK. Ale nie jest
    > to poprawne semantycznie - #submenu jest podrzędne i jego miejsce ma być
    > u dołu strony.

    Skoro #submenu chcesz mieć u góry, po prawej, na początku sekcji #content,
    daj div submenu przed "Lorem ipsum" z float right. Co w tym niepoprawnego
    semantycznie?


    --
    Piotr Grzegorzyca pozdrawia
    http://komputerowe.zakamarki.net

    jedenaste: Nie spamuj


  • 3. Data: 2013-01-15 11:18:01
    Temat: Re: Zawijanie tekstu wokół diva
    Od: NotBear <p...@i...pl>

    W dniu 2013-01-13 17:27, Marcin pisze:
    > Ma ktoś pomysł jak to zrobić zgodnie ze sztuką?

    Pomysl 1. Pogodzic sie z ograniczeniami floata i zostawic dotychczasowa
    kolejnosc elementow. Za to wpuscic wiecej semantyki w dokument:

    div#content ->
    http://www.w3.org/html/wg/drafts/html/master/section
    s.html#the-article-element

    div#submenu ->
    http://www.w3.org/html/wg/drafts/html/master/section
    s.html#the-aside-element
    http://www.w3.org/html/wg/drafts/html/master/section
    s.html#the-nav-element


    Pomysl 2, niewykluczajacy pierwszego. Ustawic sobie elementy w pozadanej
    kolejnosci w kodzie (czyli tresc, pozniej submenu) i przy wyswietlaniu
    za pomoca JS przestawiac na pozycje zapewniajaca poprawne floatowanie.
    Wykryc, np. modernizrem i zapewnic jakis sensowny wyglad dla sytuacji no-js.


    --
    NotBear

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: