Diskusijų forumai
Diskusijų forumai     Kompiuterinė grafika, dizainas     Tinklalapių dizainas     Kaip su css sukurti tokio tipo puslapi?


Kaip su css sukurti tokio tipo puslapi?

sandreiras
Naujokas

 
Tema paskelbta: 2010-07-02 00:21:34
http://www.drug.lt/pavyzdys.jpg

Pavyksta viska sucentruoti, bet su meniu iskyla problemos. Niekaip neiseina ji padaryti toje vietoje kaip parodyta pavizdyje. Is karto dekoju uz pagalba smile
 


Atsakymai į temą

Edmundas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-07-02 01:03:33 [#984] Atsakymo ID: 984 Ilgalaikė nuoroda į atsakymą #1
Sveikas,

viskas čia gana paprasta. Meniu punktus įdėk į atskirą div bloką, tada su CSS nurodyk to bloko plotį (tai reikia būtinai padaryti!) ir pridėk savybę margin: 0 auto.

<div id="meniu">
    <ul>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
         <li><a href="#">...</a></li>
     </ul>
</div>


#meniu { width: 300px; margin: 0 auto; }
sandreiras
Naujokas

 
Atsakymas parašytas: 2010-07-02 11:21:30 [#986] Atsakymo ID: 986 Ilgalaikė nuoroda į atsakymą #2
 body {
	  background: #000000;
	  }
	
	#antraste {
	  position: relative;
	  width: 741px;
	  top: 0px;
	  margin: auto;
	  }
  
	#turinys {
	  position: relative;
	  width: 741px;
	  top: -93px;
	  margin: auto;
	  }
	  
	#apacia {
	  position: relative;
	  width: 741px;
	  top: 600px;
	  margin: auto;
	  }
	  
	#meniu { width: 300px; margin: 0 auto; }


</style>
</head>

<div id="antraste">
<img src="antraste.jpg">
</div>
<div id="apacia">
<img src="apacia1.jpg">
</div>
<div id="turinys">
<img src="balta4.jpg">
</div>
<div id="meniu">
    <ul>
         <li><a href="#">forumas</a></li>
         <li><a href="#">jeisunku</a></li>
         <li><a href="#">dienorastis</a></li>
         <li><a href="#">apiedruglt</a></li>
     </ul>
</div>

padariau sitaip, bet tikriausiai cia kazko truksta ar kazka blogai padariau :jerk:
Pask. redagavo sandreiras (2010-07-02 11:36:08), redaguota kartų: 3

Irmantas
Tinklalapio šeimininkas

 
Atsakymas parašytas: 2010-07-02 11:56:28 [#987] Atsakymo ID: 987 Ilgalaikė nuoroda į atsakymą #3
<div id="wrap">

   <div id="antraste">

      <div style="width: 741px; height: 300px;">
      </div>

      <div id="meniu">
          <ul>
             ...
          <ul>
      </div>

   </div>

   <div id="turinys">
   </div>

   <div id="apacia">
   </div>

</div>



#wrap { margin: 0 auto; width: 741px; }
#meniu { width: 400px; margin: 0 auto; }
#turinys { width: 741px; height: 400px; }
#apacia { width: 741px; height: 200px; }
sandreiras
Naujokas

 
Atsakymas parašytas: 2010-07-02 13:46:30 [#989] Atsakymo ID: 989 Ilgalaikė nuoroda į atsakymą #4
Pas mane meniu butu is img. Pabandziau ir taip kaip cia parodet ir dar kita pavyzdi rades, bet jo net neatsiranda. Cia dar neviska padariau, tik su forumu pabandziau

    body {
	  background: #000000;
	  }
	
	#wrap { margin: 0 auto; width: 741px; }
	#meniu { margin: 0 auto; width: 400px; }
	#antraste { width: 741px; height: 330px; }
	#turinys { width: 741px; height: 600px; }
	#apacia { width: 741px; height: 93px; } 

	

#menu li { float: center; }
#menu li a { display: block; height: 21px; }  
#menu li a#forumas { width: 89px; background: url(../images/forumas.jpg) no-repeat; }
	
	</style>
<div id="wrap">
  
   <div id="antraste">
	<img src="antraste.jpg">
      <div style="width: 741px; height: 300px;">
      </div>
  
      <div id="meniu">
	  
          <ul>
		    <li><a href="#" id="forumas">forumas</a></li>
            <li><a href="#" id="jeisunku">jeisunku</a></li>
            <li><a href="#" id="dienorastis">dienorastis</a></li>
		    <li><a href="#" id="apiedruglt">apiedruglt</a></li>
             
          <ul>
      </div>
  
   </div>
  
   <div id="turinys">
   <img src="balta4.jpg">
   </div>
  
   <div id="apacia">
   <img src="apacia1.jpg">
   </div>


o taip atrodo kas gaunasi. Ant to meniu noriu kad uzsidetu img failai, kurios paspaudus atsidarytu forumas ir pan.
http://www.drug.lt/bandymas2.html
Pask. redagavo sandreiras (2010-07-02 13:57:03), redaguota kartų: 1