div z pełną szerokością i paddingiem

Odpowiedz Nowy wątek
2011-07-09 20:51
0

Element div ma atrybuty

width: 100%;
padding: 0 56px 0 296px;

no i teraz jest problem bo pojawia się poziomy pasek przesuwu. Co powoduje, że szablon, który dopasowuje się do całego okna przeglądarki zanika jak przejade scrollerem w prawo. Rozwiązaniem tego jest oczywiście overflow: hidden dla diva nadrzędnego, ale wtedy część strony znika.

Ogólnie testowałem już wiele rzeczy i nic nie przyniosło porządanego efektu. Czy istanieje jakaś metoda (poza javascriptem), żeby szerokość tego diva była na całą stronę, ale żeby obejmowała ona padding czyli 100% - padding ?

Pozostało 580 znaków

2011-07-09 21:29
1

Po prostu usuń width: 100%. Elementy blokowe domyślnie wypełniają całą dostępną szerokość minus padding (i ew. border/marginesy jeśli masz ustawione).

Pozostało 580 znaków

2011-07-09 21:30
0

Nie, nie istnieje, ale:
#przecież szerokość elementów blokowych się automatycznie dopasowuje do wolnego miejsca
#jeśli już musisz użyć width: 100%, to możesz w jednej warstwie umieścić drugą i jej ustawić chciane dopełnienie.

Pozostało 580 znaków

2011-07-09 21:39
0

wszystko by się zgadzało gdyby nie specyficzna konstrukcja szablonu, która wygląda tak:

<div class="wrapper">
  <div class="main"></div>
</div>
<div class="sidebar"></div>
.wrapper {
  width: 100%;
  float: left;
  overflow: hidden;
}

.main {
  padding: 0 56px 0 296px;
  float: left;
}

.sidebar {
  float: left;
  width: 276px;
  margin-left: -100%;
}

Jak macie propozycje na inne rozwinięcie tego, żeby szablon dopasowywał się do całego okna przeglądarki to napiszcie jak.

Efekt powyższego kodu jest taki, że div.main nie jest na całym ekranie tylko na jego części i rozszerza się w miarę tego jak przybywa w nim elementów. A za ukrycie elementów poza ekranem odpowiedzialny jest div.wrapper, niestety jest to tylko sztuczne ukrycie, bowiem poziomy scrollbar się nie pojawia, i elementy te znikają. W związku z tym.

Problem który w tej chwili mam to umieszczenie długiej tabeli na ekranie (wykres gantta) najlepiej bym chciał żeby zakres diva dopasował się do okna strony, a nie sztucznie go ograniczać, bo na różnych rozdzielczościach to ograniczenie może być za małe lub za duże.

edytowany 1x, ostatnio: wafcio, 2011-07-09 22:26
po co tam jest float: left; ? - sirkruk 2011-07-10 00:13

Pozostało 580 znaków

2011-07-10 12:58
0

sirkruk, pozwóle sobie nie komentować tego co napisałeś.

edytowany 1x, ostatnio: wafcio, 2011-07-10 12:59

Pozostało 580 znaków

2011-07-10 13:12
0

Najprościej z punktu widzenia CSS będzie rozwiązać ten problem dodając dodatkowy element do kodu znaczników. Jeśli Ci to nie przeszkadza, to wrzuć jakiś element, np..main-inner do .main. Usuń padding z elementu .main i przenieś go do .main-inner. Nie dodawaj do main-inner żadnych innych deklaracji.

Pozostało 580 znaków

2011-07-10 13:13
0

poproszę o przykład

Pozostało 580 znaków

2011-07-10 13:21
0

Hmm, widzę że ten Twój (dość dziwny) kod w ogóle nie działa. To nie jest tylko problem z paddingami. Bez paddingów też by Ci nie działał. Napiszę to od nowa.

edit:

<!DOCTYPE html>
<html>
<head lang="pl">
  <meta charset="utf-8">
  <title>div z pelna szerokoscia i paddingiem</title>
  <style>
.wrapper {
  overflow: hidden;
  padding-left: 276px;
}
 
.main-wrapper {
  float: right;
  width: 100%;
}
 
.main {
  padding: 0 56px 0 296px;
}
 
.sidebar {
  float: right;
  width: 276px;
  margin-left: -276px;
}
 
    /* to tylko dla debugowania, mozna usunac */
    .main,
    .sidebar {
      height: 100px;
    }
 
    .main {
      background: red;
    }
    .sidebar {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="main-wrapper">
      <div class="main">
      </div>
    </div>
    <div class="sidebar">
    </div>
  </div>
</body>
</html>
 
edytowany 1x, ostatnio: bswierczynski, 2011-07-10 13:23

Pozostało 580 znaków

2011-07-10 13:22
0

słuchaj, szablon już jest utworzony i on działa, tylko ten main nie idzie na cały ekran.

edytowany 1x, ostatnio: wafcio, 2011-07-10 13:23

Pozostało 580 znaków

2011-07-10 13:24
0

I właśnie dlatego nie działa. Ale to nie jest wina paddingów. Sama funkcja "pełnej szerokości" nie działa, nawet po usunięciu paddingów. Zobacz na kod powyżej (edytowałem posta), powinien być OK.

edytowany 1x, ostatnio: bswierczynski, 2011-07-10 13:24

Pozostało 580 znaków

2011-07-10 13:27
0

działa, wielkie dzięki.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0