Avaleht
uus teema   vasta Tarkvara »  WWW »  palun css abi- 4 veeruga layout märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale.  :: Teata moderaatorile teata moderaatorile
otsing:  
Plondiin
HV kasutaja


liitunud: 13.12.2001
sõnum 15.01.2009 14:42:30 palun css abi- 4 veeruga layout vasta tsitaadiga
Palun abi layout-i puhul. Tahan 4 veeruga veebilehte, aga 4 ei tohi olla headeri all, vaid täis pikkuses ülevalt alla.
Muidu header, menüüriba, 3 veergu ja footer on paigas, aga 4 veerg ei lähe nende kõrvale. Viga on selles, et 4-nda veeru viskab kogu lehe alla, kuid 4. peab algama headeri kõrvalt.

Kas keegi oskab aidata?

css:
  1. * { padding: 0; margin: 0; }
  2.  
  3. body {
  4.  font-family: Arial, Helvetica, sans-serif;
  5.  font-size: 13px;
  6. }
  7.  
  8. #wrapper {
  9.  margin: 0 auto;
  10.  width: 995px;
  11. border: 1px solid #ff0000;
  12. }
  13.  
  14.  
  15. #header {
  16.  color: #333;
  17.  width: 845px;
  18.  float: left;
  19.  padding: 0px;
  20.  border: 1px solid #ccc;
  21.  height: 100px;
  22.  margin: 10px 0px 0px 0px;
  23.  background: #BD9C8C;
  24. }
  25.  
  26. #topmenyy {
  27.  color: #333;
  28.  width: 845px;
  29.  float: left;
  30.  padding: 0;
  31.  border: 1px solid #ccc;
  32.  height: 20px;
  33.  margin: 0px 0px 0px 0px;
  34.  background: #BD9C8C;
  35. }
  36.  
  37.  
  38. #leftcolumn {
  39.  color: #333;
  40.  border: 1px solid #ccc;
  41.  background: #E7DBD5;
  42.  margin: 0px 0px 0px 0px;
  43.  padding: 0px;
  44.  height: 350px;
  45.  width: 160px;
  46.  float: left;
  47. }
  48. #content {
  49.  float: left;
  50.  color: #333;
  51.  border: 1px solid #ccc;
  52.  background: #F2F2E6;
  53.  margin: 0px 0px 0px 0px;
  54.  padding: 0px;
  55.  height: 350px;
  56.  width: 520px;
  57.  display: inline;
  58. }
  59. #rightcolumn {
  60.  color: #333;
  61.  border: 1px solid #ccc;
  62.  background: #E7DBD5;
  63.  margin: 0px 0px 0px 0px;
  64.  padding: 0px;
  65.  height: 350px;
  66.  width: 160px;
  67.  float: left;
  68. }
  69. /*see on 4 lisaveerg mis peab algama headeri kõrvalt*/
  70. #lisaveerg{
  71.  color: #333;
  72.  border: 1px solid #ccc;
  73.  background: #E7DBD5;
  74.  margin: 0px 0px 0px 0px;
  75.  padding: 0px;
  76.  height: 350px;
  77.  width: 140px;
  78.  float: right;
  79. }
  80.  
  81.  
  82. #footer {
  83.  width: 845px;
  84.  clear: both;
  85.  color: #333;
  86.  border: 1px solid #ccc;
  87.  background: #BD9C8C;
  88.  margin: 0px 0px 10px 0px;
  89.  padding: 0px;
  90. }


html:
  1.    <!-- Begin Wrapper -->
  2.    <div id="wrapper">
  3.    
  4.          <!-- Begin Header -->
  5.          <div id="header">
  6.                 
  7.                        This is the Header              
  8.                           
  9.                  </div>
  10.                  <!-- End Header -->
  11.  
  12.          <!-- Begin topmenyy -->
  13.          <div id="topmenyy">
  14.                 
  15.                        This is the topmenyy          
  16.                           
  17.                  </div>
  18.                  <!-- End topmenyy -->
  19.  
  20.                 
  21.                  <!-- Begin Left Column -->
  22.                  <div id="leftcolumn">
  23.                 
  24.                        Left Column
  25.                 
  26.                  </div>
  27.                  <!-- End Left Column -->
  28.                 
  29.                  <!-- Begin Content Column -->
  30.                  <div id="content">
  31.                       
  32.                   <a href="#">Download this CSS Layout</a>            
  33.                 
  34.                  </div>
  35.                  <!-- End Content Column -->
  36.                 
  37.                  <!-- Begin Right Column -->
  38.                  <div id="rightcolumn">
  39.                 
  40.                        Right Column
  41.                 
  42.                  </div>
  43.                  <!-- End Right Column -->
  44.                 
  45.                  <!-- Begin Footer -->
  46.                  <div id="footer">
  47.                       
  48.                            This is the Footer      
  49.                             
  50.              </div>
  51.                  <!-- End Footer -->
  52.  
  53.  
  54.  
  55.  
  56.                  <!-- 4 lisaveerg -->
  57.                  <div id="lisaveerg">
  58.                 
  59.                        lisaveerg
  60.                 
  61.                  </div>
  62.                  <!-- End lisaveerg -->
  63.  
  64.  
  65.    
  66.    
  67.    </div>
  68.    <!-- End Wrapper -->
tagasi üles
vaata kasutaja infot saada privaatsõnum
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.01.2009 18:35:19 vasta tsitaadiga
Midagi selliselt ehk

<style>
* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

#wrapper {
margin: 0 auto;
width: 995px;
border: 1px solid #ff0000;
}


#header {
color: #333;
width: 845px;
float: left;
padding: 0px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background: #BD9C8C;
}

#topmenyy {
color: #333;
width: 845px;
float: left;
padding: 0;
border: 1px solid #ccc;
height: 20px;
margin: 0px 0px 0px 0px;
background: #BD9C8C;
}


#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 350px;
width: 160px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 350px;
width: 520px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 350px;
width: 160px;
float: left;
}
/*see on 4 lisaveerg mis peab algama headeri kõrvalt*/
#lisaveerg{
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 350px;
width: 140px;
float: right;
}


#footer {
width: 845px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#nelik{
width:995px;

}
</style>
</head>
<body>
  <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
                 
                       This is the Header               
                           
                 </div>
                 <!-- End Header -->

         <!-- Begin topmenyy -->
         <div id="topmenyy">
                 
                       This is the topmenyy           
                           
                 </div>
                 <!-- End topmenyy -->

            <div id="nelik">     
                 <!-- Begin Left Column -->
                 <div id="leftcolumn">
                 
                       Left Column
                 
                 </div>
                 <!-- End Left Column -->
                 
                 <!-- Begin Content Column -->
                 <div id="content">
                       
                  <a href="#">Download this CSS Layout</a>             
                 
                 </div>
                 <!-- End Content Column -->
                 
                 <!-- Begin Right Column -->
                 <div id="rightcolumn">
                 
                       Right Column
                 
                 </div>
                 <!-- End Right Column -->
                 
            
            
                 <!-- 4 lisaveerg -->
                 <div id="lisaveerg">
                 
                       lisaveerg
                 
                 </div>
                 <!-- End lisaveerg -->
             </div>
             <!-- Neliku lopp  -->
                 <!-- Begin Footer -->
                 <div id="footer">
                       
                           This is the Footer     
                           
             </div>
                 <!-- End Footer -->






   
   
   </div>
   <!-- End Wrapper -->

_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 15.01.2009 18:44:46 vasta tsitaadiga
Tõsta #lisaveerg wrapperi seest välja. wrapperile float: left, lisaveerule float: right. Mõlema ümber veel üks lisawrapper, millega joondad asja keskele.

Muide sul see layout on hetkel väga fikseeritud laiusega. Katsu parem nii teha, et keskmine osa muudaks oma suurust dünaamiliselt vastavalt sellele kui lai brauseri aken on. Minu ekraani peal see lisaveerg näiteks sinna kõrvale ei mahu ilma et horisontaalne kerimisriba tekiks.
_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.01.2009 18:52:53 vasta tsitaadiga
tsitaat:
Tõsta #lisaveerg wrapperi seest välja. wrapperile float: left,

sel juhul läheb see lisaveerg ülesse vastu browseri äärt, mitte ei alga samalt kõrguselt mis #topmenyy
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 15.01.2009 23:23:00 vasta tsitaadiga
Andrusny, mu meelest Plondiin ise ütles, et see lisaveerg peab algama sealt ülevalt:

Plondiin kirjutas:
4 ei tohi olla headeri all, vaid täis pikkuses ülevalt alla.

_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
andrusny
Kreisi kasutaja
andrusny

liitunud: 20.03.2006
sõnum 15.01.2009 23:27:41 vasta tsitaadiga
Vabandust. On jah selline tingimus, ei pannud tähele.
_________________
Kommentaarid: 7 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 7
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
Plondiin
HV kasutaja


liitunud: 13.12.2001
sõnum 20.01.2009 13:28:25 vasta tsitaadiga
Aitäh, sain lisaveeru paika.
Aga juhtus üks imelik asi, nimelt kui kirjutan lisaveergu sõna, siis kopeerib selle sõna lõpu 2 tähte lisareale. Millest see tuleb?
edit: see on IE 6 puhul nii, firefox on korras.

css:
css:
  1. * { padding: 0; margin: 0; }
  2.  
  3. body {
  4.  font-family: Arial, Helvetica, sans-serif;
  5.  font-size: 13px;
  6. }
  7.  
  8.  
  9. #kokkutombamine {
  10.  margin: 0 auto;
  11.  width: 985px;
  12. }
  13.  
  14.  
  15. #wrapper {
  16.  margin: 0 auto;
  17.  width: 845px;
  18.  float: left;}
  19.  
  20.  
  21. #header {
  22.  color: #333;
  23.  width: 845px;
  24.  float: left;
  25.  padding: 0px;
  26.  height: 100px;
  27.  margin: 0px 0px 0px 0px;
  28.  background: #BD9C8C;
  29. }
  30.  
  31. #topmenyy {
  32.  color: #333;
  33.  width: 845px;
  34.  float: left;
  35.  padding: 0;
  36.  height: 20px;
  37.  margin: 0px 0px 0px 0px;
  38.  background: #dfdfdf;
  39. }
  40.  
  41.  
  42. #leftcolumn {
  43.  color: #333;
  44.  background: #E7DBD5;
  45.  margin: 0px 0px 0px 0px;
  46.  padding: 0px;
  47.  height: 350px;
  48.  width: 160px;
  49.  float: left;
  50. }
  51. #content {
  52.  float: left;
  53.  color: #333;
  54.  background: #F2F2E6;
  55.  margin: 0px 0px 0px 0px;
  56.  padding: 0px;
  57.  height: 350px;
  58.  width: 525px;
  59.  display: inline;
  60. }
  61. #rightcolumn {
  62.  color: #333;
  63.  background: #E7DBD5;
  64.  margin: 0px 0px 0px 0px;
  65.  padding: 0px;
  66.  height: 350px;
  67.  width: 160px;
  68.  float: left;
  69. }
  70.  
  71. #lisaveerg{
  72.  color: #333;
  73.  background: #E7DBD5;
  74.  margin: 0px 0px 0px 0px;
  75.  padding: 0px;
  76.  height: 100%;
  77.  width: 140px;
  78.  float: right;
  79.  
  80. }
  81.  
  82.  
  83. #footer {
  84.  width: 845px;
  85.  clear: both;
  86.  color: #333;
  87.  background: #BD9C8C;
  88.  margin: 0px 0px 0px 0px;
  89.  padding: 0px;
  90. }
  91.  


html:
html:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="main.css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11.       <div id="kokkutombamine">
  12.  
  13.    
  14.    <!-- Begin Wrapper -->
  15.    <div id="wrapper">
  16.    
  17.          <!-- Begin Header -->
  18.          <div id="header">
  19.                 
  20.                        This is the Header              
  21.                           
  22.                  </div>
  23.                  <!-- End Header -->
  24.  
  25.          <!-- Begin topmenyy -->
  26.          <div id="topmenyy">
  27.                 
  28.                        This is the topmenyy          
  29.                           
  30.                  </div>
  31.                  <!-- End topmenyy -->
  32.  
  33.                 
  34.                  <!-- Begin Left Column -->
  35.                  <div id="leftcolumn">
  36.                 
  37.                        Left Column
  38.                 
  39.                  </div>
  40.                  <!-- End Left Column -->
  41.                 
  42.                  <!-- Begin Content Column -->
  43.                  <div id="content">
  44.                       
  45.                   <a href="#">Download this CSS Layout</a>            
  46.                 
  47.                  </div>
  48.                  <!-- End Content Column -->
  49.                 
  50.                  <!-- Begin Right Column -->
  51.                  <div id="rightcolumn">
  52.                 
  53.                        Right Column
  54.                 
  55.                  </div>
  56.                  <!-- End Right Column -->
  57.                 
  58.                  <!-- Begin Footer -->
  59.                  <div id="footer">
  60.                       
  61.                            This is the Footer      
  62.                             
  63.              </div>
  64.                  <!-- End Footer -->
  65.  
  66.  
  67.    
  68.    </div>
  69.    <!-- End Wrapper -->
  70.  
  71.  
  72.          <!-- 4 lisaveerg -->
  73.                  <div id="lisaveerg">
  74.                 
  75.                        lisaveergu kirjutatud tekstist kopeerib viimase sõna 2 viimast tähte teisele reale
  76.                 
  77.                  </div>
  78.                  <!-- End lisaveerg -->
  79.  
  80.  
  81.  
  82.       </div>
  83.    <!-- End kokku -->
  84.  
  85.  
  86. </body>
  87. </html>
  88.  



Tahaks küll muutuva keskosaga teha, kuid päisesse tuleb bänner, mis on joondatud sisuosa suhtes. (bänneri vasak külg on sama kaugel kui sisuosas paikneva teksti algus ja bänneri parem külg on sisuosa teksti lõppemisega ühel kaugusel)
Kui teeksin muutuva sisuosa, siis suure resolutsiooni (kui näiteks bänner keskele joondada) puhul jääb bännerist teineteisele poole liiga palju tühja ruumi. Ma ei tea kuidas seda siis pärast lahendada.
tagasi üles
vaata kasutaja infot saada privaatsõnum
nene
Kreisi kasutaja
nene

liitunud: 20.03.2004
sõnum 20.01.2009 17:59:19 vasta tsitaadiga
Plondiin kirjutas:
Tahaks küll muutuva keskosaga teha, kuid päisesse tuleb bänner, mis on joondatud sisuosa suhtes.


Näiteks nõndaviisi.
_________________
Mõistus otsas? Pane pinusse...
Kommentaarid: 24 loe/lisa Kasutajad arvavad:  :: 0 :: 1 :: 23
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  palun css abi- 4 veeruga layout
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.