Jak zrobić dwa bloki "div" obok siebie?

Jak zrobić dwa bloki "div" obok siebie?
LU
  • Rejestracja:około 12 lat
  • Ostatnio:ponad 6 lat
  • Postów:127
0

CSS:

Kopiuj
#tresc{
    background-color: orange;
    padding-bottom:200px; /*wysokosc stopki*/
    float:left;
}
#lewy_pasek{
    background-color: blue;
    width: 200px;
    float:left;
    height: 90px;
}
#obramowanie{
    background: rgba(1, 255, 1, 0.15);
    border: 3px solid #1C1C1C;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

index.php:

Kopiuj
<div id="obramowanie">
<div id="lewy_pasek">
aaa
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="tresc">
<?PHP
if(isset($_GET["menu"]))
{
    if($_GET["menu"]==1)
{
    include ("omnie.php");
}
else if($_GET["menu"]==2)
{
    include ("omnie2.php");
}
else if($_GET["menu"]==3)
{
    include ("omnie3.php");
}
else if($_GET["menu"]==4)
{
    include ("omnie4.php");
}
else if($_GET["menu"]==5)
{
    include ("news.php");
}
else if($_GET["menu"]==6)
{
    include ("link6.php");
}
else
{
    echo "blad autoryzacji";
}
}

?>
</div>
</div>

Próbowałem już na wiele sposobów
float:left
clear tez nie dziala
Chodzi mi mniej więcej o taki rozkład jak na obrazku:
user image
Przy czym tam gdzie jest #Strona u mnie jest #obramowanie oraz menu i treść będą do siebie przylegać.

SW
  • Rejestracja:prawie 13 lat
  • Ostatnio:ponad 4 lata
  • Postów:426
0

hmm nie jestem specem ale menu na float:left a treść na float:right?

edit:
W sumie to nie ma znaczenia chyba. No mistrzem nie jestem w tych sprawach :) zawsze metoda prób i błędów.

edytowany 1x, ostatnio: Swr
LU
  • Rejestracja:około 12 lat
  • Ostatnio:ponad 6 lat
  • Postów:127
0

Jak tak zrobiłem lewy_pasek i text wystają poza obramowanie i text jest pod lewy_pasek

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:dzień
  • Lokalizacja:Rzeszów
0

a #tresc nie ma miec wymiaru? to jakiś dynamiczny boks?


LU
  • Rejestracja:około 12 lat
  • Ostatnio:ponad 6 lat
  • Postów:127
0

Tak. Ma się rozciągać jak będzie więcej treści.

freemp3
  • Rejestracja:około 11 lat
  • Ostatnio:4 minuty
  • Lokalizacja:Miechów
  • Postów:284
0

Za divem #tresc wstaw jeszcze jednego div-a ze stylem: clear: both


LU
  • Rejestracja:około 12 lat
  • Ostatnio:ponad 6 lat
  • Postów:127
0

W obramowaniu mają być 2 bloki a nie 3. Jak w lewy_pasek i tresc ustawiam float:left to są dobrze obok siebie tylko że wtedy obramowanie się psuje wygląda to tak jakby bloki wystawały z obramowania.

99
  • Rejestracja:prawie 13 lat
  • Ostatnio:prawie 9 lat
  • Postów:53
0

dodajesz do obramowania 'overflow:hidden', no i prawy div musi być 'float:right' a nie left.

Kopiuj

#obramowanie{
    background: rgba(1, 255, 1, 0.15);
    border: 3px solid #1C1C1C;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    
    /* overflow:hidden */
    overflow: hidden;
}


#lewy_pasek{
    background-color: blue;
    width: 200px;
    float:left;
    height: 90px;
}

#tresc{
    background-color: orange;
    padding-bottom:200px; /*wysokosc stopki*/
    
    /*right!*/
    float:right; 
}

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:dzień
  • Lokalizacja:Rzeszów
1

@997: Prawie dobrze, ale sypie się jak jest treść ;]
http://jsbin.com/noya/1/

Jeżeli lewa kolumna ma sobie być, a prawa ma się floatować i rozciągać (z definicji standardów floaty MUSZĄ mieć podaną szerokość) to tutaj tylko tabelka (można oczywiście nie stosować tagu table a bawić się w divy i display: table-*), ew. jeżeli wysokość tego po lewej jest zawsze określonego wymiaru na wysokość to nawet absolutami by coś zadziałał


99
trochę nie łapię gdzie treść się sypie :) u mnie treść rozciąga prawy div, no i tak chyba powinno być.
dzek69
sorry, wkleiłem linka, gdzie treści jest za mało, żeby zobaczyć to na sporym monitorze NIE w trybie edycji :p http://jsbin.com/noya/3/ dopisałem treści, sprawdź ;p
99
OK, już wiem o co chodzi. Niestety nie wiedziałem jaka ta treść ma być , bo przecież, w zależności od treści, może nawet wystarczy jeden wewnętrzny div ustawiony na prawo. Jest też 'max-width' , którym można treść sformatować. Ogólnie, podstawowy problem wychodzenia wewnętrznych 'div' poza zewnętrzny został rozwiązany, reszta to moim zdaniem formatowanie wewnątrz 'div#tresc'.
dzek69
no to niestety tylko "Twoim zdaniem" bo to nigdy nie zadziała na zasadzie "rozciągaj prawy div tyle, ile jest miejsca, ALE nie wrzucaj go pod spód" - trzeba dorobić coś w JS, albo przebudować inaczej niż floaty
freemp3
  • Rejestracja:około 11 lat
  • Ostatnio:4 minuty
  • Lokalizacja:Miechów
  • Postów:284
0

W obramowaniu mają być 2 bloki a nie 3

Kto mówi o dodawaniu trzeciego bloku? Wstawiasz takiego div-a:

Kopiuj
<div style="clear:both; width: 0px; height: 0px;"></div>

Nie będzie wyświetlany, a floaty, trzeba wyczyścić bo właśnie ramka Ci się nie dopasuje i wszystko co będzie dalej także zostanie podniesione.

dodanie znacznika <code class="html"> - fp


edytowany 1x, ostatnio: flowCRANE
flowCRANE
Przypominam o wstawianiu kodu w znaczniki kolorujące składnię;
aurel
Moderator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 16 godzin
0

Zapodam jednym z moich ulubionych linków: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Ty chyba opisujesz ten przykład: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-28-2-col/

tak jakby bloki wystawały z obramowania

To brzmi, jakbyś miał źle ustawione paddingi - pamiętaj, że szerokość bloku to width + padding-left + padding-right. (Chyba że zastosujesz http://css-tricks.com/box-sizing/).

edytowany 2x, ostatnio: aurel
dzek69
on chce tylko jedną kolumnę fixed, drugą - automatycznie dopasowującą się do kontenera
aurel
Jeśli na szerokość, to rozwiązanie będzie podobne, ale z min-width. Na wysokość - min-height.
dzek69
ale nie zrobisz dwóch floatów, z czego jeden nie ma określonej szerokości (min-width to mało), bo naklepanie treści spowoduje wrzucenie jednego pod drugi (patrz przykład dwa posty wyżej)
0
aurel napisał(a):

Zapodam jednym z moich ulubionych linków: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Ty chyba opisujesz ten przykład: http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-28-2-col/

totalnie bezużyteczne, wszystkie kontenery mają ustawione wysokości i szerokości - w takim przypadku to nie jest nic trudnego, narysować dwa prostokąty o określonych wymiarach to nie problem

jeśli jedna kolumna ma się dostosowywać do drugiej to musi mieć display: table-cell albo być w prawdziwej tabelce, albo trzeba wykorzystać wyrażenie css: expression (ale to będzie działać tylko w nowych przeglądarkach), albo użyć javascript
zazwyczaj jednak "automatycznie dopasowująca" się kolumna wcale się nie dostosowuje tylko prześwituje przez nią tło kontenera nadrzędnego sprawiając takie wrażenie

dzek69
jest jeszcze calc czyli takie expression, tylko dla css3: http://caniuse.com/calc
Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)