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ą?

do góry

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

do góry

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

do góry