Jump to content
php.lv forumi

divs


renathy

Recommended Posts

Kkā ar css man galīgi neiet nekas...

 

 

Vajag dabūt "režģi" (tabulu) no div-iem. 2 x 3 (divas kolonnas un trīs rindas). Katrā div-ā iekšā ir teksts fiksētās vietās.

 

Problēmas:

1) Mēģinu dabūt vienā rindā blakus divus <div>, ar bildi fonā, ar fiksētu augstumu un platumu. Nesanāk, lai viņi stāv blakus. Sanāk viens zem otra.

2) Nesanāk dabūt tekstu tieši tajā div daļā, kur gribu. Teiksim gribu dabūt, lai teksts "xxx" rādītos diva augšējā labā stūrī. Savukārt teksts "yyy" rādītos diva apakšājē kreisā stūrī.

 

Lūgums palīdzēt ar kodu, vai vismaz ieteikumu... Ar CSS neesmu draugos un nekad nebūšu laikam.

 

R,

Edited by renathy
Link to comment
Share on other sites

kaut kā ta div stils float:left

 

<style>
div {float:left}
</style>

<div style="width:200px">
<div style="width:100px" >pirma col</div>

<div style="width:100px" >otra col</div>
</div>

Tas tikai tāds ieskats. Labo pats kā nepieciešams css.

 

Bet jebkurā gadījumā, ja nepieciešama tabulas veidā, tad labāk lietot tabulu.

Edited by reiniger
Link to comment
Share on other sites

Vienu otram blakus var nolikt, kā jau šeit minēja, izmantojot "float: left", pozicionēt tekstu pa labi varēsi ar to pašu "text-align: right", bet lejā gan laikam nāksies izmantot pozicionēšanu, ja gribi, lai diva saturs neietekmē apakšējā teksta izvietojumu. Ideja apmēram šāda, lielais divs, šajā gadījumā kas ir kā tabulas šūna ar "position: relative" un iekšā maziņš divs ar "position: absolute; left: 0px; bottom: 0px", kaut kā tā.

Edited by Maris-S
Link to comment
Share on other sites

Uz ātro sataisīju piemēru, tomēr arī augšējam divam izmantoju absolūto pozicionēšanu.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Div positions</title>
   <link rel="stylesheet" href="css/columns.css" type="text/css" media="screen" charset="utf-8" />

   <style type="text/css">
       .container {
  	     width: 440px;
       }

       .outer {
  	     width: 200px;
  	     height: 300px;
  	     margin: 10px;
  	     background-color: lime;
  	     position: relative;
  	     float: left;
       }

       .top {
  	     position: absolute;
  	     top: 0px;
  	     right: 0px;
       }

       .bottom {
  	     position: absolute;
  	     bottom: 0px;
  	     left: 0px;
       }
   </style>
</head>
<body>
<div class="container">
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
   <div class="outer">
       <div class="top">Augšējais</div>
       <div class="bottom">Apakšējais</div>
   </div>
</div>
</body>
</html>

Edited by Maris-S
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...