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>


<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%;
}

#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%;
}

■

HTML, CSS, JavaScript, Ajax

csirip

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;
}


#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;
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Meglehet nézni?

pint3r · 2006. Aug. 7. (H), 12.20

Meglehet nézni valahol, hogy konkrétan miről van szó?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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>


<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/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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]-->


!--[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 :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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;
}


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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Jano

toxin · 2006. Aug. 7. (H), 12.52

nem kerestek sitebuilder tanoncot, mennék hozzád :))) respect, lásd munka/állás topik :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

repeat-y

ada · 2006. Aug. 7. (H), 14.39

Tudomásom szerint repeat-y :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Természetesen

Jano · 2006. Aug. 7. (H), 19.24

Igen, elírtam.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés