Avtor: -primož- 10.02.10

Div v divu in problem z višino - overflow: auto

Sam se večkrat srečam s problemom višin in tale kratek CSS trik mi vedno pomaga. Problem je namreč, da višina vsebinskega dela ne sledi višini levega ali desnega stolpca in vse skupaj izpade sila neprofesionalno. Na ta problem najpogosteje naletite, ko izdelujeto postavitev za spletno stran.

Rešitev za to je overflow: auto, ki ga določite divu, ki predstavlja vsebinski del (,ki ni vedno višji od stolpcev).

Prikaz divov brez overflow: auto

Prikaz divov, kjer ima vsebinski del določen overflow: auto

HTML in CSS koda za zgornji prikaz:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body{background: #ffdae3;}
.zunanjiDiv{
    width: 400px;
    text-align: right;
    border: 2px solid #ff4071;
    overflow: auto;
}
.notranjiDiv{
    float: left;
    width: 200px;
    background: #ff4071;
    border: 2px solid #fff;
}
</style>
</head>

<body>

<div class="zunanjiDiv">

    <div class="notranjiDiv">
        <p>Stolpec je višji, kot vsebina.</p>
        <p>Stolpec je višji, kot vsebina. </p>
        <p>Stolpec je višji, kot vsebina.</p>
        <p>Stolpec je višji, kot vsebina.</p>
    </div>

    <p>Vsebinski del</p>
    <p>je manjši, kot levi stolpec</p>

</div>
</body>
</html>

Upam, da vam CSS postavitve speltnih strani sedaj ne bodo več delale takih preglavic.

Komentiraj:

Miha	\|22-03-2010 15:42

Živjo!

Mene pa zanima, kako bi spisal kodo za vsebino, ki ima zgoraj 1 div za zgornji rob, 2 div za vsebino, in 3 div za spodnji rob. Spodnji rob bi se pa prilagajal višini napisane vsebine (v 2 divu), da bi bil vedno pod njo. Vse skupaj bi bilo pa oddaljeno 500px od vrha spletne strani, in 300px od leve strani?

Hvala!

-primož-

|22-03-2010 20:52

300px od leve strani ... misliš s tem, da bi bilo vse na sredini? ker 300px od leve je zelo relativen pojem, saj ima vsak obiskovalec svojo resolucijo ekrana.

*na sredini:
http://moje-mesto.com/zzz/divi.html

*300px od leve:
http://moje-mesto.com/zzz/divi2.html

Oglej si izvorno kodo. Višine in širine so simbolne. Če zbrišeš višine (height) pri divih, potem bo posamezen div visok toliko, kolikor je vsebine v njem.

Namig: Najlažje je na začetku narediti en div, v katerega nato postaviš vse druge dive. Tem divom, ki jih nato vstaviš notri, nato določiš float: left; in jih na nek način sestavljaš, kot tetris.

Upam, da sem uspel odgovoriti na tvoje vprašanje. Če nisem mi prosim malo bolj opiši in ni ga vraga, da nebi našla rešitev.

Miha	\|22-03-2010 21:24

@ -primož-
Najlepša Hvala za odličen in uporaben odgovor!

Kodo sem na hitro pogledal in kaže, da ravno to potrebujem - jutri jo bom vstavil v spletno stran.

Sem že skoraj obupal in začel delat s tabelami (sm pač še vedno zelen - sploh pa divi in css).

Še eno vprašanje...
Div z vsebino (2 div) bi rad prilagodil tako, da bi bil v vsebini na desni strani še nek 'manjši meni' (obvestila, kak video,...).

Moram potem vzeti div 'vsebina' nekako tako, kot je div 'okvir' in vanj (v div 'vsebina') vstaviti še dva diva
(npr. novice - na levi strani diva 'vsebina'; obvestila, video - na desni strani diva 'vsebina)?

Kako pa potem v tem primeru sestavim 'novice' in 'obvestila,' da sta eden ob drugem?
Morda z overflow:auto ?

Še enkrat hvala! Bom še kaj pisal, če se mi kaj zalomi, če ti je prav?

LP

-primož-

|22-03-2010 22:23

Tudi jaz sem dosti rabil, da sem se na dive navadil

če je skupna širina 600px:
v div #vsebina vstavi še dva diva; prvemu divu #glavnaVsebina določi širino 400, drugemu divu #desniStolpec pa določi širino 200 in ne pozabi obema določiti še float: left; Če float: left ne bo deloval pa dodaj k #vsebina{} še overflow:auto.

V div #desniStolpec pa nato vstavljaj potem meni, obvestila, video, itd. Da se bo vse do piksla ujemalo pa uporabljaj še padding (notranji odmik) in predvsem margin (zunanji odmik).

Vprašanja so dobrodošla in če le znam odgovorim na njih

Lp,
-primož-

Miha	\|24-03-2010 12:47

Hmm, Primož, imam problemček.

http://zupnije.rkc.si/trzin/divi/divi.html

enostavno desni meni noče slediti višini glavneVsebine...

sem morda narobe spisal kodo?

-primož-

|25-03-2010 09:02

Popravi CSS:
#vsebina{
min-height: 200px;
float: left;
overflow:auto;}
#glavnaVsebina{
width:396px;
padding-left:4px;
padding-top:10px;
float: left;
background: #CC3366;}
#desniStolpec{
background:#7FDFFF;
width:100%;
float: left;}

Popravi HTML:

<$$div id="desniStolpec"$$>
<$$div id="glavnaVsebina"$$>Glavna vsebina
<$$/div$$>
desni meni ...
<$$/div$$>

Iz značk div zbriši $$

Link prilepim danes ponoči.

Lp,
-primož-

-primož-

|27-03-2010 21:49

Zgornji primer:

http://moje-mesto.com/zzz/divi3.html

lala	\|26-09-2011 09:23

Lep pozdrav Primož

Imam podoben problem kot zgoraj. Skratka imam narejeno tabelo ter dano sliko za ozadje. Pojavi pa se problem, da na tistem računalniku kjer sem ustvaril tabelo in sliko je izgled dober, ko pa odprem spletno stran na drugem računalniku je tabela in slika prevelika. Ne vem kaj moram narediti da se bo tabela in slika prilagajala glede na vsak zaslon. Bodisi ali bo 17" ali 22" in da bo izgled spletne strani pri obeh enak.
Že v naprej se prav lepo zahvaljujem za odgovor

lala	\|26-09-2011 09:25

Ne vem, če sem bil dovolj jasen. Rad bi da se spletna stran avtomatično pomanjša ali poveča glede na velikost monitorja, hvala

-primož-

|26-09-2011 20:06

Pozdravljen,

sem ti poslal e-mail z javascript kodo, ki bi morala biti prava zate.

Lp,
-primož-

Marko

|14-12-2011 18:17

Pozdravljeni,

imam sledeče vprašanje. Na spletno stran v modul, ki meri v širino cca 200 px želim vnesti kodo za FB lixe box.
Ko prilagodim širino kode le ta ostane, vendar prvotni okvir v ozadju še vedno meri v širino kot prej - tako imam 2 obrobi, zunanja še vedno presega širino modula. Namreč ko kodo shranim v editorju mi jo ta takoj spremeni in izloči style. Kakšen praktičen nasvet ?

lp in hvala
Marko

-primož-

|19-12-2011 00:14

Pozdravljen,

hm, ne vem čisto točno, kaj misliš. Mi lahko pošlješ povezavo do problema ali po mejlu kodo?

Če misliš, da je tvoja koda pravilna in da je editor kriv, ker ti jo zbriše potem pojdi v bazo in direktno v bazi spremeni/dodaj style.

Kot pa se tudi spomnim pri FB like boxu, mislim, da pomaga, če daš desni klik, si ogledaš izvorno kodo, ki jo facebook ustvari, da vidiš, kaj je potrebno spremeniti, potem pa s CSSjem svoj stil določiš. Pomaga tudi, če pri CSSju dopišeš zraven !important.

Lp,
-primož-

Sorodni vodiči
Display: none in Visibility: hidden CSS Povečava slike CSS okvir na sredini, s slikami Noga spletne strani Drugačna prva črka	CSS Kode 2 CSS Osnove CSS sprites meni s hover efektom Kurzorji na spletnih straneh hover oblaček za namig

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči