ugrás a tartalomhoz

Három oszlopos oldal igazítása

Anonymous · 2006. Aug. 7. (H), 11.44
Első próbálkozásom táblázat nélküli oldallal :)

Három oszlopos oldal lenne, a középső fix szélességű és középen kellene maradnia ablakméretezésnél. A két szélső igazából helykitöltő, mivel spéci háttér van mindkét oldalon, és szükség van a háttér kezdőpozíció megadására. Hogyan kellene beállítani a két szélső div stílusát? JScriptből egyszerű lenne (dinamikusan állított szélesség), de lehetőleg nem azzal szeretném megoldani...

kösz a segítséget
DP

a források:

<div id=oldal>
         <div id=balszelso>aaa</div>
         <div id=kozep>aaa</div>
         <div id=jobbszelso>aaa</div>
</div>
#balszelso
{
        background-image: url("balhatter.jpg");
        background-position: top right;
}
#kozep
{
        width: 775px;
}
#jobbszelso
{
        background-image: url("jobbhatter.jpg");
        background-position: top left;
}
#oldal
{
        width: 100%;
}
‹ A <select - option> lista formázás Elcsúszik az oldal a túl hosszú szavaktól ›
 ■
1

Az egészet akarod középre tenni?

pint3r · 2006. Aug. 7. (H), 11.54
Az egészet akarod középre tenni?

Ha a bal háttér meg a jobb is fix szélességű, akkor azt le kell fixálni, a 3 div teljes szélességét pedig meg kell adni az #oldal div-nek és margin-left: auto; margin-right: auto; a középre igazításhoz.

Pl.:

#balszelso
{
        width: 20px;
        background-image: url("balhatter.jpg");
        background-position: top right;
}
#kozep
{
        width: 775px;
}
#jobbszelso
{
        width: 20px;
        background-image: url("jobbhatter.jpg");
        background-position: top left;
}
#oldal
{
        width: 815px;
        margin-left: auto;
        margin-right: auto;
}
2

nem egészen...

Anonymous · 2006. Aug. 7. (H), 12.04
Csak a középső oszlop marad középen, a másik kettő változó szélességű. Egy kellemetlen mozaikos hátteret kaptam a dizájnban, amiatt lenne szükség a két szélső oszlopra, hogy illeszkedjen a középső részhez (ami árnyékot vet a háttérre, így az árnyékot egy darab háttérrel benne hagytam a középső oszlop hátterében)
4

Meglehet nézni?

pint3r · 2006. Aug. 7. (H), 12.20
Meglehet nézni valahol, hogy konkrétan miről van szó?
3

ilyesmi?

toxin · 2006. Aug. 7. (H), 12.19
http://toxin.hu/weblabor/css/test.html

<style type="text/css">
    #wrapper_1{
        background: url(1.jpg) top left no-repeat;
        width: 100%;
        min-width: 1000px;
    }
     #wrapper_2{
       background: url(2.jpg) top right no-repeat;
       width: 100%;
       min-width: 1000px;
    }
     
        #center{
            width: 775px;
            margin: 0 auto;
            border: 1px solid red;
            min-height: 500px;
        }
        * html body #center{
            height: 500px;
        }
    
</style>
</head>

<body>
<div id="wrapper_1">
<div id="wrapper_2">
    <div id="center">
    
    </div>
</div>
</div>
mondjuk a mozaikmintát nem mondtad, de végülis akárány div réteg lehet egymás felett :)

ui: bár tényleg kéne egy minta, annélkül nehéz, árnyékolás+mozaikos háttéret szvsz alpha csatornás png-al oldjátok meg: http://ideafontana.com/idea/
5

alakul :)

Anonymous · 2006. Aug. 7. (H), 12.40
köszi a segítséget, látszik van még mit tanulnom div témában :)
az alpha csatornás PNG-t bírják a böngészők? mintha úgy emlékeznék hogy az IE nem kedveli.

amúgy ez a szörnyűség a hátterem

az ideafontana-n levő megoldás úgy tűnik jó lesz az én esetemben is, még jó, hogy nekem csak a két oldalán van árnyék :)

még 1x köszi
7

re

toxin · 2006. Aug. 7. (H), 12.50
"alpha csatornás PNG-t bírják a böngészők? mintha úgy emlékeznék hogy az IE nem kedveli."

rálehet beszélni lásd lap forrása:

!--[if IE]>
  <link href="http://ideafontana.com/idea/usr/themes/idea/ie.css" rel="stylesheet" media="screen, projection" type="text/css" />
 <style media="screen, projection" type="text/css" >
  body {
	behavior:url("http://ideafontana.com/idea//usr/themes/idea/csshover.htc");
  }
  
   #header_wrapper{
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ideafontana.com/idea/usr/themes/idea/logo.png',sizingMethod='crop'); 
    		background: none;
   }
   
   #content_wrapper_0{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ideafontana.com/idea/usr/themes/idea/wrapper_back.png',sizingMethod='scale'); 
    	background: none;
   }
   
  #footer_wrapper{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ideafontana.com/idea/usr/themes/idea/footer.png',sizingMethod='crop'); 
    	background: none;
   }
   
 </style>
<![endif]-->
mindestre nekem máshogy nem sikerült, érékelhető eredményt, idegbaj tüneteinek megjelenése nélkül produkálni :)
9

még egy aprócska kérdés

Anonymous · 2006. Aug. 7. (H), 13.19
12.19-es hozzászólásodban megadott forrás sajna balra zár IE alatt... próbáltam beletenni az idea-s kódot, variálni a marginokkal, de nem nagyon sikerült :S
6

Egybe

Jano · 2006. Aug. 7. (H), 12.45
Általában ha a középső rész fix szélességű, akkor működik az, hogy egy képre vágod a jobb, közép és bal "oszlop" hatterét (vagyis lényegében nem vágod szét az eredeti képet) és ezt az egybe képet középre igazítod CSS-sel (ha kell akkor függőleges ismétléssel).

body {
 background-position:center top;
 background-repeat:y-repeat;
}
A háttér nyugodtan lehet ebben az esetben "nagyon" széles, pl 1600px (hogy nagy monitoron se fogyjon el), majd a böngésző ugyis középre igazítja.

Ennél pontosabb/optimálisabb megoldást tényleg csak a konkrét dizájn ismeretében lehet mondani.
8

Jano

toxin · 2006. Aug. 7. (H), 12.52
nem kerestek sitebuilder tanoncot, mennék hozzád :))) respect, lásd munka/állás topik :)
10

repeat-y

ada · 2006. Aug. 7. (H), 14.39
Tudomásom szerint repeat-y :)
11

Természetesen

Jano · 2006. Aug. 7. (H), 19.24
Igen, elírtam.