Witam,

Mamy w uproszczeniu kod HTML:

<div>
<section>...</section>
<aside>...</aside>
</div>

<section> i <aside> stanowią dwie kolumny.

section {
float: left;
width: 700px;
}

aside {
float: left;
width: 200px;
}

Sekcja <aside> może nie pojawiać się w kodzie HTML lecz nie musi (CMS ją
moze wygenerować lub nie). Chciałbym aby w przypadku gdy nie ma <aside>
ustawić szerokość <section> na np. 800px. Czy da się to jakoś zadeklarować
w CSS?

do góry

Dnia Sun, 26 Feb 2012 11:46:56 +0100, Marek napisał(a):

> <div>
> <section>...</section>
> <aside>...</aside>
> </div>

Gdybyś zamienił kolejność section i aside, czyli:

<div>
<aside>...</aside>
<section>...</section>
</div>

i jako float dał im right, czyli:
section {
float: right;
width: 700px;
}

aside {
float: right;
width: 200px;
}

to jeśli cms nie wyprodukuje aside, czyli będzie:
<div>
<section>sekcja</section>
</div>

to możesz to złapać przy pomocy np:
div > section:first-child {
width: 900px;
}

ale jeśli masz tam cms-a to ja bym nie kombinował tylko wygenerował section
z odpowiednią klasą:
<section class="foo">...</section>

--
Tomek

do góry

Dnia Sun, 26 Feb 2012 13:02:21 +0100, Tomasz Sowa napisał(a):

> Gdybyś zamienił kolejność section i aside, czyli:
>
> <div>
> <aside>...</aside>
> <section>...</section>
> </div>
>
> i jako float dał im right, czyli:
> section {
> float: right;
> width: 700px;
> }
>
> aside {
> float: right;
> width: 200px;
> }
>
> to jeśli cms nie wyprodukuje aside, czyli będzie:
> <div>
> <section>sekcja</section>
> </div>
>
> to możesz to złapać przy pomocy np:
> div > section:first-child {
> width: 900px;
> }

Tak właśnie zamierzałem zrobić lecz to trochę przeróbek będzie kosztowało -
stąd ten post :-( Zastanawiałem się nad wykorzystaniem JS do sprawdzania
czy istnieje <aside> i jeśli tak, to regulowania szerokości <section>, lecz
to jeszcze bardziej dziwaczne...

> ale jeśli masz tam cms-a to ja bym nie kombinował tylko wygenerował section
> z odpowiednią klasą:
> <section class="foo">...</section>

Zamiast <aside>? A co to zmieni?

do góry

niedziela, 26 lutego 2012 14:00. Wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

>> ale jeśli masz tam cms-a to ja bym nie kombinował tylko wygenerował
>> section z odpowiednią klasą:
>> <section class="foo">...</section>
>
> Zamiast <aside>? A co to zmieni?

Jak masz aside, to CMS generuje:
<section></section>
<aside></aside>

jak nie masz, to generuje:
<section class="foo"></section>

W CSS-ie:

section {
float: left;
width: 700px;
}

section.foo {
width: 800px;
}
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

W dniu niedziela, 26 lutego 2012, 11:46:56 UTC+1 użytkownik Marek napisał:

> Sekcja <aside> może nie pojawiać się w kodzie HTML lecz nie musi (CMS ją
> moze wygenerować lub nie). Chciałbym aby w przypadku gdy nie ma <aside>
> ustawić szerokość <section> na np. 800px. Czy da się to jakoś zadeklarować
> w CSS?

zobacz cos takiego :

div{
display: table;
}

div section, div aside{
display: table-cell;
}

div section{
width: 100%;
}

div aside{
width: 200px;
}

do góry

Dnia 26-02-2012 o 13:02:21 Tomasz Sowa <t...@t...nospam.org> napisał(a):

> Dnia Sun, 26 Feb 2012 11:46:56 +0100, Marek napisał(a):
>
>> <div>
>> <section>...</section>
>> <aside>...</aside>
>> </div>
>
> Gdybyś zamienił kolejność section i aside, czyli:
>
> <div>
> <aside>...</aside>
> <section>...</section>
> </div>
>
> i jako float dał im right, czyli:
> section {
> float: right;
> width: 700px;
> }
>
> aside {
> float: right;
> width: 200px;
> }
>
> to jeśli cms nie wyprodukuje aside, czyli będzie:
> <div>
> <section>sekcja</section>
> </div>
>
> to możesz to złapać przy pomocy np:
> div > section:first-child {
> width: 900px;
> }

czemu nie :last-child, nie wymagający zamiany kolejności?

--
Jordan Szubert

do góry

Dnia Sun, 26 Feb 2012 14:12:24 +0100, Mirosław Zalewski napisał(a):

> niedziela, 26 lutego 2012 14:00. Wielka mądrość na czytelników pl.comp.www
> spłynęła, gdy tako rzekł(a) Marek:
>
>>> ale jeśli masz tam cms-a to ja bym nie kombinował tylko wygenerował
>>> section z odpowiednią klasą:
>>> <section class="foo">...</section>
>>
>> Zamiast <aside>? A co to zmieni?
>
> Jak masz aside, to CMS generuje:
> <section></section>
> <aside></aside>
>
> jak nie masz, to generuje:
> <section class="foo"></section>
>
> W CSS-ie:
>
> section {
> float: left;
> width: 700px;
> }
>
> section.foo {
> width: 800px;
> }

Rozumiem, chodzi o to aby CMS dodawał klasę "foo" do elementu w przypadku
gdy znika jedna kolumna? Jeśli tak, to jest to dość kłopotliwe rozwiązanie.
W section mamy treść a aside to galeria zdjęć. Inny moduł ją generuje. Tak
więc moduł od treści nie wie, że galeria będzie pusta w danym przypadku a w
innym nie. Mogę oczywiście to zmienić ale tak czy owak unikam wstrzykiwania
przez CMS czegokolwiek do HTML. CMS może jakiś kod HTML zawarty w formatce
powielać itp. aby zachować pełną separację kodu HTML i oprogramowania.

do góry

Dnia Sun, 26 Feb 2012 20:37:25 +0100, Jordan Szubert napisał(a):

>
> czemu nie :last-child, nie wymagający zamiany kolejności?

A jak to miałoby zadziałać? Przy jednym <section> będzie klasa wskazywała
na pierwszy element, a przy dwóch - na drugi. Przy jednym elemencie
chciałbym mieć szerokość 800px. Prz dwóch, pierwszy 700px, drugi 200px. Jak
to zadeklarować?

do góry

Dnia Sun, 26 Feb 2012 05:39:32 -0800 (PST), satellite napisał(a):

> zobacz cos takiego :
>
> div{
> display: table;
> }
>
> div section, div aside{
> display: table-cell;
> }
>
> div section{
> width: 100%;
> }

Tzn szerokość należy pozostawić na auto chyba? Wtedy przy jednej sekcji
wyniesie ona de facto 100%, przy dwóch: szerokość tabeli minus szerokość
drugiej kolumny. A więc mogłoby zadziałać. Jest też mały szkopuł. Otóż
<section> przy braku obecności <aside> ma być mniejsze od 100% i wynosić
800px. Czyli obecność lub nieobecność drugiego elementu zmienia ustawienia
stylu dla poprzednika. Niezły rebus, prawda :-)

do góry

Dnia 27-02-2012 o 00:18:49 Marek <p...@s...com> napisał(a):

> Dnia Sun, 26 Feb 2012 20:37:25 +0100, Jordan Szubert napisał(a):
>
>>
>> czemu nie :last-child, nie wymagający zamiany kolejności?
>
> A jak to miałoby zadziałać? Przy jednym <section> będzie klasa wskazywała
> na pierwszy element, a przy dwóch - na drugi. Przy jednym elemencie
> chciałbym mieć szerokość 800px. Prz dwóch, pierwszy 700px, drugi 200px.
> Jak
> to zadeklarować?

<div>
<section>...</section>
<aside>...</aside>
</div>

badz

<div>
<section>...</section>
</div>

oraz

section {
float: right;
width: 700px;
}
aside {
float: right;
width: 200px;
}
div > section:last-child {
width: 800px;
}

czemu nie?
w pierwotnych wymaganiach nie bylo nic o dwoch <section/>, 1 <section/>
oraz 0 lub 1 <aside/>

--
Jordan Szubert

do góry